PDA

View Full Version : ExtJS Factory Pattern implementation



navin.kare
16 Oct 2013, 6:00 PM
I am following the blog post and trying to create instances of Extended classes. However, i dont see the extended components being created.
There is one AbstractCondition class which is extended by Condition1 class. Condition1 class overrides the necessary methods. The issue is when I create an instance of Condition1 and render it, i dont see the form panel on the screen :
AbstractCondition :


Ext.define('Dynamic.conditions.AbstractCondition', {
extend : 'Ext.form.Panel',
require : ['Ext.form.Panel'],
initComponent: function(){
var config = {};
this.buildConfig(config);
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.callParent(arguments);
},


buildConfig : function(config){
this.buildItems(config);
this.buildButtons(config);
},


buildItems : function(config){
config.items = undefined;
},


buildButtons : function(config){
config.buttons = undefined;
},


onSubmit : function(){
Ext.MessageBox.alert('Submit', this.submitUrl);
},


onCancel : function(){
this.el.mask('This form is cancelled');
}


});



Condition1 extending AbstractCondition:



Ext.define('Dynamic.conditions.Condition1', {
extend : 'Dynamic.conditions.AbstractCondition',
require : ['Dynamic.conditions.AbstractCondition'],
submitUrl : 'XXXX',
title:'Name Form Panel configured inline',
width:300,
height:200,
buildItems : function(config){
config.items = [{
name:'firstName'
,fieldLabel:'First Name'
},{
name:'lastName'
,fieldLabel:'Last Name'
},{
name:'middleName'
,fieldLabel:'Middle Name'
}];
},


buildButtons : function(){
config.buttons[0].text = 'Hello';
config.buttons[0].handler = this.onOkBtn;
},


onOkBtn:function() {
console.info('OK btn pressed');
}
});




Creation of instances (Not working)




Ext.Loader.setConfig({
enabled: true
});


Ext.require([
'Dynamic.conditions.Condition1',
'Dynamic.conditions.AbstractCondition'
]);


Ext.onReady(function() {
console.log('on ready');
var condition1 = Ext.create('Dynamic.conditions.Condition1', {});
condition1.render('sampleDiv');
});



Appreciate your response.

ettavolt
17 Oct 2013, 9:34 PM
Is there any errors in the console?

buildButtons : function(){
config.buttons[0].text = 'Hello';
config.buttons[0].handler = this.onOkBtn;
}
certainly will throw an error, unless you somewhy have 'config' object in global scope.