实习笔记 7： ExtJs 4.2入门

Ext4.2

1. 页面引入，就三个文件

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/bootstrap.js"></script>
    <script type="text/javascript" src="hello.js"></script>

2. Class 命名规则和定义方式，比较简单，注意这种key-value方式的玩法。有nested实现结构体，或者用来实现function方法

Ext.define('My.sample.Person', {
    name: 'Unknown',

    constructor: function(name) {
        if (name) {
            this.name = name;
        }
    },

    eat: function(foodType) {
        alert(this.name + " is eating: " + foodType);
    }
});

var aaron = Ext.create('My.sample.Person', 'Aaron');
    aaron.eat("Salad"); // alert("Aaron is eating: Salad");

Static: this

Error: throw new error.

继承： extend

init：

构造器：constructor

3. MVC

Model: User之类的数据模型

View: Grid之类，表格神马的

Controller: 用来使你的app工作的code, 初始化数据，逻辑等。（Servlet in struts...3.0 long polling, 不难啊）

逻辑是:

　　a.model,view和controller都要加到application里面, controllers

　　b.controller views里面的user.List是从服务器加载

　　c. 使用model以后可以直接在view里面对其进行store的引用

　　d. model要进store

例子：

Ext.application({
    ...

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: {
                xtype: 'userlist'
            }
        });
    }
});

Model:

Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'email']
});

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    views: [
        'user.List'
    ],

    init: ...

    onPanelRendered: ...
});

这个里面还要有stores, models

（好吧，我承认我凌乱了...熟练就好了）

4. 存储数据

Model存储和Server存储，model就用componentQuery，up,down,拿到form的reference

Server 定义好proxy和reader