Extjs 外部表格布局
我有一个表,有两行两列,但我希望每行的顺序不同 第一行:Extjs 外部表格布局,extjs,row,Extjs,Row,我有一个表,有两行两列,但我希望每行的顺序不同 第一行:(第一列宽度:30px,第二列宽度:270px) 第二行:(第一列宽度:130px,第二列宽度:170px) 我无法将这两行提取到不同的容器中。我需要换张桌子 我的代码是: var replacePanel = new Ext.Container({ id:'replacePanel', layout:'table', border: false, layoutConfig:{
(第一列宽度:30px,第二列宽度:270px)
第二行:(第一列宽度:130px,第二列宽度:170px)
我无法将这两行提取到不同的容器中。我需要换张桌子
我的代码是:
var replacePanel = new Ext.Container({
id:'replacePanel',
layout:'table',
border: false,
layoutConfig:{columns: 2},
style: { "padding-bottom": "5px", margin: "5px 0 0 20px" ,"white-space":"normal"},
items:[
{
xtype: "checkbox",
name: 'replace_cb', id: 'replace_cb',
width: 15, style: "margin-top:5px;",
listeners: {
check: function (checkbox, checked) {
var settingsForm = Ext.ComponentMgr.get('settingsForm');
settingsForm.changedFormula = true;
replacePanel.findById("replace_column").setDisabled(!checked);
}
}
},
{
xtype: "label", width: 390,
text: getDomElement("profileSetting.customMetrics.useNewMetric").value,
style:'padding-left:5px; padding-right:5px; margin-top:5px'
},
{
xtype: "container", width:160, style: "margin-top:4px", items: [
{
xtype: "combo", width: 150,
name:'replace_column',
id:'replace_column',
allowBlank:false, editable: false, typeAhead: true, disabled: true,
triggerAction: 'all', lazyRender:true, mode: 'local',
store: new Ext.data.JsonStore({ id: 'storeForReplaceColumn', fields: ['id', 'displayText'] }),
valueField: 'id',
displayField: 'displayText',
listeners: {
afterrender: function(combo) {
if (Ext.isIE) {
Ext.get(combo.el.dom.parentNode).setWidth(160);
}
},
select : function() {
var settingsForm = Ext.ComponentMgr.get('settingsForm');
settingsForm.changedFormula = true;
}
}
}]
},
{
xtype: "container",
html: getDomElement("profileSetting.customMetrics.whenReplacingMetrics").value
}
]
});
在这种情况下,表格布局不是很好的选择。我会选择vbox布局作为行,hbox布局作为列 伪代码:
vbox
item 1 (hbox)
left cell
right cell
item 2 (hbox)
left cell
right cell