我在表单上显示字段时出现问题
var test = Ext.create('Ext.form.Panel', {
renderTo: 'test',
title: '1. zzzz',
width: 800,
bodyPadding: 5,
defaults: {
anchor: '100%'
},
items: [
{
xtype: 'fieldset',
defaults: {
anchor: '100%'
},
layout: 'column',
items: [
{
xtype: 'panel',
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
columnWidth: .5,
flex: 1,
defaultType: 'textfield',
defaults: {
anchor: '100%',
flex: 1
},
items: [
{
xtype: 'numberfield',
hideTrigger: true,
fieldLabel: 'zzzz',
//anchor: '100%',
//anchor: '-5',
name: 'SRD_NUMBER'
},
{
fieldLabel: 'zzzz',
//anchor: '-5',
name: 'SRD_NAME_BR'
},
{
fieldLabel: 'zzzzz',
//anchor: '-5',
name: 'SRD_NAME_FL'
},
{
xtype: 'numberfield',
hideTrigger: true,
fieldLabel: 'zzzz',
disabled: true,
//anchor: '-5',
name: 'SRD_FOP'
},
{
fieldLabel: 'zzzz',
//anchor: '-5',
name: 'SRD_NAME_ORDER'
},
{
xtype: 'panel',
id: 'dep-img',
border: false,
height: 50,
width: 100,
cls: 'x-form-item',
html: '<img src="http://dep-image/id/10000001482" width="100" height="50" title="zzz">'
},
{
xtype: 'filefield',
name: 'file1',
msgTarget: 'side',
border: 3,
//anchor: '100%',
fieldLabel: 'zzzz',
buttonText: 'zzzzzz'
},
{
fieldLabel: 'zzz',
//anchor: '-5',
name: 'company'
},
{
fieldLabel: 'zzzz',
//anchor: '-5',
name: 'company'
}]
}
]
} //fieldset
]//glob
});
我需要将字段宽度调整为列宽。
本页 http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.FieldContainer 2个例子
在第二个例子中,他们设置defaults {layout: '100%'}
,看起来它不起作用。
找到自己的救赎:通过添加布局:'fit'或layout:'anchor'到fieldset anchor 默认值:{ 布局:'适合', flex:1 },
感谢所有
答案 0 :(得分:4)
您必须将身高属性设置为表单,如果仍然没有显示,则也要为字段集提供高度。
答案 1 :(得分:3)
找到了自己的救赎:通过添加布局:'fit'或layout:'anchor'到fieldset anchor
defaults: {
layout: 'fit',
flex: 1
},
感谢所有
答案 2 :(得分:1)
我会在formPanel上指定layout:'fit',因为你使用的是一个字段集。
其余的我不明白。看起来您指定列布局但只使用一列。
你能否清理这个例子,我很乐意提供帮助。
答案 3 :(得分:-3)
快速浏览一下......你有没有尝试过把锚:'0'放在两个字段和容器上?
此外,您应该使用fieldDefaults而不是
defaults: {
anchor: '100%',
flex: 1
},