PDA

View Full Version : Where to put variables for extended class?



dbassett74
19 Jul 2009, 8:59 AM
I can't quite figure out where to instantiate other objects within an extended class. here is my code:



FileSelector = Ext.extend(Ext.Panel, {
initComponent: function(config) {
Ext.apply(this, {
border: false,
layout: 'border',
items: [
{ region: 'west', layout: 'fit', width: 200, split: true, items: folderView},
{ region: 'center', layout: 'fit', items: fileView }
]
}); //eo Ext.apply
FileSelector.superclass.initComponent.apply(this, arguments);
//Public Events
this.addEvents('selected');
//listen for events from panel
fileView.on('loadDataStarted', function() {
msk = new Ext.LoadMask(fileView.getEl(), { msg: 'Retrieving files...' });
msk.show();
}, this);
fileView.on('loadDataCompleted', function() {
msk.hide();
}, this);
fileView.on('selected', function() {
this.fireEvent('selected');
}, this);
//Listen for events from folderView
folderView.on('selected', function(fullPath) {
this.fileView.loadData(fullPath, true);
}, this);
}, //eo initComponent
getSelectedRecords: function() {
return fileView.getSelectedRecords()
},
});

//Register xtype
Ext.reg('FileSelector', FileSelector);


I need to instantiate folderView and fileView as:

var fileView = new CustomControls.FileView;
var folderView = new CustomControls.FolderView;

Where do I put these?

hendricd
19 Jul 2009, 9:19 AM
I can't quite figure out where to instantiate other objects within an extended class.

@dbassett74 -- You may be making a risky assumption that folderView and fileView are always defined. For your case, good class construction should assert their presence in the config (shown here) or, instantiate them within the class (but you may have complex setup for them). Consider something like:



FileSelector = Ext.extend(Ext.Panel, {
initComponent: function() {

if(!this.folderView || !this.fileView) throw 'Invalid Setup dude!';

Ext.apply(this,
Ext.apply(this.initialConfig,
{
border: false,
layout: 'border',
items: [
Ext.apply(this.folderView, { region: 'west', width: 200, split: true}),
Ext.apply(this.fileView, {region : 'center' })
{ region: 'center', layout: 'fit', items: this.fileView } //overnesting!

]
})
); //eo Ext.apply
FileSelector.superclass.initComponent.call(this);
//Public Events
this.addEvents('selected');
//listen for events from panel
this.fileView.on('loadDataStarted', function() {
this.fileView.getEl().mask( 'Retrieving files...' );
}, this);
this.fileView.on('loadDataCompleted', function() {
this.fileView.getEl().unmask();
}, this);
this.fileView.on('selected', function() {
this.fireEvent('selected');
}, this);
//Listen for events from folderView
this.folderView.on('selected', function(fullPath) {
this.fileView.loadData(fullPath, true);
}, this);
}, //eo initComponent
getSelectedRecords: function() {
return this.fileView.getSelectedRecords()
},
});

//Register xtype
Ext.reg('FileSelector', FileSelector);

new FileSelector ({
fileView: new CustomControls.FileView,
folderView : new CustomControls.FolderView,
....
});
Edit: It's also good practice to keep your event names all lowerCase. ;)

dbassett74
19 Jul 2009, 6:34 PM
In this particular case, fileView and folderView will always be there. I wanted them defined within fileSelector. So instead of passing them in through config, how would I statically declare them within fileSelector?