1. #1
    Sencha Premium Member
    Join Date
    Jan 2012
    Location
    Lahore
    Posts
    53
    Vote Rating
    -1
    waqar is an unknown quantity at this point

      0  

    Post Unanswered: [Ext JS 4.x] Adding more then one Toolbar to Grid/ panel

    Unanswered: [Ext JS 4.x] Adding more then one Toolbar to Grid/ panel


    These days we are shifting our software from 3 to 4 in 3.1 we had :

    Code:
    /*
    Ext.define('Application.ClientGrid', {   // for 4.x
        extend: 'Ext.grid.Panel',
    */
    Application.ClientGrid= Ext.extend(Ext.grid.GridPanel, {  // for 3.x
    mainInfoBar : '',
    otherInfoBar : '',
    ..
    ..
    initComponent: function() { this.mainInfoBar = this.buildMainInfoBar(); this.bbar = this.otherInfoBar; // initialized bar }
    listeners: { render:function(thisObject,eOpts ) { this.mainInfoBar.render(this.bbar);
    }
    }
    }
    But this donot work any more in 4.x
    Error:

    Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null

    My guess is that I dont see "render" function in toolbar ExtJs4 API is that the problem if yes then which new function is going to be used instead of this ? can some body please guide !!

    any help will be appreciated!

    Thanx
    Wacky

  2. #2
    Sencha Premium Member
    Join Date
    Jan 2012
    Location
    Lahore
    Posts
    53
    Vote Rating
    -1
    waqar is an unknown quantity at this point

      0  

    Default


    any help guys ?

    BUMP!!!

  3. #3
    Ext JS Premium Member burnnat's Avatar
    Join Date
    Jun 2011
    Posts
    416
    Answers
    42
    Vote Rating
    61
    burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough

      0  

    Default


    Panels in 4.x use a "dockedItems" config property to specify the docked toolbars/components. This is, I believe, different from 3.x. I'd recommend reading the documentation for the dockedItems config, and perhaps also the addDocked and removeDocked methods.

  4. #4
    Sencha Premium Member
    Join Date
    Jan 2012
    Location
    Lahore
    Posts
    53
    Vote Rating
    -1
    waqar is an unknown quantity at this point

      0  

    Default


    @ burnnat: I tried the adddocked in my init function of grid panel, before that I tried adding toolbars like this:

    This works super good:
    Code:
        dockedItems: [
            Ext.create( 'Application.MainInfoBar',{dock: 'bottom'}),
            Ext.create( 'Application.MainOtherInfoBar',{dock: 'bottom'}),
        ],
    but I wanted to use the addDocked function but it wont
    work I call it this way :
    Code:
    Ext.define('Application.ClientGrid', {
        extend: 'Ext.grid.Panel',
        mode:'SINGLE',
        autoScroll : true,
      initComponent: function() {
    this.store = this.buildClientGridStore(); this.columns = this.buildClientGridColumns(); this.addDocked( Ext.create( 'Application.MainInfoBar',{dock: 'bottom'}),0); this.addDocked( Ext.create( 'Application.MainInfoBar',{dock: 'bottom'}),1); }
    . .. }
    Error in chrome:
    Cannot call method 'insert' of undefined
    Cannot read property 'xtype' of undefined


    this.bbar works
    this.addDocked gives error.

  5. #5
    Ext JS Premium Member burnnat's Avatar
    Join Date
    Jun 2011
    Posts
    416
    Answers
    42
    Vote Rating
    61
    burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough

      0  

    Default


    You're overriding the initComponent() method of the grid panel, but you don't ever call the parent. I'm guessing that will cause problems for you with some members of the class not being initialized. Try doing something like this:

    Code:
    initComponent: function() {
        // initialize the variables first
        this.store = this.buildClientGridStore();
        this.columns = this.buildClientGridColumns();
    
        // make sure the parent class gets a chance to do *its* processing
        this.callParent();
    
        // now do your custom processing
        this.addDocked(/* ... */);
    }

  6. #6
    Sencha Premium Member
    Join Date
    Jan 2012
    Location
    Lahore
    Posts
    53
    Vote Rating
    -1
    waqar is an unknown quantity at this point

      0  

    Thumbs up The Solution.

    The Solution.


    @Burnnat :
    the Issue is solved , you are correct!

    Code:
    initComponent: function() {
        this.store = this.buildClientGridStore();
        this.columns = this.buildClientGridColumns();
    //     Other button handles
        this.addBtn = this.buildAddButton();
    //     Toolbars
        this.tbar = this.buildToolbar();
    //     Init Parents
          this.callParent();
    // add toobars
          this.addDocked( Ext.create( 'Application.StreamInfoBar',{dock: 'bottom'}),1);
          this.addDocked( Ext.create( 'Application.MainInfoBar',{dock: 'bottom'}),0);
      }

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Posts
    1
    Vote Rating
    0
    johnshelly12 is on a distinguished road

      0  

    Default


    You're overriding the initComponent() method of the grid panel, but you don't ever call the parent. I'm guessing that will cause problems for you with some members of the class not being initialized. Try doing something like this:

Thread Participants: 2

Tags for this Thread