EXTJS Grid 布局问题请教
表格布局的表头及数据为什么变成竖的了求教图:
代码:doRowdblclick : function(grid, rowIndex, e){
grid.getSelectionModel().selectRow(rowIndex, false);
thisGrid = this.grid;
parentID = this.parentID;
var row = grid.getStore().getAt(rowIndex);
var temp = function(data){
var secondHeader = new Ext.form.FormPanel({
region: "north",
title: "基础信息",
iconCls: 'icon-form',
width: 256,
height: 140,
split: true,
collapsible: true,
layoutConfig: {
columns: 3
},
layout: 'table',
labelAlign: 'right',
labelWidth: 70,
frame: true,
items: [{
layout: 'form',
items: [{
name: 'txtCode',
id: 'txtCode',
fieldLabel: '款号',
xtype: 'textfield',
value : data.code,
readOnly :true,
width: 120
}]
}, {
layout: 'form',
items: [{
name: 'txtName',
id: 'txtName',
fieldLabel: '品牌',
xtype: 'textfield',
value : data.name,
readOnly :true,
width: 120
}]
},{
layout: 'form',
items: [{
name: 'txtSpec',
id: 'txtSpec',
fieldLabel: '规格',
xtype: 'textfield',
value : data.spec,
readOnly :true,
width: 120
}]
}, {
layout: 'form',
items: [{
name: 'txtInsideSize',
id: 'txtInsideSize',
fieldLabel: '尺码(内)',
xtype: 'textfield',
width: 120,
value : data.insideSize,
readOnly :true
}]
}, {
layout: 'form',
items: [{
name: 'txtOutSize',
id: 'txtOutSize',
fieldLabel: '尺码(外)',
xtype: 'textfield',
width: 120,
value : data.outSize,
readOnly :true
}]
}, {
layout: 'form',
items: [{
name: 'txtColorNo',
id: 'txtColorNo',
fieldLabel: '色号',
xtype: 'textfield',
value : data.colorNo,
readOnly :true,
width: 120
}]
}, {
layout: 'form',
items: [{
name: 'txtPackBox',
id: 'txtPackBox',
fieldLabel: '装箱规格',
xtype: 'textfield',
value : data.packBox,
readOnly :true,
width: 120
}]
}, {
layout: 'form',
items: [{
name: 'txtInterNo',
id: 'txtInterNo',
fieldLabel: '内部编号',
xtype: 'textfield',
value : data.interNo,
readOnly :true,
width: 120
}]
}, {
layout: 'form',
items: [{
name: 'txtUnit',
id: 'txtUnit',
fieldLabel: '单位',
xtype: 'textfield',
width: 120,
value : data.unit,
readOnly :true
}]
}, {
layout: 'form',
items: [{
name: 'txtPrice',
id: 'txtPrice',
fieldLabel: '价格',
xtype: 'textfield',
width: 120,
value : data.price,
readOnly :true
}]
}, {
layout: 'form',
items: [{
name: 'txtMakt',
id: 'txtMakt',
fieldLabel: '物料描述',
xtype: 'textfield',
width: 120,
value : data.makt,
readOnly :true
}]
}, {
layout: 'form',
items: [{
name: 'txtRemark1',
id: 'txtRemark1',
fieldLabel: '备注1',
labelSeparator: '：',
xtype: 'textfield',
width: 120,
value : data.remark1,
readOnly :true
}]
}, {
layout: 'form',
items: [{
name: 'txtRemark2',
id: 'txtRemark2',
fieldLabel: '备注2',
labelSeparator: '：',
xtype: 'textfield',
width: 120,
value : data.remark2,
readOnly :true
}]
}]
});
var addRoleGrid = new Ext.tree.ColumnTree({
region: 'center',
title: 'BOM结构',
iconCls: 'icon-form',
rootVisible: true,
enableDD: false,
animate: false,
autoScroll: true,
columns: [{
header: '品名',
width: 180,
dataIndex: 'name'
}, {
header: '款号',
width: 100,
dataIndex: 'code'
}, {
header: '单位',
width: 50,
dataIndex: 'unit'
},{
header: '规格',
width: 80,
dataIndex: 'spec'
},{
header: '尺码(内)',
width: 80,
dataIndex: 'insideSize'
},{
header: '尺码(外)',
width: 80,
dataIndex: 'outSize'
},{
header: '价格',
width: 80,
dataIndex: 'price'
}, {
header: '用量',
width: 50,
dataIndex: 'count'
}, {
header: '损耗',
width: 50,
dataIndex: 'ullage'
}/*, {
header: '供应商',
width: 120,
dataIndex: 'gys'
}*/,{
header: '物料描述',
width: 80,
dataIndex: 'makt'
}, {
header: '备注',
width: 150,
dataIndex: 'remark'
}],
loader: new Ext.tree.TreeLoader({
dataUrl: Ext.util.getAllBomGrade.createDelegate(this)("produceID",row.get("maId")),
preloadChildren: true,
uiProviders: {
'col': Ext.tree.CheckColumnNodeUI
}
}),
root: new Ext.tree.AsyncTreeNode({
text: '所有下级BOM'
}),
fields:[
{name:'name',type : 'string'},
{name:'code',type : 'string'},
{name:'unit',type : 'string'},
{name:'price',type : 'string'},
{name:'count',type : 'string'},
{name:'ullage',type : 'string'},
{name:'insideSize',type : 'string'},
{name:'outSize',type : 'string'},
{name:'makt',type : 'string'},
// {name:'gys',type : 'string'},
{name:'spec',type : 'string'},
{name:'remark',type : 'string'}
]
});
addRoleGrid.expandAll();
var addSecondPanel = new Ext.Panel({
layout: 'border',
border: false,
items: [secondHeader, addRoleGrid]
});
var addWin = new Ext.Window({
title: '物品BOM清单',
maximizable : true,
modal: true,
header: true,
frame: true,
border: false,
style: 'padding:10px;',
autoScroll: true,
layoutConfig: new Ext.layout.CardLayout({
deferredRender: false
}),
activeItem: 0,
width: 640,
height: 450,
items: [addSecondPanel]
});
var addCancelBtn = new Ext.Toolbar.Button({
text: '关闭',
minWidth: 75,
handler: function(){
addWin.close();
},
scope: this
});
addWin.buttons = [addCancelBtn];
addWin.show();
};
var fn = temp.createDelegate(this);
var loadFn = bomgradeBean.getMatById.createExSequence(fn, this);
editId = row.get("maId");
loadFn(editId);
} extjs layout header string border
补充：Java , Web 开发
