Resize

[phamtranquocviet]

Hi,
I have a tab panel (Ext.panel.Panel), which has a table layout. Each row has three cells. Each cell takes 1/3 of the tab's width. When the browser resizes, I resize the width of each cell like below but firebug shows that the cells always keep the initial width. Am I missing something? And is this the right way control sizes in a table layout?



....
resizeGrids: function(aclTab, width, height, opts) {
var grids;
aclTab.getLayout().tdAttrs = {width: width/3};
},
.....

[phamtranquocviet]

After so much pain and suffering, I found the following answer. You do not have to worry about the width of the td of the table layout. You only need resize the content of the td to your desired width, and td's width will automatically expand/shrink to fit newly-resized content.



resizeGrids: function(aclTab, width, height, opts) {
var items;

items = aclTab.getLayout().getLayoutItems();
Ext.each(items, function(item, index, items) {
item.setHeight(Math.round(height / 3));
item.setWidth(Math.round(width / 3));
});
},
....
init: function() {
this.control({
"window[id=admin-console-window] panel[region=center] #acl-tab": {
resize: this.resizeGrids
},
.....
})
}