动态页面加载--重写button
2011-05-25 17:24
337 查看
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.loadMask = new Ext.LoadMask(Ext.getBody(), {msg:"加载中..."});
/**
* author : sumin
* time : 2011-3-28
*（0不可见1可用2不可用）
*
* 将菜单的id作为session的name
* @memberOf {TypeName}
*/
Ext.override(Ext.Button,{
initComponent: Ext.Button.prototype.initComponent.createSequence(function(){
this.on({
beforerender : function(btn){
var buttonResource = {};
for(var i=0;i<ziyuanlist.length;i++){
if(ziyuanlist[i].panelid == btn.id){
buttonResource.panelid = ziyuanlist[i].panelid;
buttonResource.ziyuanzhuangtai = ziyuanlist[i].ziyuanzhuangtai
}
}
if(buttonResource.panelid == btn.id){
btn.hidden = buttonResource.ziyuanzhuangtai == 0 //不可见的状态
btn.disabled = buttonResource.ziyuanzhuangtai == 2//不可编辑的状态
alert(buttonResource.ziyuanzhuangtai)
}
}
});
})
})
/**
* @ author sumin
* @time 2011 3 25
* 需要一个store，加载后台module类
*
*/
zyerp.system.PrimaModuleStore = Ext.extend(Ext.data.JsonStore,{
proxy : new Ext.data.HttpProxy({
url: '/zyerp/module/module!loadPrimaModules',
method : "POST"
}),
autoLoad : false,
root : "list", //不要使用Reader，会报TypeError: record is undefined
totalProperty : "total",
idProperty : "id",
fields : [
{ name : "primaModuleId", mapping : "primaModuleId", type : "int" },
{ name : "panelId", mapping : "panelId", type : "string" },
{ name : "name", mapping : "name", type : "string" },
{ name : "visible", mapping : "visible", type : "boolean" },
{ name : "icon", mapping : "icon", type : "string" },
{ name : "orderNum", mapping : "orderNum", type : "int" },
{ name : "resources", mapping : "resources", type : "array" }
],
constructor : function(conf) {
conf = conf || {};
Ext.applyIf(conf, this);
zyerp.system.PrimaModuleStore.superclass.constructor.call(this,
conf
);
}
});
/**
* @auther sumin
* @time 2011 3 25 21:59
* 单击事件 导航树节点单击出后加载相应界面
* contentPanel 分成每一个window的center
*/
zyerp.system.moduleHandler = function (module, contentPanel){
//加载的界面放置到contentPanel中
if(Ext.getCmp(module.panelid)){
contentPanel.setActiveTab(Ext.getCmp(module.panelid));
}else{
if(! module.jsfile) return;
Ext.loadMask.show();
Ext.Ajax.request({
url : module.jsfile,
success : function(response) {
eval(response.responseText);
var tab = Ext.getCmp(module.panelid);
tab.show();
contentPanel.add(tab);
contentPanel.doLayout(true);
contentPanel.setActiveTab(tab);
Ext.loadMask.hide();
},
failure : function(response) {
Ext.MessageBox.alert("错误", "系统加载失败,请稍后重试或联系管理员.");
Ext.loadMask.hide();
}
});
}
}
/**
* author 苏民
* time 2011-3-25
* 导航树所在的panel
*/
zyerp.system.oERPPanel = new Ext.Panel({
title : "功能列表",
region : "west",
width : 180,
height : 300,
layout : 'accordion',
collapsible : true,
layoutConfig : {
activeOnTop : false,
animate : false
},
listeners : {
afterrender : function() {
zyerp.system.moduleStore.load();
}
}
});
/**
* author : sumin
* time : 2011-3-25
* 导航树
* @memberOf {TypeName}
*/
zyerp.system.navigaterTree = Ext.extend(Ext.tree.TreePanel,{
split : true,
width : 180,
autoLoad : false,
autoScroll : true,
rootVisible : false,
module : null,
initComponent : function(){
var oThis = this;
this.loader = new Ext.tree.TreeLoader({
dataUrl : "/zyerp/resource/resource!loadNavigaterTreeNode",
method : "post",
listeners : {
beforeload : function(treeloader,node){
//所在的panel
this.baseParams.moduleId = oThis.module.primaModuleId
this.baseParams.nodeId = node.id;
},
loadexception: function(oThis, node, response) {
alert(Ext.util.JSON.encode(response));
}
}
});
/* 根节点 */
this.root = new Ext.tree.AsyncTreeNode({
id : "0",
text : "客户目录",
expanded : true,
leaf : false
});
zyerp.system.navigaterTree.superclass.initComponent.call(this);
}
})
/**
* @author sumin
* @time 2011 3 25
* 实现erp.sys.PrimaModuleStore 监听store 的load事件
* 监听的过程中，将导航栏的菜单画出
*/
zyerp.system.moduleStore = new zyerp.system.PrimaModuleStore({
listeners: {
beforeload : function(s,opt){
s.loadMask = new Ext.LoadMask(zyerp.system.oERPPanel.body,{
msg : "正在加载……"
})
s.loadMask.show();
},
load : function(s, records, options){
s.each(function(r){
//获得模块
if(!r) return;
var module = r.data;
//创建一个panel
//将panel放置在界面上一个window的导航panel中
//加载该module的submodules
//将加载的submodules放置成一棵树
//设置树节点的单击事件：加载对应的界面
var primaPanel = new zyerp.system.navigaterTree({
title : module.name,
module : module,
listeners : {
expand : function() {
this.doLayout();// 重新布局
},
click : function(node,e){
if(node.isLeaf()){
var module = {};
module.jsfile = node.attributes.jsfile;
module.panelid = node.attributes.panelid;
zyerp.system.moduleHandler(module,zyerp.system.oContent)
}
}
}
});
zyerp.system.oERPPanel.add(primaPanel)
primaPanel.doLayout();
})
zyerp.system.oERPPanel.doLayout();
s.loadMask.hide();
}
}
})
/**
* author : sumin
* time : 2011-3-25
* 导航树节点单击的js在这个tabpanel中渲染
* @param {Object} t
* @param {Object} p
*/
zyerp.system.oContent = new Ext.TabPanel({
region : "center",
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
defaults: {autoScroll:true},
plugins: new Ext.ux.TabCloseMenu(),
listeners : {
'tabchange': function(t, p) {
t.doLayout();
}
}
})
/**
* author : sumin
* time : 2011-3-25
* 我的工作台窗口
*/
zyerp.system.oDeskWin = new Ext.Window({
title: "我的工作台",
x: 20,
y: 20,
resizable: false,
minimizable: true,
maximizable: true,
width: 200,
height: 280,
layout : "border",
items:[zyerp.system.oERPPanel,zyerp.system.oContent]
});
zyerp.system.oDeskWin.show();
})
Ext.QuickTips.init();
Ext.loadMask = new Ext.LoadMask(Ext.getBody(), {msg:"加载中..."});
/**
* author : sumin
* time : 2011-3-28
*（0不可见1可用2不可用）
*
* 将菜单的id作为session的name
* @memberOf {TypeName}
*/
Ext.override(Ext.Button,{
initComponent: Ext.Button.prototype.initComponent.createSequence(function(){
this.on({
beforerender : function(btn){
var buttonResource = {};
for(var i=0;i<ziyuanlist.length;i++){
if(ziyuanlist[i].panelid == btn.id){
buttonResource.panelid = ziyuanlist[i].panelid;
buttonResource.ziyuanzhuangtai = ziyuanlist[i].ziyuanzhuangtai
}
}
if(buttonResource.panelid == btn.id){
btn.hidden = buttonResource.ziyuanzhuangtai == 0 //不可见的状态
btn.disabled = buttonResource.ziyuanzhuangtai == 2//不可编辑的状态
alert(buttonResource.ziyuanzhuangtai)
}
}
});
})
})
/**
* @ author sumin
* @time 2011 3 25
* 需要一个store，加载后台module类
*
*/
zyerp.system.PrimaModuleStore = Ext.extend(Ext.data.JsonStore,{
proxy : new Ext.data.HttpProxy({
url: '/zyerp/module/module!loadPrimaModules',
method : "POST"
}),
autoLoad : false,
root : "list", //不要使用Reader，会报TypeError: record is undefined
totalProperty : "total",
idProperty : "id",
fields : [
{ name : "primaModuleId", mapping : "primaModuleId", type : "int" },
{ name : "panelId", mapping : "panelId", type : "string" },
{ name : "name", mapping : "name", type : "string" },
{ name : "visible", mapping : "visible", type : "boolean" },
{ name : "icon", mapping : "icon", type : "string" },
{ name : "orderNum", mapping : "orderNum", type : "int" },
{ name : "resources", mapping : "resources", type : "array" }
],
constructor : function(conf) {
conf = conf || {};
Ext.applyIf(conf, this);
zyerp.system.PrimaModuleStore.superclass.constructor.call(this,
conf
);
}
});
/**
* @auther sumin
* @time 2011 3 25 21:59
* 单击事件 导航树节点单击出后加载相应界面
* contentPanel 分成每一个window的center
*/
zyerp.system.moduleHandler = function (module, contentPanel){
//加载的界面放置到contentPanel中
if(Ext.getCmp(module.panelid)){
contentPanel.setActiveTab(Ext.getCmp(module.panelid));
}else{
if(! module.jsfile) return;
Ext.loadMask.show();
Ext.Ajax.request({
url : module.jsfile,
success : function(response) {
eval(response.responseText);
var tab = Ext.getCmp(module.panelid);
tab.show();
contentPanel.add(tab);
contentPanel.doLayout(true);
contentPanel.setActiveTab(tab);
Ext.loadMask.hide();
},
failure : function(response) {
Ext.MessageBox.alert("错误", "系统加载失败,请稍后重试或联系管理员.");
Ext.loadMask.hide();
}
});
}
}
/**
* author 苏民
* time 2011-3-25
* 导航树所在的panel
*/
zyerp.system.oERPPanel = new Ext.Panel({
title : "功能列表",
region : "west",
width : 180,
height : 300,
layout : 'accordion',
collapsible : true,
layoutConfig : {
activeOnTop : false,
animate : false
},
listeners : {
afterrender : function() {
zyerp.system.moduleStore.load();
}
}
});
/**
* author : sumin
* time : 2011-3-25
* 导航树
* @memberOf {TypeName}
*/
zyerp.system.navigaterTree = Ext.extend(Ext.tree.TreePanel,{
split : true,
width : 180,
autoLoad : false,
autoScroll : true,
rootVisible : false,
module : null,
initComponent : function(){
var oThis = this;
this.loader = new Ext.tree.TreeLoader({
dataUrl : "/zyerp/resource/resource!loadNavigaterTreeNode",
method : "post",
listeners : {
beforeload : function(treeloader,node){
//所在的panel
this.baseParams.moduleId = oThis.module.primaModuleId
this.baseParams.nodeId = node.id;
},
loadexception: function(oThis, node, response) {
alert(Ext.util.JSON.encode(response));
}
}
});
/* 根节点 */
this.root = new Ext.tree.AsyncTreeNode({
id : "0",
text : "客户目录",
expanded : true,
leaf : false
});
zyerp.system.navigaterTree.superclass.initComponent.call(this);
}
})
/**
* @author sumin
* @time 2011 3 25
* 实现erp.sys.PrimaModuleStore 监听store 的load事件
* 监听的过程中，将导航栏的菜单画出
*/
zyerp.system.moduleStore = new zyerp.system.PrimaModuleStore({
listeners: {
beforeload : function(s,opt){
s.loadMask = new Ext.LoadMask(zyerp.system.oERPPanel.body,{
msg : "正在加载……"
})
s.loadMask.show();
},
load : function(s, records, options){
s.each(function(r){
//获得模块
if(!r) return;
var module = r.data;
//创建一个panel
//将panel放置在界面上一个window的导航panel中
//加载该module的submodules
//将加载的submodules放置成一棵树
//设置树节点的单击事件：加载对应的界面
var primaPanel = new zyerp.system.navigaterTree({
title : module.name,
module : module,
listeners : {
expand : function() {
this.doLayout();// 重新布局
},
click : function(node,e){
if(node.isLeaf()){
var module = {};
module.jsfile = node.attributes.jsfile;
module.panelid = node.attributes.panelid;
zyerp.system.moduleHandler(module,zyerp.system.oContent)
}
}
}
});
zyerp.system.oERPPanel.add(primaPanel)
primaPanel.doLayout();
})
zyerp.system.oERPPanel.doLayout();
s.loadMask.hide();
}
}
})
/**
* author : sumin
* time : 2011-3-25
* 导航树节点单击的js在这个tabpanel中渲染
* @param {Object} t
* @param {Object} p
*/
zyerp.system.oContent = new Ext.TabPanel({
region : "center",
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
defaults: {autoScroll:true},
plugins: new Ext.ux.TabCloseMenu(),
listeners : {
'tabchange': function(t, p) {
t.doLayout();
}
}
})
/**
* author : sumin
* time : 2011-3-25
* 我的工作台窗口
*/
zyerp.system.oDeskWin = new Ext.Window({
title: "我的工作台",
x: 20,
y: 20,
resizable: false,
minimizable: true,
maximizable: true,
width: 200,
height: 280,
layout : "border",
items:[zyerp.system.oERPPanel,zyerp.system.oContent]
});
zyerp.system.oDeskWin.show();
})
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 动态加载导航树、重写button控制button的状态
- android: 静态XML和动态加载XML混合使用，以及重写Layout控件
- jQuery页面滚动图片等元素动态加载实现
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- 在ASPX页面中动态加载ASCX控件，并取其值和给其赋值
- 使用Selenium来抓取动态加载的页面
- 动态加载控件UserControl到页面上：视图状态问题
- 自定义CursorAdapter,实现ListView中动态加载button,和点击事件
- 页面滚动动态加载数据，页面下拉自动加载内容 jquery
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- jQuery页面滚动图片等元素动态加载实现
- Delphi动态的修改WebBrowser加载页面的内容
- 使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
- jsp页面动态加载form标签的action地址和里面的submit按钮事件
- ASP.NET动态加载用户控件的页面生成过程
- 页面滚动动态加载数据,页面下拉自动加载内容
- 【Android开发学习44】android: 静态XML和动态加载XML混合使用，以及重写Layout控件
- 页面滚动图片等元素动态加载实现本质
- 通过使页面动态加载不同CSS实现多界面
- 根据浏览器语言，页面动态加载对应的js文件