extjs4.2使用3天总结

1、引入css和js

        

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

2、在根目录下的workbench.js配置

Ext.application({
    name: 'RCP',//定义全局命名空间

    appFolder: 'app',//指定路径

    requires: [
        'Ext.state.CookieProvider',
        'Ext.window.MessageBox',
        'Ext.tip.QuickTipManager'
    ],

    controllers: [   
        'Workbench' 
    ],

    autoCreateViewport: true //自动创建一个RCP.view.Viewport实例，目标路径为app/view/Viewport.js
});

3、Viewport.js

Ext.define('RCP.view.Viewport', {
    extend: 'Ext.container.Viewport',
    requires: [
        'Ext.tab.Panel',
        'Ext.layout.container.Border',
        'RCP.view.Header',//包含的其他js
        'RCP.view.Navigation',
        'RCP.view.ContentPanel'
    ],

    layout: 'border',//布局

    items: [
        {
            region: 'north',
            xtype: 'appHeader'  //名为appHeader的组件
        },
        {
            region: 'west',
            xtype: 'navigation',
            width: 250,
            minWidth: 100,
            height: 200,
            split: true,
            stateful: true,
            stateId: 'mainnav.west',
            collapsible: true,
            tools: [{
                type: 'gear',
                regionTool: true
            }]
        },
        {
            region: 'center',
            xtype: 'contentPanel'
        }
    ]
});
具体布局讲解：http://www.qeefee.com/article/extjs-course-8-Ext-Layout
4、Header.js
   
Ext.define('RCP.view.Header', {
    extend: 'Ext.Container',
    alias: 'widget.appHeader',
    id: 'app-header',
    height: 52,
    layout: {
        type: 'hbox',
        align: 'middle'
    },

    initComponent: function () {
        this.items = [
            {
                xtype: 'component',
                id: 'app-header-title',
                html: '管理系统',
                flex: 1
            },
            {
                xtype: 'button',
                text: '退出',
                handler: function () {
//                    Ext.MessageBox.confirm('系统', '退出确认？', function (btn) {
//                        if (btn == 'yes') {
                            Ext.Ajax.request({
                                url: 'user/userAction_loginOut.action',
                                success: function (response, action) {
                                    location.reload();
                                }
                            });
//                        }
//                    });
                }
            }
        ];

        this.callParent();
    }
});
5、controller的WorkBench.js
   
Ext.define('RCP.controller.Workbench', {
    extend: 'Ext.app.Controller',
    requests: [
        'Ext.window.Window'
    ],
models: [
        
'User@RCP.model'
],
views: [
'List@RCP.view.customer'
],
refs: [    //refs的作用类似于我们告诉controller我们的一个元素的别名，既alias，那么controller就会为他声明get方法
    {
        ref: 'viewport',
        selector: 'viewport'
    },
    {
        ref: 'navigation',
        selector: 'navigation'
    },
    {
        ref: 'contentPanel',
        selector: 'contentPanel'
    }
] ,
init: function () {
    this.control({
        'navigation': {
            selectionchange: 'onNavSelectionChange'
        }
    });
},
onNavSelectionChange:function (selModel, records) {
    
var record = records[0];
var text = record.get('text');
var xtype = record.get('id');
var alias = 'widget.' + xtype;
var contentPanel = this.getContentPanel();
var cmp;

if (xtype) {
    contentPanel.removeAll(true);

    var className = Ext.ClassManager.getNameByAlias(alias);
    var viewClass = Ext.ClassManager.get(className);

    cmp = new viewClass();
    contentPanel.add(cmp);

    cmp.show();

    contentPanel.setTitle(text);

    document.title = document.title.split(' - ')[0] + ' - ' + text;
    location.hash = xtype;
}
}
});
6、model定义
  
