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

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

    楼上的朋友，我觉得单页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出来，供大家研究分享。

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

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

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);

}

你很牛吗

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

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

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

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

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