打造Ext2.0模块化单页系统Demo

打造Ext2.0模块化单页系统（一）
打造Ext2.0模块化单页系统（二）

做了一个简单的Demo,这个Demo演示了用树形菜单动态加载模块。和上面2篇文章介绍的略微有些不同，动态加载模块类后并不立即实例化，而是把模块类付给主程序类的一个属性变量后再实例化，当TabPanel中的Tab被关闭再次打开时，需要对相应的模块类再次实例化。
此Demo需要Web服务器支持。

评论

39 楼 erikchang 2009-04-11  

goodboy 写道

基本能够运用了，使用起来确实比使用iframe强多了，感谢搂主啊！
只是感觉不能加载Viewport，布局有点局限。

初次接触Ext，我很欣喜，一直用的很长时间，后台慢慢的就不用了，Ext的主要作用在于漂亮的美观，中大型系统中不建议使用ext来写，会带来很多的麻烦，程序员一边要关注后台的代码一边还要关注前台的ext代码，这样是吃不消的，而且目前国内的状况，既要有后台程序员又有前台UI程序员的不多，实际上很多人都在一个人写，包括我自己，这样的话我宁愿找一个美工，自己只关注后台，既省事又不必Ext差，好的美工做的web页面是Ext远远比不了的！

38 楼 scaven 2009-04-11  

//定义程序的命名空间   
Ext.namespace('demo');   
demo.module = function(main){ 
    this.main = main;   
    this.init();   
}   
  
Ext.extend(demo.module, Ext.util.Observable, {   
    init : Ext.emptyFn   
});  
demo.app = function(){    
    this.init();
}
Ext.extend(demo.app, Ext.util.Observable, {
    init: function(){       
        this.tab1 =  new Ext.Panel({
            title: '模块一',
            id: 'module1',
            layout: 'fit'
        });
        
        this.tab2 =  new Ext.Panel({
            title: '模块二',
            id: 'module2',
            layout: 'fit'
        });

        this.tab3 =  new Ext.Panel({
            title: '模块三',
            id: 'module3',
            layout: 'fit'
        });

		//系统状态栏item
		var date = new Ext.Toolbar.TextItem(new Date().toLocaleDateString() +' 星期'+'日一二三四五六'.charAt(new Date().getDay()));
		var clock = new Ext.Toolbar.TextItem('');	
			
  		this.statusbar = new Ext.Panel({			
			id: 'my-status-panel',
			region:'south',
			margins:'5 5 0 5',
			layout: 'fit',
			bbar: new Ext.StatusBar({
				id: 'my-status',				
				defaultText: '版权信息',
				items: [date,' ',clock]
			}),
				
			listeners: {
				'render': {
					fn: function(){
						Ext.fly(date.getEl().parentNode).addClass('x-status-text-panel').createChild({cls:'spacer'});
						Ext.fly(clock.getEl().parentNode).addClass('x-status-text-panel').createChild({cls:'spacer'});
									
						Ext.TaskMgr.start({
							run: function(){
								Ext.fly(clock.getEl()).update(new Date().format('H:i:s'));
							},
							interval: 1000
						});
					}
				}
			}
		});

        this.body = new Ext.TabPanel({
            region:'center',
            margins:'0 5 0 5',
            autoScroll: true,
            items: [this.tab1, this.tab2, this.tab3]
        });

        var viewport = new Ext.Viewport({
            layout:'border',
            items:[
                new Ext.BoxComponent({region:'north', el:'header', height:60}),
                this.body,
                this.statusbar
            ]
        });

        this.body.on('tabchange', this.tabActive, this);
        this.loadMask = new Ext.LoadMask(this.body.body);
        this.body.activate(this.tab1);
    },
    tabActive: function(p,t){
        if(this[t.id]){
            return false;
        }
        this.loadMask.show();
        Ext.Ajax.request({
            method:'GET',
            url: 'modules/'+t.id+'.js',
            scope: this,
            success: function(response){
                var module = eval(response.responseText);
                this[t.id] = new module(t);
                this.loadMask.hide();
            }
        });
    }
});
Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
Ext.onReady(function(){
    Ext.QuickTips.init();
    myApp = new demo.app();
});

提示：缺少对象。
好像是Ext.Statusbar的问题。
不知如何解决？

37 楼 ja3939 2008-12-03  

我怎么用的时提示 “缺少对象”脚本错误，

就是这一行： model = this[id](tab)，

或者是“加载核心文件失败！”

是怎么回事呢？

36 楼 hany 2008-11-27  

hany 写道

我用类似于楼主的Demo的方式实现了一个系统，但是我用EXT.dataview时，用this.main.doLayout();页面不显示。是不是我还得实现什么方法？

昨天犯晕了。是数据的问题。

35 楼 hany 2008-11-26  

我用类似于楼主的Demo的方式实现了一个系统，但是我用EXT.dataview时，用this.main.doLayout();页面不显示。是不是我还得实现什么方法？

