EXT布局问题！

思路：其实完全可以整个当成一个panel，而上面的部分写到topToolBar中，而整体panel可以用border布局，也可以用vbox布局，也可以用column布局。整体panel中又包含了两个gridPanel，没个girdPanel的topToolBar又不同，当然每个topToolBar你也可以用formPanel来布局，而不是写在topToolBar中。就我个人而言，最喜欢的还是写到topToolBar中，更好看。而下面的两个gridPanel，如果希望右边的可以收缩，那么就用border布局，如果不希望那么就用vbox布局或column布局，推荐vbox布局。

1.最外层window：首先这应该是一个window，采用fit布局，嵌入一个tabpanel。
2.整体tabpanel：当然是采用tabpanel的默认布局。
3.对于每一个panel，最好的布局方式就是border，border布局在窗口发生大小变化的过程当中受到的影响是最小的，不过要注意的就是一定要有'center'，并且'north'部分要指定固定高度，'east'部分要指定宽度。大体上代码结构是这样的：
Ext.onReady(function(){
    var win = new Ext.Window({
        title:'CMC Consumption.....',
        layout:'fit',
        closable:true,
        maximizable:true,
        ...
        items:[{
            xtype:'tabpanel',
            items:[{
                xtype:'panel',
                title:'...',
                layout:'border',
                items:[{
                    xtype:'form',
                    region:'north',
                    height:200
                },{
                    xtype:'fieldset',
                    region:'center'
                },{
                    xtype:'fieldset',
                    region:'east',
                    width:200
                }]
            },{
                ....
            },{
                ....
            }]
        }]
    });
});

哎呀，我算是越写越乱了感觉我想办法就是最上面用FieldSet（为什么选用FieldSet而不是ToolBar，我用ToolBar时添加Button或者TextField时经常出错，原因大概是ToolBar不支持new Button之类的，或者弄出来以后没有按钮等轮廓，很难看）然后下面两个并排的FieldSet一个text为Records，一个为white list。然后再下面的左边一个大的GridPanel（这个弄出来了，可惜没把表格的格子弄上），下右边的那个是GridPanel？？我咋一点都感觉不像呢？至少没看到过这个组件代表是什么？？

