SSH中ExtJS4.0.2学习应用

1、在admin.jsp中引入ExtJS4.0.2的类：

<link rel="stylesheet" type="text/css" href="../ext-4.0.2/resources/css/ext-all.css" /> 
<script type="text/javascript" src="../ext-4.0.2/bootstrap.js"></script>  
<script type="text/javascript" src="../ext-4.0.2/locale/ext-lang-zh_CN.js"></script> 

注意：引入顺序（ext-lang-zh_CN.js须在bootstrap.js后引入），bootstrap.js会根据是否是开发环境判断加载ext-all.js还是ext-all-debug.js。

 

2、admin.js

Ext.Loader.setConfig({enabled:true}); //Ext默认是不开启动态加载的。当引用到其他js类时，需要开启动态加载 
Ext.Loader.setPath('MyApp', '../houtai/js');  //将路径设置为一个命名空间。 
Ext.require('MyApp.views.Viewport');  //加载所需要的类或类库。 
  
Ext.onReady(function() {      
  Ext.create('MyApp.views.Viewport').show(); //ExtJS4是面向对象的，create相当于new一个类对象，实例化一个类。 
});    

 

3、Viewport.js

 

Ext.define('MyApp.views.Viewport', {  //define定义一个类 
    extend: 'Ext.container.Viewport',  //extend 继承自一个父类 
    requires:['MyApp.stores.TreeStore'],   
    layout: {  
        type: 'border'  
    },  
  
    initComponent: function() {  //构造函数 
        var me = this;   
        var store   = MyApp.stores.TreeStore;  
  
        Ext.applyIf(me, {   //将所有me没有的配置属性复制给me 
            items: [  
                {  
                    xtype: 'container',  
                    height: 25,  
                    region: 'north'  
                },  
                {  
                    xtype: 'treepanel',  
                    id: 'west-panel',  
                    store:store,   
                    margin: '0 0 0 0',  
                    maxWidth: 400,  
                    minWidth: 185,  
                    width: 200,  
                    title: '后台菜单',  
                    region: 'west',  
                    split: true,  
                    collapsible :true,  
                    viewConfig: {  
                        border: 'false',  
                        id: '主菜单',  
                        autoScroll: true  
                    }  
                 },  
                {  
                    xtype: 'tabpanel',  
                    frame: true,  
                    id: 'tab',  
                    resizable: true,  
                    activeTab: 0,  
                    minTabWidth: 115,  
                    maxTabWidth: 135,  
                    region: 'center',  
                    items: [  
                        {  
                            xtype: 'panel',  
                            title: '基站状态显示'  
                        }  
                    ]  
                },  
                {  
                    xtype: 'container',  
                    height: 20,  
                    region: 'south'  
                }  
            ]  
        });  
  
        me.callParent(arguments);  
    }  
});  

 

4、TreeStore.js

 

Ext.define('MyApp.stores.TreeStore', {  
    extend    : 'Ext.data.TreeStore',  
    singleton : true,   //此类实例化为单态 
    root:{  
        expanded: true,   
        text:"菜单",  
        user:"",  
        status:"",  
        children: [  
            {id:"x",text:"detention",leaf: true},  
            {text:"book", leaf: true },  
            {text:"alegrbra", leaf: true},  
            {text: "buy", leaf:true }  
        ]  
    }  
    });  

 

另：alias用法

Ext.define('MyApp.views.UsersGridPanel', {  
    extend   : 'Ext.grid.Panel',  
    alias    : 'widget.UsersGridPanel', //类的部件名称，可做xtype 
    requires : ['MyApp.stores.UserStore'],  
  
如：
 
   xtype     : 'UsersGridPanel', 
   width     : 280, 
   itemId    : 'userGrid'