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'