Ext.define('RCP.model.Customer', {
    extend: 'Ext.data.Model',
    fields: [
        {
            name: 'cusId',
            type: 'string'
        }
     ]
});
7、view定义
Ext.define('RCP.view.customer.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.customerList',

    padding: 5,
    autoScroll: true,
    title: '客户信息',
    emptyText: '无客户信息',

    initComponent: function () {
      var me = this;
    var store = Ext.create('Ext.data.Store', {   //store数据仓库，store起到了数据存取的作用
      model: 'RCP.model.Customer',
      proxy: {
        type: 'ajax',
        url: 'customer/listCustomerAction.action',
        reader: {
            type: 'json',
            root: 'customer',
            successProperty: 'success'
        }
    },

    autoLoad: true
});//使用了‘viewport > panel ‘,被解析成“找出viewport的所有为Panel的直接子组件“
this.columns = [
    {
        header: '用户名称',
        dataIndex: 'cusName',
        flex: 1
    }
   ];
   var refreshAction = Ext.create('Ext.Action', {
    text: '刷新',
    handler: function () {
        store.reload();
    };
    var editAction=Ext.create('Ext.Action',{
    text:'编辑',
    handler:function(){
        var record = me.getSelectionModel().getSelection()[0];
        if(record){
           showEdit(record);
        }
      }
   });
   
  function showEdit(record) {
    var view = Ext.widget('customerEdit', {//customerEdit为编辑窗口的别名

        cusId: record.get('cusId')//cusId 为传递的id
    });
    view.on("close", function () {
        if (view.ok)
            store.reload();
    });
  }
   this.dockedItems = [//相当于工具条 dock设置工具条的位置，items为子组件
    {
        dock: 'top',
        xtype: 'toolbar',
        items: [
            refreshAction
        ]
    }
];
  this.callParent(arguments);
});
8、编辑窗口
Ext.define('RCP.view.customer.EditWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.customerEdit',
    title: '修改客户信息',
    layout: 'fit',
    resizable: false,
    autoShow: true,
    modal: true,

    width: 600,

    initComponent: function () {
        var thisWindow = this;


        var weChatForm = Ext.create('RCP.view.customer.Edit');//这里调用了另一个view
        weChatForm.getForm().load({
            url: 'customer/listWeChatAction.action',//调用action读取选中行的数据
            method: 'GET',
            waitMsg: 'Loading...',
            params: {
                cusId: this.cusId
            }
        })

        this.items = [
            {
                xtype: 'form',
                bodyPadding: 5,
                border: false,
                fieldDefaults: {
                    labelAlign: 'left',
                    msgTarget: 'side'
                },
                defaults: {
                    anchor: '100%'
                },

                items: [
                    {
                        items: [weChatForm]
                    }
                ],
                buttons: [
                    {
                        text: '修改',
                        disabled: true,
                        formBind: true,
                        id: this.ids,
                        handler: function () {
                            var form = this.up('form').getForm();
                            form.submit({
                                method: 'POST',
                                clientValidation: true,
                                url: 'customer/updateWeChatAction.action',
                                params: {//向后台传递的参数
                                    cusId:this.cusId,
                                    mobile:weChatForm.getForm().findField('mobile').getValue(),
                                    email: weChatForm.getForm().findField('email').getValue(),
                                    inviteName:weChatForm.getForm().findField('inviteName').getValue(),
                                    createOn: weChatForm.getForm().findField('createOn').getValue()
                                },
                                success: function (form, action) {
                                    if(action.result.success==true){
                                        Ext.MessageBox.alert('系统', action.result.message);
                                        thisWindow.ok = true;
                                        thisWindow.close();
                                    }else{
                                        Ext.MessageBox.alert('系统', '修改失败！');
                                    }
                                }
                            });
                        }
                    },
                    {
                        text: '取消',
                        handler: function () {
                            thisWindow.close();
                        }
                    }
                ]
            }
        ];

        this.callParent(arguments);
    }
});
9、Edit.js
Ext.define('RCP.view.customer.Edit', {
    extend: 'Ext.form.Panel',
    alias: 'widget.customerEdit',
    bodyPadding: 5,
    border: false,



    reader: new Ext.data.JsonReader({
        model: 'RCP.model.Customer',
        record: 'List',    //向后台传递的参数
        successProperty: '@success'
    }),

    initComponent: function () {

        var imageTypeStore = Ext.create('Ext.data.Store', {
            model: 'RCP.model.Customer', // Model 名
            proxy: {
                type: 'ajax',
                url: 'customer/listUserNameAction.action',
                reader: {
                    type: 'json',
                    root: 'weChat',   // Anction 中的变量
                    successProperty: 'success'
                }
            },

            autoLoad: true
        });
        this.imageTypeStore = imageTypeStore;
        this.items = [
            {
                xtype: 'form',
                border: false,
                bodyPadding: 10,
                defaultType: 'textfield',
                defaults: {
                    anchor: '100%'
                },

                items: [
                    {
                        hidden: true,
                        fieldLabel: 'cusId',
                        name: 'cusId'
                    },
                    {
                        allowBlank: false,
                        fieldLabel: '客户姓名',
                        name: 'name',
                        emptyText: '输入客户姓名',
                        blankText   : "不能为空"
                    },
                    {

                        allowBlank: false,
                        fieldLabel: '客户电话',
                        name: 'mobile',
                        emptyText: '输入电话号',
                        regex : /^[0-9]\d{10}$/,
                        regexText : '输入正确的电话号',
                        blankText   : "不能为空"
                    },
                    {

                        allowBlank: false,
                        fieldLabel: 'email',
                        emptyText: '输入email',
                        regex : /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
                        regexText : '输入正确的邮箱',
                        name: 'email',
                        blankText   : "不能为空"
                    }
                    
                ]
            }
        ];

        this.callParent(arguments);
    }
});
ps：新添加的model和view需要添加到controller里