Results 1 to 3 of 3

Thread: Where to put variables for extended class?

  1. #1

    Default Where to put variables for extended class?

    I can't quite figure out where to instantiate other objects within an extended class. here is my code:

    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?

  2. #2
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Thumbs up

    Quote Originally Posted by dbassett74 View Post
    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:

    Code:
    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.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  3. #3

    Default

    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?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •