View Full Version : Dynamically remove and display columns in column layout.

25 May 2013, 12:38 PM

First of all I would like to thank all the forum members for their immedeate and effective reply to my previous post.I am now in learning stage of extjs.I liked it because of the object oriented approach and MVC like design pattern and many more.I found this more interesting and challenging than any other javascript framework.While learning ExtJs I am facing this issue.

I have a three column layout and each coulmn having fixed columnWidth.
All the columns in the layout contains Gridpanel,Tab panel etc.Now I have a button or a link.My objective is to give user a option to load the column as per their need.This means If I have 3 columns layout and I want to display only one column and dont want other two columns to be displayed then i should be able to hide other two columns including their child elements on click of a link or button.So it means user will only see the one column but that column should take the entire viewport area.If user wants to restore any of the columns later they should be able to do that and also the browser area should be resize accordingly.

Is it possible to do that?Can I have a sample code for it?

Sorry for my poor English.

28 May 2013, 11:19 AM
You can set the columnWidth for all items to 1 and then do updateLayout() on the container with the column layout to reconfigure the column widths - in this case with all of them set to 1 (meaning 100%).

// All columns are percentages -- they must add up to 1
var col1 = Ext.create('Ext.panel.Panel', {
title: 'Column Layout - Percentage Only',
width: 350,
height: 250,
items: [{
title: 'Column 1',
columnWidth: 0.25
title: 'Column 2',
columnWidth: 0.55
title: 'Column 3',
columnWidth: 0.20
renderTo: Ext.getBody(),
tbar: [{
text: 'Reconfigure cols',
handler: function () {
col1.items.each(function (col) {
col.columnWidth = 1;

4 Jul 2013, 4:05 AM
Thanks...Its working