ExtJs 4.2

环境搭建

Ext下载，（需要注册）使用版本为4.2.0，可使用现有项目已下载文件。

Sencha Cmd下载，根据系统下载，可能依赖ruby(版本193)，ruby下载,用于编译的sass文件。

构建项目

使用sencha cmd 生成Ext应用 ,运行构建应用

sencha -sdk /path/to/sdk generate app MyApp /path/to/myapp   //初始化应用

1. sencha app watch // 运行默认1841端口

2. sencha web -port XXXX start // xxxx 为端口名，在xxxx端口运行

3. sencha app build 构建项目

修改主题： .sencha/app/sencha.cfg在文件内查找app.theme ,找到

app.theme = ext-theme-classic // 修改成目标主题，现用主题ext-theme-neptune

3、MVC模式代码结构：

Model模型 是字段和它们的数据的集合，例如User模型带有username和password字段，模型知道如何持久化自己的数据，并且可以和其他模型关联，通常都用在Store中去展示grid和其他组件的数据（Store类似于一个本地仓库(即数据存储器)
View视图 是组件的一种，专注于界面展示 – grid, tree, panel 都是view
Controllers控制器 一个安放所有使你的app正确工作的代码的位置，具体一点应该是所有动作，例如如何渲染view，如何初始化model，和app的其他逻辑

每个Extjs 4 都是从Application类实例开始，这个实例包含应用的全局配置（例如应用的名字），这个实例也负责维护对全部模型、视图、控制器的引用的维护，还有一个launch函数，会在所有加载项加载完成之后调用。所以每次新增的view 需要在Application里引用，ext的文件查找是通过文件路径的方式搜索。

//定义一个model

Ext.define('App.model.Users',{

    extend: 'Ext.data.Model',

    fields:[

        {"name":"itemTypeName" },

        {"name":"itemTypeCode"},

        {"name":"parentItemTypeCode"}

})

//定义Store

Ext.define('App.store.Users', {

    extend: 'Ext.data.Store',

    //model: 'App.model.Users', // 关联相应的model

    fields: ['name', 'email'],

    data: [

        {name: 'Ed',    email: '[email protected]'},

        {name: 'Tommy', email: '[email protected]'}

});

//定义一个视图

Ext.define('App.view.user.List' ,{

    extend: 'Ext.grid.Panel',

    alias : 'widget.userlist',

    title : 'All Users',

    initComponent: function() {

        this.store = {

            fields: ['name', 'email'],

            data  : [

                {name: 'Ed',    email: '[email protected]'},

                {name: 'Tommy', email: '[email protected]'}

};

        this.columns = [

            {header: 'Name',  dataIndex: 'name',  flex: 1},

            {header: 'Email', dataIndex: 'email', flex: 1}

];

        this.callParent(arguments); //回调父类函数

});

//定义一个Controller

Ext.define('App.controller.Users', {

    extend: 'Ext.app.Controller',

    init: function() {

        console.log('hello world!');

});

//app.js 中 Application对MVC的引用

Ext.application({

    stores:[

      'Users'

    controllers:

        'Users'

],

    views:[

      'users.List'

});

组件

Ext4.2 主要包含以下几类组件：

容器组件，表单组件，菜单和工具栏组件，图表组件，其他。

常用的组件：

form, panel,tab,viewport ,window

checkbox, combobox, datefile, label ...

checkItem, datePicker,colorPicker

Line, Bar ....

button,progressBar .....

组件的层次结构

组件的创建方式：
Ext.create() 创建组件的实例
 
 
var window = Ext.create('Ext.window.Window', {
    width: 600,
    height: 800,
    ...
});
通过xtype 来配置
 
 
    Ext.create('Ext.tab.Panel', {
        renderTo: Ext.getBody(),
        height: 100,
        width: 200,
        items: [
            { xtype: 'panel',title: 'TabA',html: 'The tab A'},
            { xtype: 'panel',title: 'TabB',html: 'The tab B'},
        ]
    })
Ext.defined
 
 
    Ext.define("App.view.users.list", {
        extend: "Ext.grid.Panel",
        alias: 'widget.users-list',
        width: 980,
        height: 550,
        collapsible: false,
        columnLines: true,
        viewConfig: {
            stripeRows: true,
            forceFit: true
        },
        scrollable:true,
        frame: false,
        autoScroll: true, // 自动显示滚动条
        initComponent: function() {
            ...
            this.callParent(arguments);
        }
    });
组件的查询
Ext.getCmp(id): 返回id 对应的组件， id 唯一性
Ext.ComponentQuery.query(selector,[root]): 返回匹配的组件数组
 
 
// 1.xtype查找：获取所有文本输入框(xtype:textfield)
var textfieldArray = Ext.ComponentQuery.query('textfield');
 
// 2.id查找
var formArray = Ext.ComponentQuery.query('#query_form');
 
// 3.xype+属性查找：指定from组件，并且title属性的值为'表单'
var formArray = Ext.ComponentQuery.query('form[title=表单]');
 
// 4.属性查找：title属性的值为'表单'的组件
var formArray = Ext.ComponentQuery.query('[title=表单]');
container.child([selector]): 返回匹配的第一个子组件（只查找第一层）

container.down([selector]): 返回第一个符合匹配的子组件

container.query([selector]):返回一个组件数组，包含当前容器内符合匹配规则的子组件

containers.queryBy(fn,[scope]):返回一个组件数组，包含当前容器内符函数条件的子组件

containers.queryById(id): 返回一个容器内符合此id的子组件

通用方式：

① up() : 向上查找祖先容器。

② previousSibling() ：向上查找兄弟组件(同一层级)。

③ nextSibling() ：向下查找兄弟组件(同一层级)。

....
生命周期

Extjs控件的生命周期大体分为三个阶段：初始化、渲染、销毁

组件的生命周期

服务端通信

Store中的服务器请求：

var myStore = Ext.create('Ext.data.Store', {

     model: 'User',

     proxy: {

        type: 'ajax',  // type: 'rest',

        url: 'XXXXX',

        actionMethods: 'POST',

        limitParam: 'pageSize',

        pageParam: 'pageNo',

         reader: {

             type: 'json',

             root: 'users'

},

     autoLoad: true,

    listeners: {

        beforeload: function(thisStore, record, opts) {

...

});

Ext.ajax.request():

Ext.Ajax.request({

                method: 'POST',

                url: config.cgdd_host + 'invoiceOrder/editInvoice',

                jsonData: order,

                success: function(response) {

...

},

                failure: function() {

...

});

跨域Jsonp实践

            Ext.data.JsonP.request({

                    url: 'xxx',

                    params:{},

                    timeout: 30000,

                    callbackKey: "callback",  // 与服务器端一致

                    success: function(result) {

                      ....

},

                    failure: function(result) {

...

},

                    callback: function(){

                       // complete emit

});

猜你喜欢