PDA

View Full Version : Add/Remove dynamically an Item to a ViewPort



ipreti
23 Sep 2009, 1:56 PM
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:




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

27 Sep 2009, 6:20 PM
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

ipreti
28 Sep 2009, 4:16 AM
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.

28 Sep 2009, 4:20 AM
Here is what i was talking about:

http://tdg-i.com/58/ext-js-screencast-005-containers-add-and-remove

ipreti
28 Sep 2009, 4:26 AM
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.

28 Sep 2009, 4:30 AM
Crap: try this:

http://tdgi.s3.amazonaws.com/screencasts/m4v/SC005.m4v

ipreti
30 Sep 2009, 4:09 AM
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.

30 Sep 2009, 4:11 AM
Dude, it works in the latest quicktime, which is free.

Are you using Linux?

30 Sep 2009, 4:15 AM
try this example 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();

ipreti
1 Oct 2009, 4:30 AM
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:





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





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.

fataltes
2 Dec 2009, 12:08 AM
I wrote the same code with just a few changes :

Instead of panel I used one of its subclasses : FormPanel or GridPanel :

var simple = new Ext.form.FormPanel({

frame:true,
title: 'Start Form',
items: [
{
xtype: 'label',
text : 'welcome to our Electronic Banking Site'
}

]
});

and it didn't work!
I tried to find out the reason! I follow it until the time the container's specific "layout" renders its components! But I couldn't understand the problem. So, why doesn't it work?