1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    20
    Vote Rating
    0
    Vishvesh is on a distinguished road

      0  

    Default Answered: Calculating portal columns to add portlets dynamically per Tab

    Answered: Calculating portal columns to add portlets dynamically per Tab


    Hello guys,
    Is there a way I can get rid of the 'id:col-0', 'id:col-1', and so on, so that I can add a panel dynamically inside the tab, which is essentially a portalpanel?


    Code:
    items: [{
                title: 'Tab 1',
                items: [{
                    id: 'app-portal-1',
                    xtype: 'portalpanel',
                    region: 'center',
                    flex: 1,
                    columnWidth: 0.2,
                    items: [{
                        id: 'col-0',
                        //items: [getSavedUserPortlets() ? getSavedUserPortlets() : []]
                        items: []
                    },{
                    id: 'col-1',
                    items: []                
                 },
                 {
                     id: 'col-2',
                     items: []                
                  }
                    ]
                }
                ]
            },
            {
                title: 'Tab 2',
                items: [{
                    id: 'app-portal-2',
                    xtype: 'portalpanel',
                    region: 'center',
                    flex: 1,
                    columnWidth: 0.5,
                    items: [{
                        id: 'col-3',
                        items: []
                    },{
                    id: 'col-4',
                    items: [{
                        id: 'stock-portlet-'+count,
                        title: 'Stock Portlet',
                        width: 20,
                        tools: getTools(),
                        items: Ext.create('Ext.app.ChartPortlet'),
                        closable: true
                    }]                
                 },
                 {
                     id: 'col-5',
                     items: []                
                  }
                    ]
                }
                ]
            }]
    I am actually adding new portlet panels by using this :
    Code:
    Ext.getCmp(this.defaultPortalColumn).add(portlet);
    My defaultPortalColumn is col-0 in this case.

    For 1 tab, everything works perfect. But I have several tabs.

    But say I want to add the same portletPanel in Tab 2's 1st column.
    Now, I am setting the id of the portalPanel everytime(So a Div with that id is created in the DOM). What is the best / efficient way to avoid duplicate id's in the DOM or how should I go by adding the portletPanels in other tabs, without any error / duplications?

  2. Code:
    Ext.ComponentQuery.query('#app-portal-1 panel')
    will return an array with three panel in it

    so try

    Code:
    Ext.ComponentQuery.query('#app-portal-1')[0].add();

  3. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      1  

    Default


    use the property itemId

    better not use the id property in your code. itemId you can query as well

  4. #3
    Sencha User
    Join Date
    Mar 2013
    Posts
    20
    Vote Rating
    0
    Vishvesh is on a distinguished road

      0  

    Default


    So will it be something like:
    Code:
    {
                title: 'Tab 1',
                items: [{
                    id: 'app-portal-1',
                    xtype: 'portalpanel',
                    region: 'center',
                    flex: 1,
                    columnWidth: 0.2,
                    items: [{
                        itemid: 'col-0',
                        //items: [getSavedUserPortlets() ? getSavedUserPortlets() : []]
                        items: []
                    },{
                    itemid: 'col-1',
                    items: []                
                 },
                 {
                     itemid: 'col-2',
                     items: []                
                  }
                    ]
                }
                ]
            },
    And while querying I can do the same as
    Code:
    Ext.getCmp(itemid)
    ? instead of
    Code:
    Ext.getCmp('col-1').add(portlet);
    ?

    Thanks again!

  5. #4
    Sencha User
    Join Date
    Mar 2013
    Posts
    20
    Vote Rating
    0
    Vishvesh is on a distinguished road

      0  

    Default Tried with itemId.. But not working either.

    Tried with itemId.. But not working either.


    Hi tvanzoelen,
    I tried with this too
    Code:
    Ext.ComponentQuery.query('app-portal-1 #'+this.defaultPortalColumn);
    , but it doesn't work either.. I read the docs.. but it's kinda confusing Also, does it directly replace Exp.getCmp('id')?
    I saw that it requires a panel reference to query, but in my case, I can not reference the parent, as I want to query directly on the 'column' so that I can add more components to the column.

    So when I do
    Code:
    ComponentQuery('panel #child').add()
    it doesn't have a method .add() which Ext.getCmp() has to add items

  6. #5
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      1  

    Default


    to query is fine with query('#itemid'), you can use a top level component or Ext.ComponentQuery.query('#itemid');

    It returns an array [] so the result will be in result[0]

    or use down() or up() which will return the first object found.

  7. #6
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      1  

    Default


    Code:
    Ext.ComponentQuery.query('#app-portal-1 panel')
    will return an array with three panel in it

    so try

    Code:
    Ext.ComponentQuery.query('#app-portal-1')[0].add();
    Last edited by tvanzoelen; 9 Apr 2013 at 10:14 AM. Reason: little modification, just query the itemId and take the first result

Thread Participants: 1

Tags for this Thread