页面如何展现两个或多个表格？

Question

[img]http://dl.iteye.com/upload/attachment/143660/a546bfcb-b38d-3fcc-8cd1-87ab59732833.jpg[/img]

界面设计图如上图。 一个界面要竖排显示几个表格，并且还有其他固定的字段，这种布局该怎么实现？

以前只展现一个表格的代码如下：
JSP页面：
[code="java"]<%@page contentType="text/html;charset=UTF-8"%>

信息查询
<%@ include file="/common/gui_lib.jsp"%>

src="../../scripts/repository/misc/misc.js">

     <script src="../../scripts/repository/ux/RowFitLayout.js" type="text/javascript"></script>
    <script type="text/javascript">
 Ext.onReady(function() { 
   Ext.QuickTips.init();
   Ext.form.Field.prototype.msgTarget = 'side';

     var  formcondition = new  cis.repository.stockorder.QueryCondition();

     var  integStatusGrid = new cis.repository.stockorder.ListPanel();



      var view=new Ext.Viewport(
      { 
        frame:true,
        layout:'row-fit',
        defaults: {
            bodyStyle: 'padding:4px 4px 4px 4px'
        },
        items:[formcondition,integStatusGrid]
       });

       view.doLayout();
    });

<div id='tpl-table'/>

[/code]

misc.js文件：
[code="java"]Ext.ns("cis.repository.stockorder");

include('scripts/repository/locale/misc_zh.js');
include('scripts/repository/ux/PageSizePlugin.js');
include('scripts/repository/validator/Validators.js');
include('scripts/repository/ux/PagingToolBar.js');
include('scripts/repository/ux/RemoteValidator.js');
include('scripts/repository/ux/PagingMemoryProxy.js');

include('scripts/sysCommonData.js');
cis.repository.stockorder.QueryCondition = function() {

var sendPhone = new Ext.form.TextField({
            id : 'sendPhone',
            allowBlank : false,
            fieldLabel : this.resourceBundle.ConditionProperty.PHONE,
            selectOnFocus : true,
            anchor:'90%'
        });


var querybutton = new Ext.Button({
            text : "查询",
            minWidth : '75',
            handler : function() {

                var gridPanel = Ext.getCmp("list-stockOrder-form-panel");

                if(Ext.getCmp('stockOrder-query').checkData()){

                var gridPanelStore = gridPanel.getStore();

                gridPanelStore.baseParams.sendPhone = sendPhone
                        .getValue();

                gridPanelStore.removeAll();
                gridPanelStore.load({
                            params : {
                                start : 0,
                                limit : gridPanel.myPageSize
                            }
                        });
            }       
            }
        });

cis.repository.stockorder.QueryCondition.superclass.constructor.call(
        this, {
            id : 'stockOrder-query',
            title :"查询条件",
            width : '100%',
            height : 70,

            border : true,
            frame : true,
            collapsible : true,
            deferredRender : false,
            labelAlign : 'right',
            items : [{
                                    layout : "column",
                                    bodyStyle:"padding:1px 10px 5px 10px",
                                    items : [{
                                                columnWidth : .40,
                                                layout : 'form',
                                                labelWidth:55,
                                                items : [sendPhone]
                                            }, {
                                                columnWidth : .20,
                                                layout : 'form',
                                                 buttonAlign:'left',
                                                items : [querybutton]
                                            }]
                    }]
        });

};

Ext.extend(cis.repository.stockorder.QueryCondition, Ext.form.FormPanel, {});

cis.repository.stockorder.ListPanel = function() {
var fm = Ext.form;
this.myPageSize = 20;

// column model
var commCM = new Ext.grid.ColumnModel([{
            id : 'sp',
            align : 'center',
            header : SP,
            dataIndex : 'sp',
            width : 150,
            editor:new fm.TextField,
            sortable : true
        }, {
            id : 'operation',
            align : 'center',
            header : OPERATION,
            dataIndex : 'operation',
            width : 150,
            editor:new fm.TextField,
            sortable : true
        }

]);

commCM.defaultSortable = false;

var commRecord = new Ext.data.Record.create([{
            name : 'sp',
            mapping : 'sp'
        }, {
            name : 'operation',
            mapping : 'operation'
        }]);



// reader is for Data Reading from DB or Local Data
var communicateReader = new Ext.data.JsonReader({
            root : 'elements',
            totalProperty : 'totalElements',
            id : 'id'
        }, commRecord);

this.dataStore = new Ext.data.GroupingStore({
            proxy : new Ext.data.HttpProxy({
                        url : '../../extend/misc/qryMobile.action'
                    }),
            reader : communicateReader

            //autoLoad : true
        });

var pagingbar = new Ext.PagingToolbar({
    pageSize : this.myPageSize,
    store : this.dataStore,
    displayInfo : true,
    plugins : [new Ext.ux.PageSizePlugin()]

    });

cis.repository.stockorder.ListPanel.superclass.constructor.call(this, {
            id : 'list-stockOrder-form-panel',
            collapsible : false,
            region : 'center',
            store : this.dataStore,
            colModel : commCM,
            frame : true,
            // bodyStyle : 'width:100%',
            title : "",

            clicksToEdit :2,
            bbar : pagingbar,
            stripeRows : true,
            autoScroll : true,
            viewConfig : {
                enableRowBody:false
            },
            loadMask : {
                msg : MSG_DATA_LOADING
            },

            width : '100%',
            height : '80%',
            layout : 'fit',
            monitorResize : true,
            doLayout : function() {
                this.setWidth(Ext.get(this.getEl().dom.parentNode)
                        .getSize(true).width);
                Ext.grid.GridPanel.prototype.doLayout.call(this);
            },
            autoShow : true,
            border : false
        });

}

Ext.extend(cis.repository.stockorder.ListPanel, Ext.grid.EditorGridPanel, {
reload : function() {
this.dataStore.load({
params : {
start : 0,
limit : this.myPageSize
},
delay : 750
});
}
});
[/code]

以上是我展现一个表格的代码，现在该怎么办呢？

Answer 1

把表格grid放在panel里。。进行border布局行不行。。。
分别指定 north center south