EXTJS学习

动态创建应用，模型，简单布局。

<script type="text/javascript">

    Ext.require(['*']);
    Ext.onReady(function() {
        //布局
        Ext.QuickTips.init();  
        var viewport = Ext.create('Ext.Viewport', {
           layout: {
               type: 'border',
               padding: 5
           },
           defaults: {
               split: true
           },
           items: [ {
                region: 'west',
                xtype: 'tabpanel',
                title:'system',
                collapsible: true,
                activeTab :0,
                plain: true,
                split: true,
                width: '20%',
                id:'id_menu'
            },{
                region: 'center',
                html: 'center center',
                title: 'Center',
                plain: true,
                xtype: 'tabpanel',
                id:'tab_center',
                minHeight: 80,
                items: [{
                       title: '首页',
                       itemId: 'id_first_page',
                       minWidth: 100,
                       minHeight: 140,  
                   }                
                ]                
           }]
        });
        var loading_mask = new Ext.LoadMask(Ext.getBody(),{
            msg    : "正在操作,请稍后...",
            msgCls : 'z-index:10000;'
        });
    
        //菜单
        var menu_json = eval("("+Ext.get("id_menu_json").getAttribute("value")+")");
        var menu_cmp = Ext.getCmp("id_menu");
        for(var i = 0,p;p=menu_json["apps"][i];i++){
            var app_id = "id_"+p.app_label;
            var app_one = {
                minWidth: 100,
                minHeight: 140,  
                autoScroll:true,
                title:p.app_verbose_name,
                id: "id_"+p.app_label
            };
            //添加到导航菜单
            menu_cmp.add(app_one);
                
            app_one_models = [];
            for(var j=0,q;q=p["app_menu"][j];j++){
                var model_one = {
                    leaf:true,
                    text:q.verbose_name,
                    itemId:"id_"+q.app_label+"_"+q.name,
                    app_label:q.app_label,
                    index:q.index,
                    name:q.name,
                    url:q.url
                };
                app_one_models.push(model_one);
            }
            //添加到应用树中
            var store = Ext.create('Ext.data.TreeStore', {
                root: {
                    expanded: true,
                    children:  app_one_models
                }
            });
            var tbl = Ext.create('Ext.tree.Panel', {
                    store: store,
                    rootVisible: false,
                    minHeight:300,
                    listeners : {  
                    'itemclick' : function(view,data){  
                        var tab_center = Ext.getCmp('tab_center');
                        var raw_data = data.raw;
                        var active_tab = null;
                        for(var k=0,y;y=tab_center.items.items[k];k++){
                            if(y.itemId == data.raw.itemId){
                                active_tab = y;
                                break;
                            }
                        }
                        if(!active_tab){
                            Ext.Ajax.request({
                                "method":"GET",
                                "url":raw_data.url,
                                "beforerequest":function(cnn,opt,eopts){
                                    loading_mask.show();
                                },
                                "requestcomplete":function(cnn,opt,eopts){
                                    loading_mask.hide();
                                },
                                "success":function(resp,opt){
                                    active_tab = tab_center.add({
                                        title: raw_data.text,
                                        html: resp.responseText,
                                        itemId: raw_data.itemId,
                                        closable: true
                                    });
                                    tab_center.setActiveTab(active_tab);
                                    var scripts, scriptsFinder=/<script[^>]*>([\s\S]+)<\/script>/gi;
                                    while(scripts=scriptsFinder.exec(resp.responseText))
                                    {
                                       eval(scripts[1]);
                                    }
                                }
                            }) ;                            
                        }else{
                            tab_center.setActiveTab(active_tab);
                        }
                    }  
                }          
             });   
            Ext.getCmp(app_id).add(tbl);
        }    
    });
</script>