如图所示 例如银行承兑汇票有效期 或者 银行承兑汇票注销日期 这两个文本框前的name ,由于字数过多,给流出的长度无法满足,应该改哪个属性才合适。
columnWidth这个属性不行 它主要是改后面的文本框长度的 var loanCompactForm = Ext.create('Ext.form.Panel', {
buttonAlign: 'center',
id: 'form_loanCompact',
layout: "form",
bodyStyle: {
padding: '10px'
},
frame: false,
border: 0,
defaults: {
labelWidth:120
},
items: [
{
layout: 'column',
items: [
{ layout: 'form',
columnWidth: .3,
items: [form_1]
},
{ layout: 'form',
columnWidth: .3,
items: [form_2]
},
{ layout: 'form',
columnWidth: .3,
items: [form_3]
}
]
},
{
layout: 'column',
items: [
{ layout: 'form',
columnWidth: .3,
items: [form_4]
},
{ layout: 'form',
columnWidth: .3,
items: [form_5]
} ,
{ layout: 'form',
columnWidth: .3,
items: [form_6]
}
]
},
{
layout: 'column',
items: [
{ layout: 'form',
columnWidth: .3,
items: [form_7]
},
{ layout: 'form',
columnWidth: .3,
items: [form_8]
} ,
{ layout: 'form',
columnWidth: .3,
items: [form_9]
}
]
},
{
layout: 'column',
items: [
{ layout: 'form',
columnWidth: .3,
items: [form_10]
},
{ layout: 'form',
columnWidth: .3,
items: [form_11]
} ,
{ layout: 'form',
columnWidth: .3,
items: [form_12]
}
]
},
{
layout: 'column',
items: [
{ layout: 'form',
columnWidth: .3,
items: [form_13]
},
{ layout: 'form',
columnWidth: .3,
items: [form_14]
} ,
{ layout: 'form',
columnWidth: .3,
items: [form_15]
}
]
},
{
layout: 'column',
items: [
{ layout: 'form',
columnWidth: .3,
items: [form_16]
},
{ layout: 'form',
columnWidth: .3,
items: [form_17]
} ,
{ layout: 'form',
columnWidth: .3,
items: [form_18]
}
]
} ,
{
layout: 'column',
items: [
{ layout: 'form',
columnWidth: .3,
items: [form_19]
}
]
} ],
buttons: [form_query_reset,
{
text: '提交',
formBind: true,
disabled: true,
iconCls: 'icon_submit',
listeners: {
"click": function () {
// userStore.loadPage(1);
}
}
}
]
});
Ext JS表单布局
如图
var form_11 = createDatefield('授信额度注销生效日期', '11', false); // 创建表单元素 - 日期选择
function createDatefield(labelname, name, allowBlank,labelWidth) { var obj = Ext.create('Ext.form.DateField', {
fieldLabel: labelname,
labelAlign: 'right',
allowBlank: allowBlank,
format: 'Y-m-d',
name: name,
labelwidth:labelWidth
}); return obj;
}