34 楼 shumadp.com 2008-11-12  

pioul 写道

tbar: [{
                iconCls:'btn-save',
                text: '保存',
handler:function(){
this.body.form.submit({
waitMsg:'正在保存。。。',
url:"zcadd.php",
method:'POST',
success:function(){
           
Ext.Msg.alert("提示信息","数据保存成功!");
},
scope:this
});
}
/////////////////////////////
在添加表单那个模块中我增加了保存的hanler，
为什么this.body.form.submit这一句会提示错误this.body is undefined？？

把this.body 改成一个自己定义的变量就ok了，如：var formbody = 。。。。，然后 formbody.form.submit

33 楼 pioul 2008-10-30  

tbar: [{
                iconCls:'btn-save',
                text: '保存',
handler:function(){
this.body.form.submit({
waitMsg:'正在保存。。。',
url:"zcadd.php",
method:'POST',
success:function(){
           
Ext.Msg.alert("提示信息","数据保存成功!");
},
scope:this
});
}
/////////////////////////////
在添加表单那个模块中我增加了保存的hanler，
为什么this.body.form.submit这一句会提示错误this.body is undefined？？

32 楼 379548695 2008-10-28  

goodboy 写道

弱弱的问一句：能不能增加模块变量，用于模块js，比如我想取自定义的node.attributes.ids值用在模块js中，如何作？

修改这个方法就可以

//点击菜单方法(node:被点击的节点)
    clickTree: function(node){
        //如果节点不是叶子则返回
        if(!node.isLeaf()){   
            return false;   
        }
        
        var id = 'tab-' + node.attributes.ids;
        var tab = Ext.getCmp(id);
        if(!tab){
            tab = this.body.add(new Ext.Panel({
                id: id,
                title: node.text,
                layout: 'fit',
                closable: true
            }));
            this.body.setActiveTab(tab);
            //加载模块
            this.loadModel(node.attributes.ids,tab);
        }else{
            this.body.setActiveTab(tab);
        }
    },

31 楼 laitaogood 2008-10-21  

netbox 写道

我在试验 的时候也发现grid的分页好像不行，也是一次把所有数据都取出来了，但是页码却在变换

不是一次性取出所有的数据的,它是根据你提供的start和limit等参数来获取数据的,你每点一次分页栏的下一页按钮,它就会请求一次,返回你所需要的JSON格式的记录集.我是动态的从后台返回数据的.

30 楼 netbox 2008-10-17  

不是一次全取出，而是分页没有起作用，比如30条，limit：10，pagesize：10，但是浏览时每页都是30条

29 楼 vicksong 2008-10-15  

oldmht 写道

单页系统我也正在做，目前还没有遇到很致命的问题，下面是一个很简单的公共调用模块：选择分类，大家看看这样的思路是不是有问题

如果使用普通方式提交，如window.form1.submit，因为采用单页系统，所有的界面都是DIV中的，提交时，直接提交到TOP了，好象没有什么办法提交到DIV中呀。

28 楼 baoshan 2008-10-15  

不用一次把所有的数据都取出来吧,那些太点资源了,用到什么数据取什么数据

27 楼 netbox 2008-10-15  

我在试验 的时候也发现grid的分页好像不行，也是一次把所有数据都取出来了，但是页码却在变换

26 楼 xt95 2008-08-25  

谢谢！正在研究extjs，正好学习！

25 楼 micki 2008-07-27  

lims 写道

自寻死路。
做一个简单的DEMO，用one page one application，这样的例子到处有，做一个稍复杂的系统看看，看看你的JS会要多写多少，以前很多可以用JAVA封装的JS，现在可能因为ID的问题，现在每个页面不得不都写一个，哎......
整个EXTJS中，只是JS有一点点的小BUG，哪怕是用户输了一个单引号或双引号的JSON错误，后果就是页面不再输出，目前我们在原系统中替换了几个功能模块，在实际应用中，产生了很多的问题，用的还是iframe，更不要说是什么one page one application了。

你很牛吗

24 楼 oldmht 2008-07-25  

单页系统我也正在做，目前还没有遇到很致命的问题，下面是一个很简单的公共调用模块：选择分类，大家看看这样的思路是不是有问题

function GoodsClassSelect(ValueField, TextField)
{
    var treeClick = function(node,e)
    {
        var btn = Ext.getCmp("btnGoodsClassSelectOk");
        if (node.id == "root")
        {
            btn.disable();
            btn.node = null;
        }
        else
        {
            btn.enable();
            btn.node = node;
        }
    }

    var window = new Ext.Window({
        manager:WindowMgrTools,
        title:"请选择物料分类",
        width:300,
        height:500,
        resizable: false,
        maximizable:false,
        minimizable:false,
        stateful:false,
        closable:true,
        closeAction:'close',
        bodyStyle:'background-color:#FFFFFF;',
        modal:true,
        plain:false,
        layout:'fit',
        autoScroll:true,
        items:new Ext.tree.TreePanel({
            animate:false,
            border:false,
            rootVisible:true,
            loader:new Ext.tree.TreeLoader({
	            dataUrl:'GoodsClass/GetAllTree.aspx',
	            requestMethod:'GET',
	            listeners:{
	                loadexception:function(loader,node,response){Ext.Msg.alert('获取树节点错误！',response.responseText);}
	            }
            }),
            root:new Ext.tree.AsyncTreeNode({
                id:'root',
                text: '物料分类树',
                draggable:false,
                expanded:false,
                leaf:false
            }),
            autoHeight:true,
            autoWidth:true,
            listeners:{
                click:function(node,e)
                {
                    treeClick(node,e);
                },
                dblclick:function(node,e)
                {
                   var btn = Ext.getCmp("btnGoodsClassSelectOk");
                   if (!btn.disabled) btn.handler();
                },
                append:function(t,nodeParent,node)
                {
                    node.setText(node.text + " (" + node.id + ")");
                },
                render:function(tree)
                {
                    tree.root.expand(true,false,function(){
                        setTimeout(function(){
                            tree.root.collapseChildNodes(true);
                            setTimeout(function(){
                                var nodeSelect = tree.getNodeById(ValueField.getValue());
                                if (nodeSelect){
                                    tree.expandPath(nodeSelect.getPath(),"id",function(){
                                        nodeSelect.select();
                                        //tree.fireEvent("click",nodeSelect,event);
                                        treeClick(nodeSelect);
                                        
                                    });
                                }
                            },50);
                        },50);
                    });
                },
                append:function(tree, nodeParent, node, index)
                {
                    node.textOld = node.text;
                    node.setText(node.text + " (" + node.id + ")");
                }
            }
        }),
        buttons:[{
            id:"btnGoodsClassSelectOk",
            text:"确定",
            disabled:true,
            handler:function(){
                if (!this.node) return false;
                if (TextField) TextField.setValue(this.node.textOld);
                if (ValueField) ValueField.setValue(this.node.id);
                window.close();
            }
        }]
    });
    window.show(null,function(){
        
    },null);

}

23 楼 oldmht 2008-07-25  

znjq 写道

改写Element的update函数，缓存已经加载过的js，css地址，下次判断就可以了。单页面系统这里面有个比较严重的问题，ext的内存泄露，这个需要自己处理bug。

Ext内存泄漏似乎是在事件中直接引用的全局函数的问题，试一下用eventName:function(){}的方式应该能解决

22 楼 rocker96 2008-07-24  

    楼上的朋友，我觉得单页demo还是有可行之处，但也要考虑与iframe结合一起用，我现在也在把系统从iframe转成楼主demo的单页系统，中间也遇到一些问题，比如你的ID问题，每个单页需要配置一个ID值，但一定的需求下可以用Ext.getCmp(ID)进行全局调用，还有renderer、hanler调用this方法时需要加上.createDelegate(this)才能调用，例如：
listeners:{update:
     function(ds,record,name,operation){
    this.onCellUpdated(ds,record,name,operation);
    }.createDelegate(this)
}

    但单页系统的效率实在非常吸引眼球，如果用iframe，快速点击两个页面，页面没有加载完就转到另一个tab，会出现控件加载不完整，需要刷新页面的情况，实在烦人，还有就是加载ext-all.js，即使使用了预压缩的方法，压缩成ext-all-gzjs，缩到100多K，但每打开一个页面都要调用一次，实在是令人生畏。单页系统可以动态加载，虽然写多一点js，但是如果你从整体思路考虑把功能模块化、控件化，可以实现模块重用、控件重用，将大大提高你开发的效率。
   
    楼主提出了一个实现demo，我觉得大家可以以这个思路去努力，实现自己的系统框架，并把自己解决的问题share出来，供大家研究分享。

21 楼 lims 2008-07-23  

自寻死路。
做一个简单的DEMO，用one page one application，这样的例子到处有，做一个稍复杂的系统看看，看看你的JS会要多写多少，以前很多可以用JAVA封装的JS，现在可能因为ID的问题，现在每个页面不得不都写一个，哎......
整个EXTJS中，只是JS有一点点的小BUG，哪怕是用户输了一个单引号或双引号的JSON错误，后果就是页面不再输出，目前我们在原系统中替换了几个功能模块，在实际应用中，产生了很多的问题，用的还是iframe，更不要说是什么one page one application了。

20 楼 lx0364007 2008-07-23  

感谢楼主的demo，让我这个新手学到很多，现在想问一下demo中grid分页的问题：
    因为原demo的grid.txt中只有10条数据，因此每页显示10条数据的话分页功能体现不出来。于是我将数据增加到30条，grid.txt中改为total:30，仍然要每页显示10条数据，运行结果是底层工具栏会出现page1至page3，但grid中每一页都显示出全部的30条数据，请问如何解决该问题，谢谢！