`
zdpxf2012
  • 浏览: 2706 次
  • 性别: 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列表特效(远程加载数据)

    1、Ext版本:3.2.1; 2、运行环境:VS 2008 以上; 3、远程加载数据,数据在程序中生成,无需连接数据库或XML文件; 4、运用Viewport管理页面布局 5、GridPanel的各种功能和特效

    Ext.Viewport布局

    Ext.Viewport、 Ext.TabPanel布局

    tree with tab

    extjs 左边窗口treepanel 菜单与右边窗口tabpanel 交互 var westPanel = Ext.create('Ext.tree.Panel', { title : '菜单', region : 'west', margins : '0 5 0 0', width : 200, store : store1, ...

    简单的EXT加载数据的例子

    用EXT做的生成树的例子

    Ext Designer入门3-Viewport和Border布局

    本节介绍 Ext的Border布局以及如何创建一个Viewport。 1、Viewport介绍: Viewport 是一类特殊的容器。它创建后会自动填充到整个页面区域,并能自动适应页面缩放。一般作为用用程序全局容器使用。 2、Border布局...

    一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建Viewport(2)

    一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建Viewport(2)源代码

    ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页

    ExtJs 学习笔记基础篇 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)

    Ext之ViewPort

    NULL 博文链接:https://kai2008.iteye.com/blog/350192

    EXT2.0中文教程

    TabPanel使用autoLoad加载的页面中的js脚本没有执行 B. 修改日志 C. 后记 C.1. 2007年12月5日,迷茫阶段 C.1.1. 仇恨 C.1.2. 反省 C.2. 关于ext与dwr整合部分的讨论 C.3. 怎么看文档附件里的范例 D. 贡献者列表 ...

    Ext 开发指南 学习资料

    TabPanel使用autoLoad加载的页面中的js脚本没有执行 A.9. 有关grid的一些小问题 A.9.1. 如何让grid总所有的列都支持排序 A.9.2. 修改一个grid的ColumnModel和Store A.9.3. 动态为ds添加参数baseParams A.10. 有关...

    ext2.0 layout布局(使用viewport)

    ext2.0 layout布局(使用viewport),将其部署到php服务器上,可以查看效果:适合一般的应该工作界面,有滑动菜单和树形菜单等,初步实现了一个不错的应用视图框架

    Ext Js权威指南(.zip.001

    7.5.5 ext.data.treestore加载数据的方法 / 354 7.5.6 store的配置项 / 358 7.5.7 store的分页 / 359 7.5.8 store的排序:ext.util.sorter与ext.util.sortable / 360 7.5.9 store的过滤:ext.util.filter / 363...

    Ext3.0的个人笔记及例子

    Ext3.0的个人笔记及例子,包括按钮,表单及验证,panel,window,TabPanel,treePanel,formPanel,gridPanel,viewPort等主要控件

    EXT教程EXT用大量的实例演示Ext实例

    TabPanel使用autoLoad加载的页面中的js脚本没有执行 B. 修改日志 C. 后记 C.1. 2007年12月5日,迷茫阶段 C.1.1. 仇恨 C.1.2. 反省 C.2. 关于ext与dwr整合部分的讨论 C.3. 怎么看文档附件里的范例 D. 贡献者...

    extjs4.0 实现了主页面框架 动态菜单 例子 表单 ajax

    extjs4.0 实现了主页面框架(主框架使用Ext.Viewport,banner使用Ext.panel.Panel,通过toolbar来放置按钮),包括左侧动态菜单实现(采用Ext.tree.Panel)动态从数据库加载数据来显示菜单(后台代码也在了通过json...

    精通JS脚本之ExtJS框架.part1.rar

    本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

    html meta viewport属性说明

    手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤 到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过...

    viewport响应式模板

    viewport响应式模板

    精通JS脚本之ExtJS框架.part2.rar

    本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

Global site tag (gtag.js) - Google Analytics