extjscolumn布局

『壹』 extjs中 如何兩列布局表單 在線等

你這種情況不應該使用column來布局，column是一種自適應的布局，應該使用table或者hbox布局，拿做例子，會更適合你這情況：

varform=Ext.create('Ext.form.Panel',{
layout:{
type:'table',
columns:2,//每行有幾列
//默認樣式
tableAttrs:{
style:"width:100;height:40;"
}
},
initComponent:function(){
varme=this;

Ext.applyIf(me,{
items:[
{
xtype:'numberfield',
name:'1',
colspan:1//表示佔用幾列
}，
{
xtype:'numberfield',
name:'2',
colspan:1
}
//.........
]
});

me.callParent(arguments);
}
})

『貳』 Extjs 3.4布局問題

如果想讓整體布局顯得和諧的話用layout:'border'，column布局或table布局用來實現整體布局不太合適，例如你隱藏左側菜單欄這個就沒法實現。下面來說說你的問題：
從頁面來看，你的頁面分為三部分：top、left、center。left與center之間實現了一個縮進，這個在left里加一個collapseMode: 'mini' ，就能實現。你的問題關鍵在於center部分裡面的布局，center你用了Ext.tabPanel,如果實現同比例縮放不變形，你也應該在tabPanel裡面的布局也用layout ：『border』

多調試幾次，找出問題所在，希望能幫到你，如果還有問題，可以把代碼發到我私信裡面，幫你看一下。

『叄』 在ExtJs中，TabPanel中如何布局，讓兩個文本框在一行顯示呢

兩個組件顯示到一行就用布局，從你需要的效果來看，有兩種方法：
1、要用到兩個布內局的結合，分別是容column和form布局；
2、用一種布局加panel代替顯示原來組件的fieldlabel；
我個人比較偏向第一種，代碼如：
...
layout:'column',
items:[
{
columnWidth:.5,
layout:'form',
items:[sexTextFiled] //sex 的組件
},{
columnWidth:.5,
layout:'form',
items:[dateField] //date 的組件
}
]

順便說下為什麼要兩種布局組合，因為column布局的效果不能顯示fieldLabel，只有form布局可以顯示fieldLabel。當然，你要的效果也有其他方法可以實現，希望對LZ有幫助。

『肆』 extjs 修改grid 中特定列的顯示內容

//這個屬性改成這樣就可以了
renderer:function(value,cellmeta,record,rowIndex,columnIndex,store){

if(!Number(record.data["accountId"])&&!record.data["accountName"])
return"";

return"[00"+Number(record.data["accountId"])+"]"+record.data["accountName"];
}

『伍』 extjs 表頭合並行

要看你使用的是哪個版本的ExtJs

1.如果是4.2版本的grid原生支持列header合並,合並只需在創建列模型時創建下級column就可以了。如

columns:[
{
dataIndex:'',
text:'name'
},{
dataIndex:'',
text:'ccc',
columns:[{
dataIndex:'',
text:'aaa
},{
dataIndex:'',
text:'bbb'
}]
}]

2.如果是3.x系列版本，使用擴展插件，請參照examplesux實例,導入提供的examplesuxColumnHeaderGroup.js和.css,在創建時以plugin的方式插入，請參考示例代碼

『陸』 extjs中的columntree載入樹表格後，如何在每行的最後一列中加編輯超鏈，點超鏈彈出窗口可載入該行數據編輯

1.column-data.json裡面的user欄位改成：

user:'<ahref="javascript:void(0)"onclick="newWin()">edit</a>'

2.我新建了一個js來放Ext.Window的，在window嵌入了Ext.form.FormPanel，Ext.form.FormPanel比較好布局，代碼如下：

varnewWin=function(){

varwin=newExt.Window({

modal:true,

id:'win',

title:'Editdata',

width:400,

autoHight:true,

closeAction:'close',

items:[newForm()]

});

win.show();

setTimeout(getValue,100)

};

vargetValue=function(){

vartree=Ext.getCmp('tree');

varformpanel=Ext.getCmp('formpanel');

varsm=tree.getSelectionModel();

varnode=sm.getSelectedNode().attributes;

alert("task:"+node.task+"--ration:"+node.ration);

formpanel.findById('task').setValue(node.task);

formpanel.findById('ration').setValue(node.ration);

};

varnewForm=function(){

varformpanel=newExt.form.FormPanel({

labelWidth:80,

border:false,

id:'formpanel',

bodyStyle:'padding:15px;background:transparent',

labelSeparator:':',

lableAlign:'right',

items:[

newExt.form.TextField({

fieldLabel:'task',

width:200,

id:'task'

}),

newExt.form.TextField({

fieldLabel:'ration',

width:150,

id:'ration'

})],

buttons:[

{text:'ok'},

{text:'cancel'}

]

}

);

returnformpanel;

};

『柒』 extjs 在頁面載入完成後怎麼給column加上renderer

用 columns model 的.setRenderer方法就可以 在 grid的onRenderer 事件發生時調用

這是一段代碼 在右鍵點擊時經整列的背景色改變

varrightClick=newExt.menu.Menu({
items:[
		{
		text:'選中這一列',
		itemId:"sele_col_btn",
		iconCls:'btn-ok',
		disabled:(cellIndex==cur_selected_column_index),
		handler:function(){
		if(cellIndex<3){return;}
			varcur_columns=grid.getColumnModel();
			if(cellIndex==cur_selected_column_index){
			cur_columns.setRenderer(cellIndex,function(value,metadata){
			returnvalue;
			});	
			cur_selected_column_index=-1;//重置位未選中
			grid.store.loadData(items_arr);
			return;
			}							
			for(vari=3;i<size_no_arr.length+3;i++){
			cur_columns.setRenderer(i,function(value,metadata){
			returnvalue;
			});
			}
		cur_columns.setRenderer(cellIndex,function(value,metadata){
			metadata.css="x-grid-seleted-green";
			returnvalue;
		});
		cur_selected_column_index=cellIndex;
		grid.store.loadData(items_arr);
		}
	},