一、模組主頁
進入模組到達起始頁index.html，含有一個Ext的TabPanel，其內部為Ext.ui擴充套件的mpanel，並初始化載入一個處理讀取並格式化過的資料，其內容為html格式，展示資料。
 
service.js
Ext.BLANK_IMAGE_URL = `../ext/resources/images/default/s.gif`;
var tab_win;
var grid;
var xpanel
var mpanel = Ext.ux.ManagedIframePanel;
var CONTAINER;
Ext.onReady(function() {
  Ext.QuickTips.init();
  var grid_width;
  var grid_height;
  if (Ext.isIE6) {
    grid_width = document.body.clientWidth – 2;
    grid_height = document.body.clientHeight – 2;
  } else if (Ext.isIE7) {
    grid_width = document.documentElement.clientWidth – 2;
    grid_height = document.documentElement.clientHeight – 2;
  } else {
    grid_width = self.innerWidth – 2;
    grid_height = self.innerHeight – 2;
  }
    
  // toobar for grid
  var toolbar = new Ext.Toolbar([`->`, {
  `text` : `重新整理`,
  iconCls : `fresh`,
  handler : reload
  }]);

    xpanel = new mpanel ({    
      title : title,
      tbar : toolbar,
      closable : false,
      frameBorder: 0,
      height : grid_height,
      width : grid_width,
      loadMask : {
      msg : `正在載入新增頁面…`,
      disable : false
    },        
    defaultSrc:url1
  });    
    
  tab_win = new Ext.TabPanel({
    renderTo : `x-like18-calendar-grid`,
    activeTab : 0,
    height : grid_height,
    width : grid_width,
    frame : true,
    plain : false,
    items : [xpanel]
  });
  CONTAINER = tab_win;    
  function reload(){    
    xpanel.setSrc(url1);    
  }
});

function reback(dat.){    
  if(dat. != “”) {
    xpanel.setSrc(url2+dat.);    
  } else {
    xpanel.setSrc(url1);    
  }
}

 
生成的頁面中進行處理資料時候呼叫父頁面的函式：
定義引數
var $status = “title:`處理訂單`,  closable : true,loadMsk : {  msg:`正在載入新增頁面…`,  disable : false  },”;
呼叫父頁面operate函式
$_tmp [`@OPERATE@`] = `<button .click=“parent.operate(`dfdf`.$item [`order_no`].“,{`.$this->status.`defaultSrc:`../../backyardorderflow/?Command=WorkFlow&order_no=`.$item[`order_no`].`&flow=1`})”>處理</button>`;
 
operate:
function operate(id,config) {
  if (`undefined` === typeof CONTAINER) {
    alert(`沒有定義CONTAINER變數,無法開啟會員資訊頁面!`);
    return;
  }

  var xpanel = Ext.getCmp(id);
  if (xpanel != null) {
    CONTAINER.remove(xpanel);
    xpanel.destroy();
  }
  xpanel = new Ext.ux.ManagedIframePanel(config);
  CONTAINER.add(xpanel);
  CONTAINER.setActiveTab(xpanel);
}

 
實現xpanel的更換，同時載入處理的詳細頁面資訊，這個見二。
defaultSrc:`../../backyardorderflow/?Command=WorkFlow&order_no=`.$item[`order_no`].`&flow=1
 
該頁搜尋功能
單日檢視模式：
利用jquery初始化頁面繫結時間空間到對於ID上，並定義觸發函式進行呼叫相應模組過載頁面資料操作，
$(function(){    
  $(`#today`).datepicker({showOn: “both”, buttonImage: “../datepicker.gif”, buttonImageOnly: true,onSelect:function(){
      var view_day = $(`#today`).val();
      var args = $(`#args`).val();
      $.blockUI(`<img src=“../loading.gif”/>`);
      window.location = args + `&view_day=` + view_day;
  }});
  $(`a`).mousemove(function(){        
      window.status = `XXX後臺管理`;
  });
});
對於超級連結形式的檢視前一天或後一天，則直接進行連結。
 
時間段檢視模式：
與單日模式類似，定義兩個時間輸入點（input），綁上時間控制元件，定義搜尋按鈕，並設定其呼叫函式，函式中呼叫jquery外掛進行頁面跳轉。
$.akModalHideAndRedirect(url);  
 
 
二、處理頁面
待續…