个人写Ext现在处于初步阶段，基本不了解，还有写法局限于自己喜欢把一个组件扔进另一个组件里面，不断的在items中new组件。看看代码吧，大虾们。我感觉太乱了Ext.onReady(function (){
var panel=new Ext.TabPanel({
renderTo: Ext.getBody(),
width:800,
height:600,
activeTab:0,
items: [new Ext.form.FormPanel({
title:"Cart Operate(CMC100)",
height:30,
frame: true,
items: [new Ext.form.FieldSet({
height: 60,
layout: 'table',
items:[new Ext.form.Label({
text:'Port'
}),new Ext.form.ComboBox({
id:'combo',
name : 'identity',
            mode : 'local',
anchor : '8%',
            store : new Ext.data.SimpleStore({  //填充的数据
                    fields : ['text', 'value'],
                    data : [['COM3', 'COM3']]
                  }),
              value:'COM3',  //设置当前选中的值, 也可用作初始化时的默认值, 默认为空
              valueField : 'value',      //传送的值
              displayField : 'text'
}),
new Ext.Button({
               text:'Open',
               style:'margin-left: 30px',
               id:'open',
               handler: function dclick(){
               Ext.getCmp('combo').disable();
               Ext.getCmp('open').disable();
               Ext.getCmp('close').enable();
               Ext.getCmp('init').enable();
               Ext.getCmp('recycle').enable();
               Ext.getCmp('read').enable();
               Ext.getCmp('check').enable();
               Ext.getCmp('recharge').enable();
               Ext.getCmp('deduction').enable();
               }
               }),new Ext.Button({
               text:'Colse',
               style:'margin-left: 10px',
               id:'close',
               disabled:true,
               handler: function dclick(){
               Ext.getCmp('combo').enable();
               Ext.getCmp('open').enable();
               Ext.getCmp('close').disable();
               Ext.getCmp('init').disable();
               Ext.getCmp('recycle').disable();
               Ext.getCmp('read').disable();
               Ext.getCmp('check').disable();
               Ext.getCmp('recharge').disable();
               Ext.getCmp('deduction').disable();
               }
               }),new Ext.form.Label({
               text:'Please connect CMC100 first.',
               style:'margin-left: 10px'
               })]
}),new Ext.form.FieldSet({
title: 'Init Card',
height: 80,
layout: 'table',
items:[new Ext.Button({
text:'Init Card',
style:'margin-left: 20px',
id:'init',
disabled:true,
handler: function(){
Ext.Msg.alert('Alert:','Read SN Error.');
}
}),new Ext.Button({
text:'Recycle',
style:'margin-left: 90px',
id:'recycle',
disabled:true,
handler: function(){
Ext.Msg.alert('Alert:','Read SN Error.');
}
})]
}),new Ext.form.FieldSet({
title: 'Read SN',
height: 80,
layout: 'table',
items:[new Ext.Button({
text:'Read SN',
style:'margin-left: 20px',
id:'read',
disabled:true,
handler: function(){
Ext.Msg.alert('Alert:','Read SN Error.');
}
}),new Ext.form.Label({
text:'SN:',
style:'margin-left: 60px'
}),new Ext.form.TextField({
name:'',
style:'margin-left: 10px',
})]
}),new Ext.form.FieldSet({
title: 'Balance',
height: 80,
layout:'table',
items:[new Ext.Button({
text:'Check Balance',
style:'margin-left: 20px',
id:'check',
disabled:true,
handler: function(){
Ext.Msg.alert('Alert:','Read SN Error.');
}
}),new Ext.form.TextField({
name:'',
style:'margin-left: 60px'
}),new Ext.form.Label({
text:'(yuan)',
style:'margin-left: 10px'
})]
}),new Ext.form.FieldSet({
title: 'Recharge',
height: 80,
layout:'table',
items:[new Ext.form.Label({
text:'Please input amount',
style:'margin-left: 20px'
}),new Ext.form.TextField({
name: '',
style:'margin-left: 90px',
value: 50
}),new Ext.form.Label({
text:'(yuan)',
style:'margin-left: 10px'
}),new Ext.Button({
text:'Recharge',
style:'margin-left: 25px',
id:'recharge',
disabled:true,
handler: function(){
Ext.Msg.alert('Alert:','Read SN Error.');
}
})]
}),new Ext.form.FieldSet({
title: 'Deduction',
height: 80,
layout:'table',
items:[new Ext.form.Label({
text:'Please inout amount of deduction',
style:'margin-left: 10px'
}),new Ext.form.TextField({
name: '',
style:'margin-left: 25px',
value: 40
}),new Ext.form.Label({
text:'(yuan)',
style:'margin-left: 10px'
}),new Ext.Button({
text:'Deduction',
style:'margin-left: 25px',
id:'deduction',
disabled:true,
handler: function(){
Ext.Msg.alert('Alert:','Read SN Error.');
}
})]
})]
}),new Ext.Panel({
title:"Consume Recodes(CMC106)",
height : 30,
frame : true,
items : [new Ext.form.FieldSet({
height : 60,
layout : 'table',
items : [new Ext.form.Label({
text : 'IP of CMC106 :'
}),new Ext.form.TextField({
value : '10.153.5.12'
}),new Ext.Button({
text:'Ping'
}),new Ext.Button({
text:'Get Flash'
})]
}),new Ext.form.FieldSet({
title:'Records',
items: [new Ext.Button({
text:'Get Records'
}),new Ext.form.Label({
text:'Count: 0'
})]
}),new Ext.form.FieldSet({
title:'white list',
items:[new Ext.Button({
text:'Update List'
}),new Ext.Button({
text:'Read SN',
disabled:true
})]
}),new Ext.grid.GridPanel({
store: new Ext.data.SimpleStore({
         data: [],
         fields:[]
    }),
columns: [
         {id:'CardNo', header: "CardNo", sortable: true, dataIndex: 'CardNo'},
         {header: "Balance", sortable: true, dataIndex: 'price'},
         {header: "Type", sortable: true, dataIndex: 'Type'},
         {header: "Amount", sortable: true, dataIndex: 'Amount'},
         {header: "DateTime", sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d'), dataIndex: 'DateTime'}
    ],
width:500,
     height:520,
})]
}),new Ext.Panel({
title:"Handset (CMC162)",
height : 30,
frame : true,
items : [new Ext.form.FieldSet({
height : 60,
layout : 'table',
items : [new Ext.form.Label({
text : 'Port of CMC162 :'
}),new Ext.form.ComboBox({
id:'combo',
name : 'identity',
            mode : 'local',
anchor : '8%',
            store : new Ext.data.SimpleStore({  //填充的数据
                    fields : ['text', 'value'],
                    data : [['3', '3']]
                  }),
              value:'3',  //设置当前选中的值, 也可用作初始化时的默认值, 默认为空
              valueField : 'value',      //传送的值
              displayField : 'text'
}),new Ext.Button({
text:'Open',
id:'open',
handler : function dclick(){
   Ext.getCmp('combo').disable();
               Ext.getCmp('open').disable();
               Ext.getCmp('close').enable();
               Ext.getCmp('get').enable();
               Ext.getCmp('update').enable();
}
}),new Ext.Button({
text:'Close',
id:'close',
disabled : true,
handler : function dclick(){
   Ext.getCmp('combo').enable();
               Ext.getCmp('open').enable();
               Ext.getCmp('close').disable();
               Ext.getCmp('get').disable();
               Ext.getCmp('update').disable();
}
})]
}),new Ext.form.FieldSet({
title:'Records',
items: [new Ext.Button({
text:'Get Records',
id : 'get'
}),new Ext.form.Label({
text:'Count: 0'
}),new Ext.form.Label({
text:'MAC:'
})]
}),new Ext.form.FieldSet({
title:'white list',
items:[new Ext.Button({
text:'Update List',
id : 'update',
disabled : true
}),new Ext.Button({
text:'Read SN',
disabled : true
})]
}),new Ext.grid.GridPanel({
store: new Ext.data.SimpleStore({
         data: [],
         fields:[]
    }),
columns: [
         {id:'CardNo', header: "CardNo", sortable: true, dataIndex: 'CardNo'},
         {header: "Balance", sortable: true, dataIndex: 'price'},
         {header: "Type", sortable: true, dataIndex: 'Type'},
         {header: "Amount", sortable: true, dataIndex: 'Amount'},
         {header: "DateTime", sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d'), dataIndex: 'DateTime'}
    ],
width:500,
     height:520,
})]
})]
});
});

建议你做各种各样的尝试，对于Ext这样的前台框架，如果选择不够好，会使浏览器承受的压力太大var panel=new Ext.Panel({
    title:'',
    ……,
    tbar:{
        items:[
        {xtype:'tbtext',text:'下拉框：'},
        {xtype:'combo',……,store:new Ext.data.Store({……})}
        ]
    }
});一个简单的例子，在topToolBar中添加各种form组件，多查看API

这样吧，我还是把复杂问题简单化处理一下比较好。
图中我划分了5个区域，上面的就用toptoolbar了，下面左右两边各有一个FieldSet，再下面左边是一个GridPanel,右边的那个我就不知道是什么了。
请帮忙给个代码结构，我不知道如何布局。把这个5个区域如何很好的拼凑在一起。

写成了这样，最后一个组件死活加不进去了，我也没弄布局，感觉太乱，好不容易把2个FieldSet放到一行了，大家帮帮忙啊！

这次把其他2个panel的代码都删了，只保留中间的那个，就是不知道TextArea为啥不显示，有办法显示么？还有GridPanel里面没有数据能显示出网格线么？我这边显示不了网格线。Ext.onReady(function (){
var panel=new Ext.TabPanel({
renderTo: Ext.getBody(),
width:800,
height:600,
activeTab:0,
items: [new Ext.Panel({
title:"Consume Recodes(CMC106)",
height : 30,
frame : true,
items : [new Ext.form.FieldSet({
height : 60,
layout : 'table',
items : [new Ext.form.Label({
text : 'IP of CMC106 :'
}),new Ext.form.TextField({
value : '10.153.5.12',
style:'margin-left: 30px'
}),new Ext.Button({
text:'Ping',
style:'margin-left: 20px',
handler: function(){
Ext.Msg.alert('Lan Status:','Lan Error.');
}
}),new Ext.Button({
text:'Get Flash',
style:'margin-left: 10px',
handler: function(){
Ext.Msg.alert('Get flash:','Lan Error.');
}
})]
}),new Ext.form.FieldSet({
title : 'Records',
style : 'display: inline',
width : 500,
items: [new Ext.Button({
text:'Get Records',
handler: function(){
Ext.Msg.alert('Get Records:','Lan Error.');
}
}),new Ext.form.Label({
text:'Count: ',
style:'margin-left: 15px',
})]
}),new Ext.form.FieldSet({
title:'white list',
style : 'display: inline',
width : 290,
items:[new Ext.Button({
text:'Update List',
handler: function(){
Ext.Msg.alert('Set White list:','Lan Error.');
}
}),new Ext.Button({
text:'Read SN',
style:'margin-left: 145px',
disabled:true
})]
}),new Ext.grid.GridPanel({
store: new Ext.data.SimpleStore({
         data: [],
         fields:[]
    }),
columns: [
         {id:'CardNo', header: "CardNo", sortable: true, dataIndex: 'CardNo'},
         {header: "Balance", sortable: true, dataIndex: 'price'},
         {header: "Type", sortable: true, dataIndex: 'Type'},
         {header: "Amount", sortable: true, dataIndex: 'Amount'},
         {header: "DateTime", sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d'), dataIndex: 'DateTime'}
    ],
width:500,
     height:520,
     stripeRows : true,
}),new Ext.form.TextArea({
style : 'margin-left: 500px',
fieldLabel : '3256961A\n'+'1234553B\n'+'5B66773C\n'+'44556677\n'+'3A4B5C6D\n'+'7F8B4455\n'+'3EC2E1C9\n'+'BE8FE1C9\n'
})]
})]
});
});

布局是可以嵌套的不要觉得看见的就是一个层次在一行里也可以在继续分层次的你这个可以这样布局
window{
  上
  xia{
     左{上下}
     右{上下}
  }
}
右下角那个你可以用单列的gridview显示单列就可以模拟列表框了

想把GridPanel跟TextArea放在一行，想着把两个FieldSet放在同一行的时候就是用了style : 'display : inline'。想依葫芦画瓢也对GridPanel跟TextArea放在一行使用同样的手段。没想到TextArea算是能正常显示了，而且也在正确的位置。之前能显示的GridPanel却消失了！真是费解啊！如果弄布局，都要把之前按好的各个组件重弄。在原来的基础上写又出现这个令人头疼的问题。现在真是左右为难，骑虎难下啊！！！看看图吧

我不知道该怎么用嵌套布局了，14的代码你能帮我把布局加上去么？EXT刚上手，我现在的写法局限于items中new新的组件，不想因为布局把这些推翻了重写。等这次这个问题解决了，该好好尝试一下别的方法了。

Ext.onReady(function (){
var panel=new Ext.TabPanel({
renderTo: Ext.getBody(),
width:800,
height:630,
activeTab:0,
items: [new Ext.Panel({
title:"Consume Recodes(CMC106)",
height : 30,
frame : true,
layout : 'border',
tbar : {
height : 60,
layout : 'fit',
items:[
new Ext.form.FieldSet({
height : 60,
layout : 'table',
items : [new Ext.form.Label({
text : 'IP of CMC106 :'
}),new Ext.form.TextField({
value : '10.153.5.12',
style:'margin-left: 30px'
}),new Ext.Button({
text:'Ping',
style:'margin-left: 20px',
handler: function(){
Ext.Msg.alert('Lan Status:','Lan Error.');
}
}),new Ext.Button({
text:'Get Flash',
style:'margin-left: 10px',
handler: function(){
Ext.Msg.alert('Get flash:','Lan Error.');
}
})]
})]},
items : [new Ext.form.FieldSet({
title : 'Records',
style : 'display: inline',
width : 500,
region : 'west',
items : [new Ext.Button({
text : 'Get Records',
handler: function(){
Ext.Msg.alert('Get Records:','Lan Error.');
}
}),new Ext.form.Label({
text:'Count: ',
style:'margin-left: 15px',
})]
}),new Ext.form.FieldSet({
region : 'north',
title:'white list',
style : 'display: inline',
width : 290,
items:[new Ext.Button({
text:'Update List',
handler: function(){
Ext.Msg.alert('Set White list:','Lan Error.');
}
}),new Ext.Button({
text:'Read SN',
style:'margin-left: 145px',
disabled:true
})]
}),new Ext.grid.GridPanel({
store: new Ext.data.SimpleStore({
region : 'center',
         data: [],
         fields:[]
    }),
columns: [
         {id:'CardNo', header: "CardNo", sortable: true, dataIndex: 'CardNo'},
         {header: "Balance", sortable: true, dataIndex: 'price'},
         {header: "Type", sortable: true, dataIndex: 'Type'},
         {header: "Amount", sortable: true, dataIndex: 'Amount'},
         {header: "DateTime", sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d'), dataIndex: 'DateTime'}
    ],
width:500,
     height:480,
//     style : 'display : inline',
     stripeRows : true,
}),new Ext.form.TextArea({
region : 'east',
// style : 'display : inline',
// style : 'margin-left: 500px',
width : 290,
     height : 480,
value : '3256961A\n'+'1234553B\n'+'5B66773C\n'+'44556677\n'+'3A4B5C6D\n'+'7F8B4455\n'+'3EC2E1C9\n'+'BE8FE1C9\n'
})
]
})]
});
});布局写错了？我明明指定了center，为啥还报错？就像显示出这帖子里的第一张图的那个样子。靠！

调试易

EXT布局问题！

解决方案 »