欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ext的Viewport,点击左边的tree菜单,让右边tabpanel中的gridpanel列表数据重新加载

程序员文章站 2022-06-11 08:22:40
...
var Banner = new Ext.Panel({
region: 'north',
       title: '用户管理系统',
        collapsible: true,
        html: '<embed src="${path}/resource/flash/welcome.swf" width="100%" height="100%" play="true” loop="true" quality="high">',
        split: true,
        height: 150,
        minHeight: 100,
        contentEl : 'north',
});
//左边功能树
var MenuTree = new Ext.tree.TreePanel({
region: 'west',
        contentEl : 'west',
        collapsible: true,
        title: '选择功能',
        xtype: 'treepanel',
        width: 200,
        autoScroll: true,
        animate : true,// 动画效果
        split: true,
        loader: new Ext.tree.TreeLoader(),
        root: new Ext.tree.AsyncTreeNode({
            text:'主功能',
    expanded: false,
            children: [{
                text: '用户管理',
                leaf: true,
                listeners :{
                'click':function(node, event){
                   event.stopEvent();
                        var n = MainPanel.getComponent(node.id);
                        if (!n) {
                        var p = new gridPanel();
                        p.id = node.id;
                        p.title = node.text;
                        n = MainPanel.add(p);
                }
                MainPanel.setActiveTab(n);
             store/load();//加上这句就ok了.怎么刷新打开的formpanel?
             }
                }
             }, {
                text: '三',
                leaf: true,
                listeners :{
                'click':function(node, event){
                   event.stopEvent();
        var n = MainPanel.getComponent(node.id);
        if (!n) {
        var p = new fnPanel();
        p.id = node.id;
        p.title = node.text;
        n = MainPanel.add(p);
        }
        MainPanel.setActiveTab(n);
                    },
                    activate:function(){  
                  this.getUpdater().refresh();  
                } 
                }
            }]
      }),
    rootVisible: true
});
//右边布局
var MainPanel = new Ext.TabPanel({
//id : 'home',
        region: 'center',
        contentEl : 'center',
        autoDestroy : false,
        activeTab: 0,
        listeners : {
          remove : function(tp,c){c.hide();}
        },
items:[{
id:'homePage',
title:'首页',
autoScroll:true
//,html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="login.jsp"></iframe></div>'
}]
    });
var FooterPanel=new Ext.Panel({
region: 'south',
        contentEl : 'south',
        html: '<h1 class="x-panel-header">copyright2012</h1>',
        autoHeight: true,
        border: false,
        margins: '0 0 5 0'
});
//创建总框架页面
new Ext.Viewport({
    layout: 'border',
    items: [Banner,MenuTree, MainPanel,FooterPanel]
});
//通过扩展来构建要创建的面板
fnPanel = Ext.extend(Ext.Panel, {
closable:true,
autoScroll:true,
layout:'fit',
//autoLoad:{url:url,scripts:true},  
//创建面板内容
createFormPanel:function() {
return new Ext.form.FormPanel({
buttonAlign:'center',
labelAlign:'right',
frame:false,
bodyBorder:false,
bodyStyle:'padding:25px',
items:[{
xtype:'textfield',
fieldLabel:'用户名',
width:350,
name:'username'
},{
xtype:'textfield',
fieldLabel:'密 码',
width:350,
name:'password'
}],
buttons:[{text:'登陆'}, {text:'取消'}]
});
},
initComponent:function() {
fnPanel.superclass.initComponent.call(this);
this.fp = this.createFormPanel();
this.add(this.fp);
}
});
gridPanel = Ext.extend(Ext.Panel, {
closable:true,
autoScroll:true,
layout:'fit',
//创建面板内容
createFormPanel:function() {
return grid;
},
//重装控件初始化函数,在该函数中完成面板中内容的初始化
initComponent:function() {
gridPanel.superclass.initComponent.call(this);
this.fp = this.createFormPanel();
this.add(this.fp);
}});
下边的gridpanel和store我就不贴了.