PDA

View Full Version : Need help figuring out ExtJs abstract classes, example inside



lexusgs430
27 Jan 2011, 2:25 PM
Hi all,

So I am following along a tutorial from Saki about abstract classes in extjs, I understand most everything except what is likely the most basic and important part, actually getting the damn thing to display in my application.

This is the tutorial I am working with.

http://blog.extjs.eu/know-how/factory-functions-in-ext-extensions/

-- Trouble Im having is this. Ive copied the source code for the AbstractFormPanel.js, and have successfully implemented a form using the following javascript.



Ext.onReady(function(){

var nameForm = new MyApp.AbstractFormPanel({
title:'Name Form Panel configured inline',
width:600,
height:200,
renderTo:'extjswrap',
buildItems:function(config) {
config.items = [{
name:'firstName',
fieldLabel:'First Name'
},{
name:'lastName',
fieldLabel:'Last Name'
},{
name:'middleName',
fieldLabel:'Middle Name'
},{
xtype:'datefield',
name:'dob',
fieldLabel:'DOB'
}];
}
});

});


Great, that works. What confuses me though, is below that script on his post he says
"Note: Although the above works, it violates the rule of not instantiating an abstract class directly. Itís up to you if you will do it or not." --

So, I go back up and look for an example of a way to do the same thing without violating the rule of instantiating the abstract class directly. So I find this code and try using this instead of the code I posted above.



Ext.ns('MyApp');

MyApp.AddressFormPanel = Ext.extend(MyApp.AbstractFormPanel, {
title:'Edit address data'
,submitUrl:'addressAction.asp'
,buildItems:function(config) {
config.items = [{
name:'address1'
,fieldLabel:'Address 1'
},{
name:'address2'
,fieldLabel:'Address 2'
},{
name:'city'
,fieldLabel:'city'
},{
xtype:'combo'
,name:'state'
,fieldLabel:'State'
,store:['MD', 'VA', 'DC']
},{
xtype:'numberfield'
,name:'zip'
,fieldLabel:'Zip Code'
}];
} // eo function buildItems

});

// eof


So, that doesen't work. I see it's not being rendered. So I try adding renderTo:'extjswrap' (the default div im rendering to) -- no go. So I try wrapping it inside an Ext.onReady function, doesen't work. So I try creating a new MyApp.AddressFormPanel({, and setting the renderTo there, still not working.

So my problem is, I dont understand exactly how I am supposed to use the abstract method, without instansiating the
abstract class in the way I did for the first code example I posted. --

Also, side question. I just noticed I am storing the object in a variable in the first example... I shouldn't be doing that if I am doing renderTo within the object, because there is no reason to store that in a variable, correct?? (or maybe there is for callbacks or if I want to load form data into the form panel object???) :-?

Anyways, any help clarifying what I am not wrapping my head around would be immensely appreciated! :)

lexusgs430
28 Jan 2011, 9:20 AM
bump

Tim Toady
28 Jan 2011, 9:36 AM
The Abstract class


Ext.ns('MyApp');

MyApp.AbstractFormPanel = Ext.extend(Ext.form.FormPanel, {
defaultType:'textfield'
,frame:true
,width:300
,height:200
,labelWidth:75
,submitUrl:null
,submitT:'Submit'
,cancelT:'Cancel'
,initComponent:function() {

// create config object
var config = {
defaults:{anchor:'-10'}
};

// build config
this.buildConfig(config);

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

// call parent
MyApp.AbstractFormPanel.superclass.initComponent.call(this);

} // eo function initComponent

,buildConfig:function(config) {
this.buildItems(config);
this.buildButtons(config);
this.buildTbar(config);
this.buildBbar(config);
} // eo function buildConfig

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

,buildButtons:function(config) {
config.buttons = [{
text:this.submitT
,scope:this
,handler:this.onSubmit
,iconCls:'icon-disk'
},{
text:this.cancelT
,scope:this
,handler:this.onCancel
,iconCls:'icon-undo'
}];
} // eo function buildButtons

,buildTbar:function(config) {
config.tbar = undefined;
} // eo function buildTbar

,buildBbar:function(config) {
config.bbar = undefined;
} // eo function buildBbar

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

,onCancel:function() {
this.el.mask('This form is canceled');
} // eo function onCancel

}); // eo extend
The new class that extends the abstract class


Ext.ns('MyApp');

MyApp.AddressFormPanel = Ext.extend(MyApp.AbstractFormPanel, {
title:'Edit address data'
,submitUrl:'addressAction.asp'
,buildItems:function(config) {
config.items = [{
name:'address1'
,fieldLabel:'Address 1'
},{
name:'address2'
,fieldLabel:'Address 2'
},{
name:'city'
,fieldLabel:'city'
},{
xtype:'combo'
,name:'state'
,fieldLabel:'State'
,store:['MD', 'VA', 'DC']
},{
xtype:'numberfield'
,name:'zip'
,fieldLabel:'Zip Code'
}];
} // eo function buildItems

});

Here I instantiate it


new MyApp.AddressFormPanel({
renderTo:Ext.getBody()
});

lexusgs430
28 Jan 2011, 11:27 AM
thought i tried that already :-? but ok sweet makes sense thanks!