问题描述
我有一个简单的Ext JS 4窗体(MVC样式的应用程序)。下面的例子显示了4个字段。这个例子是简化的,但是现在我需要使用这些字段,并使用hbox和vbox(也可能是其他的)来放置这些字段。前两个字段,并将一个hbox放在窗体的顶部,以便水平显示,在窗体的顶部,然后将其余的字段放在hbox下面的一个vbox中,以便垂直显示。 p>
(我的实际表单有更多的字段,我将有各种其他hbox / vbox,但我只是想开始):
Ext.define('ESDB.view.encounter.Edit',{
extends:'Ext.window.Window',
alias :'widget.encounteredit',
title:'Edit Encounter',
layout:'fit',
width:700,
autoShow:true,
initComponent:function(){
this.items = [
{
xtype:'form',
items:[
{
xtype:'displayfield',
name:'id',
fieldLabel:'ID'
},
{
xtype:'displayfield',
名称:'cid',
fieldLabel:'cid#'
},
{
xtype:'displayfield',
name:'addedDate',
fieldLabel:'added'
},
{
xtype:'displayfield',
name:'clientID',
fieldLabel:'Client#'
}
}
]
}
我已经查看了各种布局示例。,,最后 - 最后一个有一些东西看起来很近 - 在表单树中,2列中的fieldsets,它显示一个带有项目[]的表单,里面有一些布局代码,我能够以使其部分工作,但无法将其转换为hbox / vbox样式布局。当我将它设置为hbox时,hbox没有高度,所以我看不到字段。
以下是示例:
Ext.define('ESDB.view.encounter.Edit',{
extends:'Ext.window.Window',
alias:'widget.encounteredit',
title: '编辑遇到',
布局:'fit',
宽度:700,
autoShow:true,
项:[{
xtype:'形式',
项目:[
{
xtype:'panel',
border:false,
layout:'hbox',
items:
{
xtype:'displayfield',
name:'id',
fieldLabel:'ID',
flex:0.5
},
{
xtype:'displayfield',
name:'cid',
fieldLab el:'cid#',
flex:0.5
}
]
},
{
xtype:'displayfield',
name :'addedDate',
fieldLabel:'added'
},
{
xtype:'displayfield',
name:'clientID',
fieldLabel :'客户#'
}
]
}]
});
如果要以从上到下的形式显示块,则不需要更改布局。我只将2个第一个显示字段包含到hbox布局的面板中(因为您只想拆分第一行)。
I have a simple Ext JS 4 form inside a window (MVC style app). The example below shows 4 fields. This example is simplified, but now I need to take these fields and lay them out using hbox and vbox (and possibly others?)
How would I for example, take the first two fields and put the in a hbox at the top of the form so they display horizontally, at the top of the form, then take the rest of the fields and put them in a vbox below that hbox so they display vertically?
(my actual form has a lot more fields and I will have various other hbox/vboxes, but I am just looking to get started):
Ext.define('ESDB.view.encounter.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.encounteredit',
title : 'Edit Encounter',
layout: 'fit',
width: 700,
autoShow: true,
initComponent: function() {
this.items = [
{
xtype: 'form',
items: [
{
xtype: 'displayfield',
name: 'id',
fieldLabel: 'ID'
},
{
xtype: 'displayfield',
name: 'cid',
fieldLabel: 'cid#'
},
{
xtype: 'displayfield',
name: 'addedDate',
fieldLabel: 'Added'
},
{
xtype: 'displayfield',
name: 'clientID',
fieldLabel: 'Client#'
}
}
]
}
I have looked at various examples of layout sencha page , sencha docs, and finally another one -- this last one has something that looks close - in the form tree, fieldsets in 2 columns, it shows a form with items[] and inside there some layout code, and I was able to get that to partially work, but was not able to convert it to an hbox/vbox style layout. When I set it to hbox, there is no height to the hbox, so I can not see the fields.
Here is example:
Ext.define('ESDB.view.encounter.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.encounteredit',
title : 'Edit Encounter',
layout: 'fit',
width: 700,
autoShow: true,
items: [{
xtype: 'form',
items: [
{
xtype: 'panel',
border: false,
layout: 'hbox',
items: [
{
xtype: 'displayfield',
name: 'id',
fieldLabel: 'ID',
flex: 0.5
},
{
xtype: 'displayfield',
name: 'cid',
fieldLabel: 'cid#',
flex: 0.5
}
]
},
{
xtype: 'displayfield',
name: 'addedDate',
fieldLabel: 'Added'
},
{
xtype: 'displayfield',
name: 'clientID',
fieldLabel: 'Client#'
}
]
}]
});
If you want to displays blocks in form from up to down, you don't need to change layout. I've wrapped only 2 first display fields into panel with hbox layout (because you want to split only first row).
这篇关于Ext JS 4 - 使用hbox,vbox等形式填写字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!