Results 1 to 4 of 4

Thread: Bind store to Tab panel

  1. #1
    Sencha User
    Join Date
    May 2016
    Posts
    11
    Vote Rating
    0
      0  

    Default Bind store to Tab panel

    Do we have any provision to bind the store to tab panel view ?

    Based on each item in store, need to create tabs in tab panel (items collection). Idea behind binding the store to tab panel is when user delete an item or add new item to store, tab panel should be refreshed automatically without manually refreshing the tab panel view.

    Thanks

  2. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,062
    Answers
    3976
    Vote Rating
    1391
      0  

    Default

    An initial tabpanel that will add items based on the store:



    What is not hooked up are other store behaviors such as adding/removing records from the store, sorting, filtering. Gotta leave something for you to do
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    May 2016
    Posts
    11
    Vote Rating
    0
      0  

    Default

    Thanks for your solution,

    When ever item is added/removed, i update the store which fires 'load' event. So I am using 'load' behaviour of store in tab panel. When i remove all the items from store, it fires 'load' event where i am clearing all the existing tabs from items collection of the panel but same is not reflected/updated in UI i.e tabs for which store items were removed are still shown in tabpanel. I tried 'updatelayout() on the tab panel, didn't help.

    getStoreListeners: function () {
    var me = this;


    return {
    load: me.onload,
    dataChanged: me.ondataChanged,
    };
    },


    onload : function(store) {
    var items = store.getItems();
    if (items .length === 0) {
    me.items.clear();
    me.updateLayout();
    return;

    }

    store.each(function(record) {
    var tab = me.getTabByRecord(record);

    if (!tab) {
    me.add({
    title : record.get(titleField)
    });
    }
    });

    if (!me.getActiveTab()) {
    me.setActiveTab(0);
    }
    },


    Any suggestion ?

  4. #4
    Sencha User
    Join Date
    Apr 2016
    Posts
    36
    Answers
    3
    Vote Rating
    0
      0  

    Default

    I'm trying to something very similar - I have data that the customer does not want to have displayed in a grid, but in groups of panels (I think they want it like Facebook panels) but I'm using this sample to load new panels for each record but it's very slow when it loads and updates.

    Is the "record.get('whatver')" the only way to access the store records (and do you think this is slow)? My panels are currently loading about 300 records and each is displaying several items in the record for each panel and I feel like it could be much quicker.

    Code:
    ...
    store.each(function(record) {
        var newObject = Ext.create('Ext.panel.Panel', {
            items: [{
               xtype: 'displayfield',
               value: record.get('value1')
            }, {
                xtype: 'displayfield',
               value: record.get('value2')
            }
            ]
        );
        me.add(newObject);
    
    ...etc
    Any ideas on how to do this? Putting this in a grid is not an option.

Similar Threads

  1. MVVM Bind Ext.form.Panel to Single-record store
    By benoror in forum Ext 5: Q&A
    Replies: 8
    Last Post: 25 Nov 2015, 4:57 AM
  2. Replies: 6
    Last Post: 3 Nov 2012, 3:06 AM
  3. Bind store to the grid panel
    By v221919 in forum Ext: Q&A
    Replies: 2
    Last Post: 12 Apr 2012, 4:41 AM
  4. Unable to bind the store to Ext.List/Panel
    By dilberted in forum Sencha Touch 1.x: Q&A
    Replies: 1
    Last Post: 6 Mar 2012, 6:23 AM

Posting Permissions

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