{ label: 'Name', fieldName: 'Name', type:'button',initialWidth:200,typeAttributes: { label: {fieldName: 'Name'},class:"borderRemove" },sortable: true}
//css class
.borderRemove{ border:none; }
just add variant: 'base' to typeAttributes
so in your case it should look like this:
typeAttributes: { label: {fieldName: 'Name'}, variant: 'base'}
class:"borderRemove" - should be removed
Related
I have a page where I use CKEditor 5 with CKFinder 3.
By default, the images that are included in the textarea are responsive and can only be aligned as full or right.
The concerning page has photos of contacts on it and they shouldn't be that big.
How can I configure the width of an image that is inserted through the button of the toolbar?
ClassicEditor
.create( document.querySelector( '#pageTextArea' ), {
image: {
styles: [ { name: 'contact', icon: 'right', title: 'My contact style', className: 'my-contact-side-image' } ]
}
ckfinder: {
uploadUrl: 'example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
}
})
.catch( error => {
console.error( error );
process.exit(1);
});
To provide some custom image styling you need to:
First, configure the image.styles option.
ClassicEditor.create( element, {
// ...
image: {
// ...
styles: [
// Pottentially some other style can go here. E.g. the `full` or `side`.
{ name: 'contact', icon: 'right', title: 'My contact style', className: 'my-contact-side-image' }
]
}
}
And secondly, make the image 100px wide via CSS:
.ck-content figure.image.my-contact-side-image {
float: right;
width: 100px;
}
Note that you need to handle styles of the created content outside of the editor as well.
Is it possible to have multiple options in the Style menu that set their own CSS class, but are not mutually exclusive?
For example, I want to have something similar to this:
stylesSet: [
{name: 'Very Large Padding',
element: 'p',
attributes: {
class: 'very-large-padding',
}},
{name: 'Alternative Font',
element: 'p',
attributes: {
class: 'alternative-font',
}},
]
In CSS then, something like:
.very-large-padding { padding: 4242px; }
.alternative-font { font-family: "MyFont", sans-serif; }
This works, but the problem is that I cannot have both "Very Large Padding" and "Alternative Font" activated at the same time. Is there a solution to this, that involves setting styles via CSS instead of inline style attribute?
Block styles in CKEditor 4 cannot be combined. However, you can use inline elements (i.e. span):
{
name: 'Very Large Padding',
element: 'span',
attributes: {
class: 'very-large-padding',
}
},
{
name: 'Alternative Font',
element: 'span',
attributes: {
class: 'alternative-font',
}
},
which results in:
<p><span class="alternative-font">Fo<span class="very-large-padding">oB</span>ar</span></p>
or create a hybrid style:
{
name: 'Very Large Padding with Alternative Font',
element: 'span',
attributes: {
class: 'very-large-padding alternative-font',
}
},
I'm testing adding custom stylesSet. So in my code i add the following (per instructions in)
CKEDITOR.stylesSet.add('custom_style', [
{ name: 'No UL Bullets', element: 'ul', styles: { 'list-style-type': 'none' } },
{ name: 'My Custom Inline', element: 'span', attributes: { 'class': 'mine' } }
]);
oEditor.config.stylesSet = 'custom_style';
The problem is that it overrides the rest of the default styles that comes with CKEditor. I cant seem to figure out how to just append my new styles with the existing once. Any ideas?
You don't need to change config.stylesSet option to append your styles to default ones. You can edit the styles.js file, adding and removing styles from it. It is a configuration file just like config.js.
Update: You can set config.stylesSet directly to avoid loading styles.js:
CKEDITOR.replace( 'editor1', {
stylesSet: [
{ name: 'Big', element: 'big' },
{ name: 'Small', element: 'small' },
{ name: 'Typewriter', element: 'tt' }
]
} );
Here is an example how to replace and create new styles and classes in CKEditor 4. This is the whole content of the file styles.js:
CKEDITOR.stylesSet.add ('default', [
/* My Block Styles */
{ name: 'My Div Class', element: 'div', attributes: {'class': 'my-div-class-name'} },
{ name: 'My Div Style', element: 'div', styles: {'padding': '10px 20px', 'background': '#f2f2f2', 'border': '1px solid #ccc'} },
/* My Inline Styles */
{ name: 'My Span Class', element: 'span', attributes: {'class': 'my-span-class-name'} },
{ name: 'My Span Style', element: 'span', styles: {'font-weight': 'bold', 'font-style': 'italic'} }
]);
Edit bar:
I have the following button within a Panel within a view:
items: [
{
xtype: 'button',
text: 'SEND',
ui: 'confirm',
docked: 'bottom',
handler: function(){
view.push('TouchNuts.view.Transactions',{
title: 'New views title',
html: 'Some content'
});
}
}
]
I would like to navigate to a page that consists of a list 'TouchNuts.view.Transactions' when I click it. Any ideas?
view needs to be a reference to your NavigationView. One way of getting that reference is by giving it an id and then using Ext.getCmp to fetch the component:
{
xtype: 'navigationview',
id: 'my-id',
items: [...]
}
Ext.getCmp('my-id');
I accidentally deleted this post before, so I am resubmitting :\
I'm new to Ext JS and MVC in general and am toying with creating an app with a chart nested within a panel nested within a border panel within an app. [From top to bottom it goes Viewport > bordered panel > panel in 'center region' > chart]
The reason why I'm nesting a panel within the border panel is that the nested panel will hold both the chart as well as a toolbar for the chart, both of which are dynamic depending on the user's selection.
While simply having the border panel reference the externally defined chart view works well, once I try having it reference an externally defined panel view it throws 'Uncaught TypeError: Cannot call method 'substring' of undefined', and Aptana gives me a 'name is undefined' namespace error whether or not I have the nested panel reference the chart or simply be left empty. I have double checked my name spacing so I'm a little lost in where to start looking for the problem.
My base application file is as follows:
Ext.application({
name: 'Chart',
appFolder: 'chart',
controllers:['sidebar.Navigation', 'commoditycontrol.Commoditycontrol',
'chart.oil.Spreads'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
xtype: 'commoditycontrol',
}, {
region: 'east',
xtype: 'sidebarnavigation',
}, {
region: 'center',
xtype: 'oilbase',
}]
});
},
});
The 'oilbase' view is simply a panel that imports the chart and chart toolbar view (in this case I've left the toolbar view out)
Ext.define('Chart.view.base.Oil', {
extend: 'Ext.panel.Panel',
alias: 'widget.oilbase',
name: 'oilbase',
layout: 'fit',
items: [{
xtype: 'oilspreads'
}]
});
And here's the chart view 'oilspreads'
Ext.define('Chart.view.chart.oil.Spreads', {
extend: 'Ext.chart.Chart',
alias: 'widget.oilspreads',
name: 'oilspreads',
layout: 'fit',
store: 'Chart.store.oil.Spreads',
config: {
style: {
background: '#333333'
},
},
axes: [
{
title: 'Close',
type: 'Numeric',
position: 'left',
fields: ['close'],
minimum: 0,
maximum: 100,
cls: 'axis'
},
{
title: 'Month',
type: 'Category',
position: 'bottom',
fields: ['month'],
cls: 'axis'
}
],
series: [
{
type: 'line',
xField: 'month',
yField: 'close'
}
]
});
Again, everything works fine if I reference the chart view in the application rather than the 'oilbase' empty panel. If I reference the default panel xtype, everything works as well.
Is nesting panels simply discouraged? My gut feeling is that I'm simply missing an obvious namespacing issue but I would appreciate a 2nd set of eyes, as well as comments as to my approach to the MVC pattern for ExtJs in general.
Thanks
For the view to be loaded correctly it has to be defined either in the views config of your app, or in the views config of one of the controllers.