日历形式实现解析 推荐

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

二、处理页面
待续...