`
zdpxf2012
  • 浏览: 2754 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

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

    博客分类:
  • ext
 
阅读更多
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我就不贴了.
1
4
分享到:
评论

相关推荐

    Ext组件描述,各个组件含义

    **2.6 Grid Panel (Ext.grid.GridPanel)** - **xtype**: `grid` - **功能描述**:Grid Panel 是一个用于展示表格数据的组件。 - **主要用途**:展示结构化数据,支持排序、过滤等功能。 **2.7 Paging Toolbar (Ext...

    extJs xtype 类型

    8. **`treepanel`:** 树型面板组件,用于展示层次结构的数据,通过`Ext.tree.TreePanel`类实现。 9. **`flash`:** Flash组件,用于在页面中嵌入Flash内容,自3.0版本开始支持,通过`Ext.FlashComponent`类实现。 ...

    extjs控件列表

    **Ext.tree.TreePanel** - **描述**: 树型面板,用于展示层次结构的数据。 - **用途**: 文件系统、目录结构的可视化表示。 **Ext.FlashComponent** - **描述**: 用于显示Flash内容的组件(尽管现在已很少使用)。 -...

    ExtJs xtype一览

    - **`treepanel` (Ext.tree.TreePanel)**: 树型面板组件,用于展示层次结构的数据。 - **`flash` (Ext.FlashComponent)**: 自3.0版本开始支持,用于嵌入Flash内容。 - **`grid` (Ext.grid.GridPanel)**: 表格组件,...

    extjs xtype

    16. `tabpanel` - `Ext.TabPanel`:选项卡面板,用于组织内容到不同的选项卡中。 17. `treepanel` - `Ext.tree.TreePanel`:树形面板,展示层次结构的数据。 18. `viewport` - `Ext.ViewPort`:视口组件,用于填充...

    ExtJs组件类的对应表

    10. **`grid`** - `Ext.grid.GridPanel`,表格组件,用于展示数据列表。 11. **`editorgrid`** - `Ext.grid.EditorGridPanel`,可编辑的表格组件,允许用户直接在表格中编辑数据。 12. **`propertygrid`** - `...

    Extjs实用教程

    - **数据存储(Store)**:用于管理和存储表格中的数据,支持多种数据源格式。 - **树控件(Tree Panel)**:用于展示层次结构的数据,如文件系统。 通过以上详细介绍,我们可以看到ExtJS提供了非常丰富的UI组件...

    ExtJS3总结内容

    - `tabpanel`: `Ext.TabPanel` - `treepanel`: `Ext.tree.TreePanel` - `viewport`: `Ext.ViewPort` - `window`: `Ext.Window` - `toolbarcomponents`: `paging`, `toolbar`, `tbbutton`, `tbfill`, `tbitem`, `...

    extjs 项目整理

    - **Loadpanel方法**: 加载面板的方法,可以在加载数据或其他组件时显示一个加载指示器。 #### GridPanel 相关操作 - **GridPanel**: 表格组件,用于展示数据记录的表格形式。 - **CreateColumns**: 创建列,定义...

    Extjs xtype集合

    - **`Class`**: `Ext.grid.GridPanel` - **描述**: 表格组件,用于展示数据。 11. **`editorgrid`:** - **`xtype`**: `editorgrid` - **`Class`**: `Ext.grid.EditorGridPanel` - **描述**: 可编辑的表格组件...

    学习ExtJS Panel常用方法

    - `viewport`: `Ext.ViewPort` - `window`: `Ext.Window` - **Toolbar components**: - `paging`: `Ext.PagingToolbar` - `toolbar`: `Ext.Toolbar` - `tbbutton`: `Ext.Toolbar.Button` (已废弃,使用 `...

Global site tag (gtag.js) - Google Analytics