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);
		}
	},