extjs4.2使用3天总结

清疚 2022-08-08 05:21 162阅读 0赞

1、引入css和js

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里