PDA

View Full Version : Ext column layout plugin.



caizhikun
31 Mar 2010, 12:41 AM
Poor in English. So speak in program language.

Config column layout in Ext.FormPanel -> really boring. see ↓


{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
}

2rows x 2cols


Instead . Use a plugin , the code became easy understood. see ↓



var top = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
title: 'Multi Column, Nested Layouts and Anchoring',
bodyStyle:'padding:5px 5px 0',
width: 600,
clayouts : [ [.5 , .5] , [.5 , .5] ] , // config column layout 2 rows with 2 cols
plugins : [ Ext.ux.SimpleColumn ] ,
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});


clayouts : [ [.5 , .5] , [.5 , .5] ] , // config column layout 2 rows with 2 cols
clayouts : [ [ .25 , .25 ] , [ .33 , .33 , .33 ] ] // 2 rows: row1-> 2cols row2-> 3cols


plugin source code :



/**
*
* @Singleton
* @version 1.0
* @author A3
*
*
* @cfg fieldset optional true -> wrap a fieldset。
*
*
* Email: ffczk86@gmail.com
*
*/
Ext.ux.SimpleColumn = function(){

function reconfigItems(items,clayouts,fieldset){

var result = [] , index = 0;

for(var i=0 ; i < clayouts.length ; i++){
var crow = clayouts[i],
columnCnt = {
layout : 'column',
border : false
},
rowItems = [];
for(var j=0 , l = crow.length; j < l ; j++){

rowItems.push({
columnWidth : crow[j],
layout : 'form',
border : false,
items : items[ index++ ]
});

}
result.push(Ext.apply(columnCnt,{ items : rowItems }));
}
if(fieldset){
result = [{
xtype : 'fieldset',
title : '查询区',
autoHeight : true,
items : result
}]
}
return result;

}


return {

init : function(cmp){

var clayouts = cmp.clayouts ,
items = cmp.initialConfig.items ,
fieldset = cmp.fieldset ;

if(!clayouts){
return ;
}
items = Ext.isArray(items) ? items : [items];
cmp.items.clear();
cmp.add.apply(cmp,reconfigItems(items,clayouts,fieldset));
}

}
}();

anjelika
9 May 2010, 6:42 AM
Hi,
This is exactly what I was looking for.
Can you please give me an example on how to do this using the column layout only and no plugin?
I will use this plugin for now but I've been searching for 3 days on how to do it using the column layout (I am talking about the clayouts : [ [ .25 , .25 ] , [ .33 , .33 , .33 ] ] // 2 rows: row1-> 2cols row2-> 3cols option).
Thanks