1. #1
    Ext User
    Join Date
    Sep 2009
    Posts
    21
    Vote Rating
    0
    ipreti is on a distinguished road

      0  

    Default Add/Remove dynamically an Item to a ViewPort

    Add/Remove dynamically an Item to a ViewPort


    Hi Guys,
    Im currently using in my website a template released in extjs samples where it is defined a viewport and several items and subitems to it.
    The code is as below:

    Code:
    var viewport = new Ext.Viewport({
                        layout:'fit',
                        items:[{
                                style:'padding:65px 0 0px 0px',
                                xtype: 'grouptabpanel',
                                tabWidth: 130,
                                activeGroup: 0,
                                items: [{
                                        mainItem: 1,
                                        items: [{
                                                title: 'Tickets',
                                                layout: 'fit',
                                                iconCls: 'x-icon-tickets',
                                                tabTip: 'Tickets tabtip',
                                                style: 'padding: 50px;',
                                                items: [ITEM_TO_BE_ADDED]
                                            },
                                            {
    
                                                xtype: 'portal',
                                                title: 'Dashboard',
                                                tabTip: 'Dashboard tabtip',
                                                items:[{
                                                        columnWidth:.33,
                                                        style:'padding:10px 0 50px 30px',
                                                        items:[{
                                                                title: 'Grid in a Portlet',
                                                                layout:'fit',
                                                                /*   tools: tools, */
                                                                items: [ITEM_TO_BE_ADDED]
                                                            },{
                                                                title: 'Another Panel 1',
                                                                /*   tools: tools, */
                                                                html: Ext.example.shortBogusMarkup
                                                            }]
                                                    },{
                                                        columnWidth:.33,
                                                        style:'padding:10px 0 50px 30px',
                                                        items:[{
                                                                title: 'Panel 2',
                                                                /*   tools: tools, */
                                                                html: Ext.example.shortBogusMarkup
                                                            },{
                                                                title: 'Another Panel 2',
                                                                /*   tools: tools, */
                                                                html: Ext.example.shortBogusMarkup
                                                            }]
                                                    },{
                                                        columnWidth:.33,
                                                        style:'padding:10px',
                                                        items:[{
                                                                title: 'Panel 3',
                                                                /*   tools: tools, */
                                                                html: Ext.example.shortBogusMarkup
                                                            },{
                                                                title: 'Another Panel 3',
                                                                /*   tools: tools, */
                                                                html: Ext.example.shortBogusMarkup
                                                            }]
                                                    }]
                                            }, {
                                                title: 'Subscriptions',
                                                iconCls: 'x-icon-subscriptions',
                                                tabTip: 'Subscriptions tabtip',
                                                style: 'padding: 10px;',
                                                layout: 'fit',
                                                items: [{
                                                        xtype: 'tabpanel',
                                                        activeTab: 1,
                                                        items: [{
                                                                title: 'Nested Tabs',
                                                                html: Ext.example.shortBogusMarkup
                                                            }]
                                                    }]
                                            }, {
                                                title: 'Users',
                                                iconCls: 'x-icon-users',
                                                tabTip: 'Users tabtip',
                                                style: 'padding: 10px;',
                                                html: Ext.example.shortBogusMarkup
                                            }]
                                    }, {
                                        expanded: true,
                                        items: [{
                                                title: 'Configuration',
                                                iconCls: 'x-icon-configuration',
                                                tabTip: 'Configuration tabtip',
                                                style: 'padding: 10px;',
                                                html: Ext.example.shortBogusMarkup
                                            }, {
                                                title: 'Email Templates',
                                                iconCls: 'x-icon-templates',
                                                tabTip: 'Templates tabtip',
                                                style: 'padding: 10px;',
                                                html: Ext.example.shortBogusMarkup
                                            }]
                                    }]
                            }]
                    });
                    
    
                });
    The point is:
    I've got a menu that i'd like to use to add or remove items to this viewport to give the user an impression that a new page has been loaded.
    My problem is how to find the right place (marked with ITEM_TO_BE_ADD in the code above) to add or remove the selected new item.
    Is that possible? Anyone ?
    If not, how can i re-design it to achive it.
    Thanks in advance.
    Ivan

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    79
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    look at the containter's add/remove and doLayout methods in the API. if you need a visual helper, i have screencasts (see my signature) on how to do it. Also, I cover this type of stuff in my book http://manning.com/garcia

  3. #3
    Ext User
    Join Date
    Sep 2009
    Posts
    21
    Vote Rating
    0
    ipreti is on a distinguished road

      0  

    Default


    thanks for ur prompt reply jgarcia.
    i've checked out yours screencasts by i havent been able to find exactly what i'm looking for.
    My main problem is how to use add/remove functions because i don't know how to find inside the viewport layout the correct places where i'd like to add or remove items.
    Could you give me further informations how to do that?
    Thanks again.

  4. #4
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    79
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Here is what i was talking about:

    http://tdg-i.com/58/ext-js-screencas...add-and-remove

  5. #5
    Ext User
    Join Date
    Sep 2009
    Posts
    21
    Vote Rating
    0
    ipreti is on a distinguished road

      0  

    Default


    Thank you again jgarcia.
    I dont know if u noticed but the link u gave me is broken, at least for me here in brazil.
    I've just tried to open the address

    http://tdg-i.com/media/screencasts/SC005.mov

    and i got an 404 not found error.
    Have u got another option?
    Thanks in advance.

  6. #6

  7. #7
    Ext User
    Join Date
    Sep 2009
    Posts
    21
    Vote Rating
    0
    ipreti is on a distinguished road

      0  

    Default


    Hi jgarcia..
    sorry for bother you again..
    i've tried several times with diferents media players but i couldnt get this file opened.
    Is there another way you can help me figure out how to add/remove items dynamically to a viewport?
    If anyone else get the answer for that please it would be fantastic listen to you.
    Thanks in advance.
    Ivan P.

  8. #8
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    79
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Dude, it works in the latest quicktime, which is free.

    Are you using Linux?

  9. #9
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    79
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    try this example code:

    Code:
    var panel =  new Ext.Panel({
        title : 'some child panel',
        frame : true
    });
    
    new Ext.Window({
        id     : 'sourceWindow',
        x      : 0,
        y      : 0,
        width  : 200,
        height : 200,
        layout : 'fit',
        items  : panel,
        buttons : [
            {
                text : 'Press to move panel here',
                handler : function() {
                    Ext.getCmp('destinationWindow').remove(panel);
                    Ext.getCmp('sourceWindow').add(panel);
                    Ext.getCmp('sourceWindow').doLayout()
    
                }
    
            }
        ]
    }).show();
    
    new Ext.Window({
        width   : 200,
        height  : 200,
        layout  : 'fit',
        id      : 'destinationWindow',
        buttons : [
            {
                text : 'Press to move panel here',
                handler : function() {
                    Ext.getCmp('sourceWindow').remove(panel);
                    Ext.getCmp('destinationWindow').add(panel);
                    Ext.getCmp('destinationWindow').doLayout()
    
                }
    
            }
        ]
    
    }).show();

  10. #10
    Ext User
    Join Date
    Sep 2009
    Posts
    21
    Vote Rating
    0
    ipreti is on a distinguished road

      0  

    Default


    jgarcia,
    thank you for ur commitment, your post have already help me a lot.
    Now I'm facing another problem related to viewport.
    Im trying to change the activeGroup from a function to give the user the impression that the page has changed.
    I've already got the items added and removed properly, but if you consider that im adding this item to the second group (activeGroup=1, not 0).. when i click the menu buttom it changes the item but don't change the active group, so the user have to change it by itself (it's not what i want).
    I've tried the following code:

    Code:
    
      function loadWindowList(winObj)
                {
                    hideUpMenu();
                    displayable = winObj.createList();
                    
                    Ext.getCmp('mainView').findById('operationItems').removeAll();
                    
                    viewport.findById('mainViewTabs').setActiveGroup(1);
    
                    Ext.getCmp('mainView').doLayout();
    
                    Ext.getCmp('mainView').findById('operationItems').add({
                                                        layout:'fit',
                                                        style:'padding:10px 10px 50px 10px',
                                                        id : 'operationComp',
                                                        items: [displayable]
                                                    }
                    );
    
                 
    
                    Ext.getCmp('mainView').doLayout();
                }

    and the viewport code is now


    Code:
    viewport = new Ext.Viewport({
                        layout:'fit',
                        id : 'mainView',
                        items:[{
                                style:'padding:65px 0 0px 0px',
                                xtype: 'grouptabpanel',
                                tabWidth: 130,
                                activeGroup: 0,
                                id: 'mainViewTabs',
                                items: [{
                                        mainItem: 0,
                                        items: [
                                            {
    
                                                xtype: 'portal',
                                                title:  GENERIC.dashboard,
                                                tabTip: 'Dashboard',
                                                items:[{
                                                        columnWidth:.33,
                                                        style:'padding:10px 0 50px 30px',
                                                        items:[{
                                                                title: 'Grid in a Portlet',
                                                                layout:'fit',
                                                                /*   tools: tools, */
                                                                items: []
                                                            },{
                                                                title: 'Another Panel 1',
                                                                /*   tools: tools, */
                                                                html: Ext.example.shortBogusMarkup
                                                            }]
                                                    },{
                                                        columnWidth:.33,
                                                        style:'padding:10px 0 50px 30px',
                                                        items:[{
                                                                title: 'Panel 2',
                                                                /*   tools: tools, */
                                                                html: Ext.example.shortBogusMarkup
                                                            },{
                                                                title: 'Another Panel 2',
                                                                /*   tools: tools, */
                                                                html: Ext.example.shortBogusMarkup
                                                            }]
                                                    },{
                                                        columnWidth:.33,
                                                        style:'padding:10px',
                                                        items:[{
                                                                title: 'Panel 3',
                                                                /*   tools: tools, */
                                                                html: Ext.example.shortBogusMarkup
                                                            },{
                                                                title: 'Another Panel 3',
                                                                /*   tools: tools, */
                                                                html: Ext.example.shortBogusMarkup
                                                            }]
                                                    }]
                                            }]
                                    }, {
                                        expanded: false,
                                        items: [{
                                                title: GENERIC.operation,
                                                iconCls: 'x-icon-tickets',
                                                tabTip: 'Operation',
                                                id: 'operationItems',
                                                layout:'fit',
                                                items:[{
                                                        
                                                        layout:'fit',
                                                        style:'padding:10px 10px 50px 10px',
                                                        id : 'operationComp',
                                                        items: [displayable]
                                                    }]
                                                
                                                
                                            }]
                                    }]
                            }]
                    });
                    
    
                });
    Thanks in advance !
    Looking forward to some help!
    Ivan.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi