I use CKEditor in a modal window, so it's "invoked" when the modal is shown.
When this happens I see CKEditor try to loads files like:
ckeditor/lang/es.js?t=J5S8
ckeditor/styles.js?t=J5S8
ckeditor/plugins/confighelper/plugin.js?t=J5S8
ckeditor/skins/moono-lisa/editor.css
...
I tried to load all these files in the page, but when CKeditor is invoked it tries to load again more files, even the ones I already loaded.
This is a problem in my case because I use an AssetManager and Minification system in my framework (Yii2), and since everything is packed in one file, CKeditor fails when it tries to load again files.
Is there any way to preload everything that CKeditor will need, in order to have the Assets and Minify process working well ?
My CKEditor config is:
CKEDITOR.replace('#editor', {
customConfig: '',
height: 200,
language: 'es',
extraPlugins: 'confighelper',
removePlugins: 'elementspath',
resize_enabled: false,
toolbarLocation: 'top',
toolbar: [
{ name: 'styles', items: [ 'Format' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline' ] },
{ name: 'links', items: [ 'Link', 'Unlink' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'spellchecker' ], items: [ 'Scayt' ] },
{ name: 'tools', items: [ 'Maximize' ] },
]
});
I try to upload a file in "Google Chrome", with "ExtJS 4" and Direct form submit.
On every Way I try in chrome, I get the Error:
Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.
In Firefox it works without exeptions.
I searched allready in different forums, but not a single problem with this failure, give me single idea what I can use for my task.
Can somebody try to help me?
Ext.define('MyApp.view.DirectUpload', {
extend: 'Ext.form.Panel',
itemId: 'DirectUpload',
title: 'Direct Upload',
initComponent: function() {
var me = this;
me.initialConfig = Ext.apply({
paramOrder: [
'name',
'file'
]
}, me.initialConfig);
Ext.applyIf(me, {
paramOrder: [
'name',
'file'
],
items: [
{
xtype: 'textfield',
itemId: 'name',
fieldLabel: 'Label',
name: 'name'
},
{
xtype: 'filefield',
id: 'file',
itemId: 'file',
fieldLabel: 'Label',
name: 'file'
},
{
xtype: 'button',
handler: function(button, event) {
this.up('form').getForm().submit({
scope: this,
success: function(form, action)
{
console.log(action);
},
failure: function(form, action)
{
console.log(action);
}
});
},
text: 'MyButton'
}
]
});
me.processDirectUploadTest(me);
me.callParent(arguments);
},
processDirectUploadTest: function(config) {
config.api = {submit: 'RPC.fileupload.filterUploads'};
return config;
}
});
I would like to change tool menu optons on ck-editor.
for example I remove some of them that I dont need to use.
How can I do that ?
There's a configuration setting that allows you to set which buttons will appear.
You just create your own toolbar layout. I've included the default full toolbar code, you can remove the buttons that you don't want to appear.
It's best to copy the default config.js file and rename it, then call your custom config file and the custom toolbar when you load the editor:
CKEDITOR.replace( 'xxx_textarea_id_xxx',
{
customConfig : 'xxx_name_of_custom_config_file_xxx.js',
toolbar : 'XXX_custom_name_XXX'
});
This is the config setting for the default full toolbar layout.
The '/' within the toolbar layout means break to a new line.
The name: 'document', items : entries are each shown as a group and there are spaces between the entries.
The '-' creates a vertical spacer within a group.
The demo page shows an example of this default toolbar layout:
CKEditor Demo
config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
This is a custom toolbar config setting.
When you set the toolbar config setting you only use the part of the name that is after "toolbar_". toolbar : 'XXX_custom_name_XXX'
config.toolbar_XXX_custom_name_XXX =
[
{ name: 'xxx_custom_group_namexxx', items : ['Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
Here's the link to the toolbar page in the developers guide:
CKEditor 3.x | Developers Guide - CKEditor Toolbar
You might want to turn off any features that you aren't using with the removePlugins config setting:
config.removePlugins = 'flash,iframe';
Here's the page from the CKEditor 3 JavaScript API Documentation that lists all of the config settings:
Namespace CKEDITOR.config
I use ExtDesigner designed a window, and the generated json is like:
{
xtype: 'window',
height: 477,
width: 666,
layout: 'fit',
title: '添加广告位',
items: [
{
xtype: 'form',
bodyStyle: 'padding: 10px',
title: '',
items: [
{
xtype: 'textfield',
anchor: '100%',
fieldLabel: '名称'
},
{
xtype: 'radiogroup',
anchor: '100%',
fieldLabel: '广告类型',
items: [
{
xtype: 'radio',
boxLabel: '文字'
},
{
xtype: 'radio',
boxLabel: '图片'
}
]
}
]
}
]
}
I copied it but I don't know how to use it. I don't find a method to convert it to an extjs component. How to do it?
PS: I use extjs 2.2
There are two ways to create an ExtJS component.
create the component explicitly, for example: new Ext.Window({...});. This way you get the component right away, meaning the event listeners, the extra methods...etc.
the second way is lazy loading, which is by specifying the xtype of a component in a plain javascript object. This is exactly what you have.
To make the second way work, you need to include your xtype-javascript-object in an ExtJs container, and the container will know how to render it at the appropriate time.
for example :
Ext.onReady(function(){
new Ext.Viewport({
layout : 'fit',
items : [{
xtype: 'window',
height: 477,
width: 666,
layout: 'fit',
title: '添加广告位',
items: [...]
}]
});
});
Think you are looking for something like this. This will show your window in a pop up.
var win = new Ext.Window({
width:400
,id:'autoload-win'
,height:300
,autoScroll:true
});
win.show();
I'm trying to use Sencha Touch 2 to load a local json file into a dataview.
When checking with Firebug - the file is being loaded by Sencha, but it is not being shown for some reason.
any ideas why?
Here is my code (the HTML is the basic Sencha html):
Ext.require([
'Ext.Panel',
'Ext.tab.Panel',
'Ext.Ajax'
]);
new Ext.application({
name: 'MyApp',
useLoadMask: true,
launch: function () {
Ext.regModel('City', {
fields: [
{name:'ID', type:'string'},
{name:'Name', type:'string'}
]
});
var CitiesStore = new Ext.create('Ext.data.Store',{
autoLoad: true,
storeId: 'CitiesStore',
model: 'City',
proxy: {
type: 'ajax', // ajax is for same domain, jsonp for cross-domain
url: 'cities.json',
reader: {
type: 'json',
root: 'cities'
}
}
});
Ext.create('Ext.TabPanel',{
fullscreen: true,
tabBarPosition: 'bottom',
scrollable: true,
items: [
{
title: 'Home',
iconCls: 'home',
html: 'Welcome to my app',
style: 'text-align: center;'
},
{
title: 'Search',
iconCls: 'search',
items: [
Ext.create('Ext.DataView', {
store: 'CitiesStore',
itemConfig: {
tpl: '<h2>{Name}</h2>'
}
})
]
},
{
xtype: 'toolbar',
title: 'My App',
dock: 'top'
}
]
}).setActiveItem(1); // this is set for debugging only
}
});
any the json is dead simple
{"cities":[{"ID":1,"Name":"new york"},{"ID":2,"Name":"las vegas"},{"ID":3,"Name":"los angeles"}]}
Many thanks!
I have had issues with lists or dataviews not showing unless the parent container had a width set to a value or a layout set to 'fit'. In case it makes any difference, try:
title: 'Search',
iconCls: 'search',
layout: 'fit',
Having had a very quick glance... Few things - but firstly your reference to the store is incorrect.
In your DataView you should don't need the quotes:
store: CitiesStore,
Also you don't need the new keyword on the store as you're using Ext.Create.
This should get you a bit further at least.
are you using Firefox? Firefox and IE sometimes make problems when viewing
ply use Chrome or Safari.