EXT系统布局

扩展Ext.viewport，形成一个基于iframe的框架布局

代码如下：

 

Ext.ux.IndexPage = Ext.extend(Ext.Viewport, {
 welcomeUrl: "<iframe id='welcomeFrame' name='welcomeFrame' src='welcome.jsp' width='100%' height='100%' frameborder=0>",
 topUrl: "<iframe id='topFrame' name='topFrame' src='top.jsp' width='100%' height='100%' frameborder=0>",
 layout: "border",
 menuTree: new Ext.tree.TreePanel({
    title: "菜单树",
    autoScroll: true,
    border: false,
    loader: new Ext.tree.TreeLoader({
       dataUrl: "getMenu.action"
      }),
    root: new Ext.tree.AsyncTreeNode({
       id: "0",
       text: "菜单"
      }),
    animate: true,
    enableDD: false,
    rootVisible: true
   }),
 mainTab: new Ext.TabPanel({
    plain: false,
    activeTab: 0,
    region: "center",
    items: [{
       title: "欢迎",
       closable: false,
       html: this.welcomeUrl
      }]
   }),
 treeClick: function(node)
 {
  if (node.leaf)
  {
   var pageUrl = node.attributes.linkUrl;
   if (pageUrl == undefined)
   {
    return;
   }
   if (pageUrl == "")
   {
    return;
   }
   var frameId = "frame_" + node.id;
   var sheetId = "ext_sheet_" + frameId;

   var oframe = Ext.get(frameId);
   if (oframe == null)
   {
    var sframe = "<iframe id='" + frameId + "' name='" + frameId
      + "' src='" + pageUrl
      + "' width='100%' height='100%' frameborder=0>";
    this.mainTab.add({
       id: sheetId,
       title: node.text,
       closable: true,
       html: sframe
      });
   }
   else
   {
    oframe.dom.src = pageUrl;
   }

   var sheet = this.mainTab.getItem(sheetId);
   this.mainTab.setActiveTab(sheet);
  }
 },
 loadException: function(This, node, response)
 {
  var status = response.status;
  var text = response.responseText;

  switch (status)
  {
   case 404 :
    alert("请求url不可用。");
    break;
   case 200 :
    if (text.length > 0)
    {
     Ext.MessageBox.alert("错误", text);
    }
    break;
   default :
    Ext.MessageBox.alert("错误", status + "," + text);
    break;
  }
 },

 item2: new Ext.Panel({
    title: 'Accordion Item 2',
    html: '&lt;empty panel&gt;',
    cls: 'empty'
   }),

 item3: new Ext.Panel({
    title: 'Accordion Item 3',
    html: '&lt;empty panel&gt;',
    cls: 'empty'
   }),

 item4: new Ext.Panel({
    title: 'Accordion Item 4',
    html: '&lt;empty panel&gt;',
    cls: 'empty'
   }),

 item5: new Ext.Panel({
    title: 'Accordion Item 5',
    html: '&lt;empty panel&gt;',
    cls: 'empty'
   }),
 initComponent: function()
 {
  this.items = [{
     region: "north",
     height: 70,
     collapsible: true,
     minSize: 70,
     border: false,
     html: this.topUrl
    }, {
     region: "west",
     title: "管理平台",
     split: true,
     width: 200,
     collapsible: true,
     items: [this.menuTree, this.item2, this.item3, this.item4,
       this.item5],
     layout: "accordion"
    }, {
     region: "center",
     layout: "fit",
     split: true,
     items: [this.mainTab]
    }, {
     region: "south",
     height: 20,
     collapsible: true,
     minSize: 20,
     border: false,
     html: "<img src='resources/images/bottom.jpg' width='100%' height='100%'>"
    }];
  Ext.ux.IndexPage.superclass.initComponent.call(this);
  this.menuTree.on('click', this.treeClick,this);
 }
});
Ext.reg("indexPage", Ext.ux.IndexPage);

 

使用方法：

var viewport = new Ext.ux.IndexPage();