PDA

View Full Version : Help with Dynamic Panel Change



seanbrown93
11 Sep 2009, 5:59 AM
I am having a problem testing out how to do dynamic panel content changes.
I have a viewport with North, South, East, West and Center defined. When I click a link in West Panel, I have a function that populates a Tab Panel to the East Panel.

That part works, but only once. When I click the link for the second time, nothing happens, and whatever is in the East Panel doesn't change. Can someone please help me out. I am new to ExtJS, but am trying to learn. And since I am new, I may not be doing this the proper way, so any input would be appreciated.

Thanks!

The West side has 3 test links as shown below:

<p><a id="test1" href="#">Test 1 Tabs</a></p>
<p><a id="test2" href="#">Test 2 Tabs</a></p>
<p><a id="test3" href="#">Test 3 Tabs</a></p>
Here is my East Panel:


{
region: 'east',
id: 'east',
title: 'East Side',
collapsible: true,
split: true,
width: 225,
minSize: 175,
maxSize: 400,
margins: '0 5 0 0',
layout: 'fit'
}
I also have 3 test Tab Panels defined as shown below:

var test1 = new Ext.TabPanel({
activeTab: 0,
animScroll: true,
enableTabScroll: true,
height:250,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Test 1',
html: "This is Test 1 Tabs ."
},{
title: 'Test 1 [1]',
autoLoad:'autoload-content.asp'
},{
title: 'Test 1 [2]',
html: "Test 1 [2]"
},{
title: 'Test 1 [3]',
html: "Test 1 [3]"
},{
title: 'Test 1 [4]',
disabled:true,
html: "Disabled Content"
}
]
});
var test2 = new Ext.TabPanel({
activeTab: 1,
animScroll: true,
enableTabScroll: true,
height:250,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Test 2',
html: "This is Test 2 Tabs ."
},{
title: 'Test 2 [1]',
autoLoad:'autoload-content.asp'
},{
title: 'Test 2 [2]',
html: "Test 2 [2]"
},{
title: 'Test 2 [3]',
html: "Test 2 [3]"
},{
title: 'Test 2 [4]',
disabled:true,
html: "Disabled Content"
}
]
});
var test3 = new Ext.TabPanel({
activeTab: 2,
animScroll: true,
enableTabScroll: true,
height:250,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Test 3',
html: "This is Test 3 Tabs ."
},{
title: 'Test 3 [1]',
autoLoad:'autoload-content.asp'
},{
title: 'Test 3 [2]',
html: "Test 3 [2]"
},{
title: 'Test 3 [3]',
html: "Test 3 [3]"
},{
title: 'Test 3 [4]',
disabled:true,
html: "Disabled Content"
}
]
});

My functions that populate the West Panel from the link in the East Panel

Ext.get("test1").on('click', function(){
var e
e = Ext.getCmp('east');
e.removeAll(false);
e.add(test1);
e.doLayout();
Ext.MessageBox.alert('Status', 'Test 1 Tabs Added');
});
Ext.get("test2").on('click', function(){
var e
e = Ext.getCmp('east');
e.removeAll(false);
e.add(test2)
e.doLayout();
Ext.MessageBox.alert('Status', 'Test 2 Tabs Added');
});
Ext.get("test3").on('click', function(){
var e
e = Ext.getCmp('east');
e.removeAll(false);
e.add(test3);
e.doLayout();
Ext.MessageBox.alert('Status', 'Test 3 Tabs Added');
});

Condor
11 Sep 2009, 6:04 AM
removeAll(false) will only remove the items from the container without affecting the DOM, but 'fit' layout can't handle that.

You should use:

{
region: 'east',
id: 'east',
...
layout: 'card',
items: [test1, test2, test3]
}
with

Ext.get('test1').on('click', function(){
var e = Ext.getCmp('east');
e.getLayout().setActiveItem(test1);
Ext.MessageBox.alert('Status', 'Test 1 Tabs Shown');
}, null, {stopEvent: true});

seanbrown93
11 Sep 2009, 8:09 AM
Condor,

Thanks for the reply. If I use Card layout, will it cache the contents during load? I want these panels to be freshly rendered each time I click the link.

Condor
11 Sep 2009, 9:40 AM
card layout does use deferredRender, but that only means it will be rendered the first time it is shown, not the next time.

Can you tell me why you would want this?

seanbrown93
11 Sep 2009, 9:50 AM
Sure, although I'm new to this and have a lot of learning to do, I can see where in an application type scenario, I would want to be able to click a menu item in the navigation panel, and load specific contents in the corresponding panels, all real-time.

I was using the above as an example for me to begin learning. Maybe I'm going down the wrong path?

Pretend the nav panel has Helpdesk, Orders, Invoices, etc. Each time a user clicks the link, I would want the most current data to automatically load into each panel. Some links would load data into several panels, and some would give users options that others don't see based on their authority level.

I just figure if i render it each time they click, then they are always seeing the most up to date data.

Is there a better way?

Thanks!!

Warebear
13 Oct 2009, 4:09 AM
Not sure if you got an answer or figured it out by now, what I would recommend is if you have say a grid of tickets, then on the click function just add the store.load() function or the reload depending on your type of data store. I use it a lot on buttons that "you saved, now on clicking save, reload the grid to show your saved item". This has helped me out in a lot of situations where I wasn't sure on how to handle loading data at the right time and refreshing the data without a huge refresh button everywhere. :D