左右上中下框架界面

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());

});