左右上中下框架界面

 

   var myData1 = [
        ['委托下单']
                     ];
        var store1 = Ext.create('Ext.data.ArrayStore', {
            fields: [
           { name: 'company' }
        ],
            data: myData1
        });
        var grid1 = Ext.create('Ext.grid.Panel', {
            store: store1,
            columnLines: false,
            preventHeader: true,
            columns: [{
                // text     : 'Company Name',
                locked: true,
                width: 150,
                sortable: false,
                dataIndex: 'company'
            }
        ],
            height: 350,
            width: 150,
            //title: 'Locking Grid Column',
            //renderTo: 'grid-example',
            viewConfig: {
                stripeRows: true
            } ,
            listeners: {
                selectionchange: function (model, records)
                {
                    if (records[0])
                    {
                        alert(records[0]);
                        //this.up('form').getForm().loadRecord(records[0]);
                    }
                },
                itemclick: function (model, records)
                {
                    if (records[0])
                    {
                        alert(records[0]);
                        //this.up('form').getForm().loadRecord(records[0]);
                    }
                }
            }
        });
        var myData2 = [
        ['资金查询']
                     ];
        var store2 = Ext.create('Ext.data.ArrayStore', {
            fields: [
           { name: 'company' }
        ],
            data: myData2
        });
        var grid2 = Ext.create('Ext.grid.Panel', {
            store: store2,
            columnLines: false,
            preventHeader: true,
            columns: [{
                // text     : 'Company Name',
                locked: true,
                width: 150,
                sortable: false,
                dataIndex: 'company'
            }
        ],
            height: 350,
            width: 150,
            //title: 'Locking Grid Column',
            //renderTo: 'grid-example',
            viewConfig: {
                stripeRows: true
            },
            listeners: {
                selectionchange: function (model, records)
                {
                    if (records[0])
                    {
                        alert(records[0]);
                        //this.up('form').getForm().loadRecord(records[0]);
                    }
                }
            }
            
        });
        function funitemclick()
        {
            alert('kk');
        }
        Ext.onReady(function ()
        {
            //Viewport布局面板,以下布局为南北布局方式 
            var p = new Ext.container.Viewport({
                layout: "border",         //布局方式占满整个浏览器 
                renderTo: Ext.getBody(), //呈现在整个body 
                items: [
                    {
                        //title: "",
                        frame: true,
                        region: "center",  //呈现在最中间 
                        margin: 3,
                        xtype: 'tabpanel',
                        activeTab: 0,
                        items: [

                        //                        { xtype: "textfield" },
                        //                        { text: "我是中间儿子里面的按钮1", width: 200, xtype: "button" },
                        //                        { text: "我是中间儿子里面的按钮2", width: 200, xtype: "button" },
                        {title: '下单', html: ' <iframe name="iframeCenter" scrolling="auto" frameborder="0" width="100%" height="650" src="/Order/DoXHOrder"> </iframe>' },
                         { title: '使用帮助', html: 'The first tab\'s content. Others may be added dynamically' }
                        ]
                    },
                                    {
                                        title: "我是上面的儿子",
                                        frame: true,
                                        region: "north",  //呈现在北边，即是上边 
                                        height: 100,
                                        collapsible: true //是否可以收缩 
                                    },
                    {
                        title: "导航菜单",
                        frame: true,
                        region: "west", //呈现在西边，即是左边 
                        width: 200,
                        margin: "3 0 3 0",
                        collapsible: true, //是否可以收缩 
                        resizable: true,

                        stateId: 'navigation-panel',
                        id: 'west-panel', // see Ext.getCmp() below
                        split: true,
                        minWidth: 175,
                        maxWidth: 200,
                        animCollapse: true,
                        layout: 'accordion',
                        items: [
                        //{ html: ' <iframe name="iframeLeftMenu" scrolling="auto" frameborder="0" width="100%" height="600" src="/Home/LeftMenu"> </iframe>' }
                                            {
                                            //contentEl: 'grid-example',
                                            items: [grid1],
                                            title: '下单',
                                            iconCls: 'nav' // see the HEAD section for style used
                                        }, {
                                            items: [grid2],
                                            title: '查询',
                                            html: '<p>Some settings in here.</p>',
                                            //items:[grid1],
                                            iconCls: 'info'
                                        }, {
                                            title: '设置',
                                            html: '<p>Some info in here.</p>',
                                            iconCls: 'settings'
                                        }
                            ]
                    },
                    {
                        //                        title: "我是右边的儿子",
                        frame: true,
                        region: "east", //呈现在东边，即是右边 
                        width: 200,
                        margin: "3 0 3 0",
                        items: [
                        { html: ' <iframe name="iframeRightMRS" scrolling="auto" frameborder="0" width="100%" height="600" src="/Home/RightMRS"> </iframe>'}]
                    },
                    {
                        //title: "我是下面的儿子",
                        frame: true,
                        region: "south", //呈现在南边，即是下边 
                        height: 100,
                        items: [
                        { html: ' <iframe name="iframeBottom" scrolling="auto" frameborder="0" width="100%" height="100" src="/Home/BottomInfo"> </iframe>'}]
                    }
                ]
            });

            // grid2.getSelectionModel().select(0);
            // grid2.fireEvent('itemclick', grid2, grid2.getSelectionModel().getLastSelected());

        });