日历形式实现解析

一、模块主页

进入模块到达起始页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);  

 

 

二、处理页面

待续...

本文出自 “专注J2EE系列规范下的..” 博客，转载请与作者联系！