Ext JS 4学习教程+笔记（一）

来源：互联网发布：飞儿乐队知乎编辑：程序博客网时间：2024/06/04 17:54

ExtJS 4的开发方式与ExtJS 3.x的开发有很多区别，但还兼容以往的开发方式。

1，ExtJS 4里创建一个类，推荐用Ext.define()方法，例如：

Ext.define('MyApp.view.user.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',

    height: 251,
    width: 448,
    title: 'My Grid Panel',
});

创建类也可以用Ext.create()，语法与上面相同，和Ext.define()的区别在于Ext.define()方法支持重写。

可参见Ext.define()方法的文档。

2，开发一个ExtJS 4程序（指一个页面内执行），方法是创建一个index.html或app.html，内容如下：

<title>Account Manager</title>
<link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css">
<script type="text/javascript" src="ext-4.0/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>

其中在当前目录创建子目录ext-4.0，把ExtJS 4下载里的resources和src子目录都拷贝进去，还包括ext.js和ext-debug.js，如果汉化还可以拷贝ExtJS 4下载里面的locale/ext-lang-zh_CN.js

然后创建app.js，内容如下（前面加粗的表示是动态加载，如果调用中出现找不到类，就在require里加）：

Ext.Loader.setConfig({
enabled: true
});
Ext.require(['Ext.chart.*','Ext.view.*','Ext.panel.*','Ext.picker.*']);

Ext.application({
    name: 'AM',
appFolder: 'app',
controllers:[
               'Users'
          ],
   launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'userlist'
                }
            ]
        });
    }
});

第一次要产生的页面内容就写在launch方法里面，在当前目录的名为app的子目录下(appFolder属性默认值也是'app'，可省略)，自动将controller, model, store, view这些子目录名字映射到controllers, models, stores, views 这些属性的字符串数组里，并且支持加'.'表示子目录，例如：

controllers:[
'Users'
]

表示 controller/Users.js里面有名为AM.controller.Users的类（'AM'是命名空间的名字，约定首字母大写）。

而   views: [
        'user.Edit',
        'user.List'
    ]

表示 views/user/Edit.js和views/user/List.js里有名为AM.view.user.Edit和AM.view.user.List的类。

以上可参考ExtJS 4文档Guides中的"MVC Application Architecture"一文。