PDA

View Full Version : How to dynamically define component



Ex_Soft
11 May 2012, 4:09 AM
I get component's definition on-the-fly from server as a character string. This works fine when component's items are already defined:


Ext.onReady(function() {
var
formDefStr = "Ext.define(\"App.view.custom.TestPanel\", { extend: \"Ext.panel.Panel\", alias: \"widget.testpanel\", initComponent: function() { if(window.console && console.log) console.log(\"TestPanel.initComponent(%o)\", arguments); Ext.apply(this, { items: [{ xtype: \"label\", text: \"label\" }] }); this.callParent(arguments); } })",
formDef = eval(formDefStr),
form;

form = Ext.create(formDef, {
renderTo: Ext.getBody()
});
});

But component isn't defined when component's items haven't been defined:


Ext.onReady(function() {
var
formDefStr = "Ext.define(\"App.view.custom.TestPanel\", { extend: \"Ext.panel.Panel\", alias: \"widget.testpanel\", requires: [\"CLabel\"], initComponent: function() { if(window.console && console.log) console.log(\"TestPanel.initComponent(%o)\", arguments); Ext.apply(this, { items: [{ xtype: \"clabel\", text: \"label\" }] }); this.callParent(arguments); } })",
formDef = eval(formDefStr),
form;

form = Ext.create(formDef, {
renderTo: Ext.getBody()
});
});



Ext.define("CLabel", {
extend: "Ext.form.Label",
alias: "widget.clabel",

initComponent: function() {
if(window.console && console.log)
console.log("CLabel.initComponent(%o)", arguments);

this.callParent(arguments);
}
});

How to dynamically define a component?

redraid
11 May 2012, 4:29 AM
You can use http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Loader and generate requested js files by server backend.

Ex_Soft
11 May 2012, 4:44 AM
Definitions of components are stored in database. I can get definitions as character string only. So, I don't think that Ext.Loader is useful for me.

Ex_Soft
11 May 2012, 4:50 AM
BTW, RangeError: Maximum call stack size exeeded is occured at


Ext.Class = Class = function(newClass, classData, onClassCreated) {
if (typeof newClass != 'function') {
onClassCreated = classData;
classData = newClass;
newClass = function() {
return this.constructor.apply(this, arguments);
};
}

redraid
11 May 2012, 4:50 AM
>>> Ext.require('MyApp.view.TestView');
"NetworkError: 404 Not Found - http://*/MyApp/view/TestView.js?_dc=1336740626057"

you can setup server rewrite for requests like this and generate js file by script

Ex_Soft
11 May 2012, 4:56 AM
I can't do anything with server.