Ext 5.0案例 ~转~学习Extjs 5.0值得一看

/**
 * 默认页面
 *  
 * @author leaves.qq:1330771552
 */  
 
Ext.define(‘SupplyManagementDesktop.defaultsWindow‘, {  
    extend : ‘Ext.ux.desktop.Module‘,  
 
    requires : [‘Ext.data.ArrayStore‘, ‘Ext.util.Format‘, ‘Ext.grid.Panel‘,  
            ‘Ext.grid.RowNumberer‘, ‘Ext.ux.LiveSearchGridPanel‘],  
 
    id : ‘defaultsWindow-win‘,  
 
    /***************************************************************************
     * ExtJS控件使用按照如下规则。 首先,创建控件,调用Ext.create
     * weightName:空间命名空间,args:空间参数,用{}包围,当做对象传入
     *  
     * ####################################### 注意JS中有如下语法: var object={
     * paramter1:value1, paramter2:value2, paramter3:value3 }
     * object.paramter1可以直接获得value1 #####################################
     *  
     * ExtJS中所有空间创建方法都如上
     *  
     * Ext.create(String weightName,Mixed args)
     * 所以此处args相当于一个匿名对象(没有引用),但并非真的匿名对象
     *  
     */  
    // 初始化窗体的方法  
    init : function() {  
        this.launcher = {  
            text : ‘Defaults Window‘,  
            iconCls : ‘icon-grid‘,  
            // 调用createWindow方法  
            handler : this.createWindow,  
            scope : this  
            // this指向Ext.define(这个方法用来声明命名空间。)定义的命名空间  
        };  
    },// 初始化窗体的方法结束  
 
    // 创建窗体的方法  
    createWindow : function() {  
        // 下面进行预定义。就好像C里面的 先定义后使用。不然后定义的在前面使用会认为未初始化。(猜测:可能不跟JS一样,属于ExtJS的语法)  
        var dataPanel;// 预定义一个GridPanel,用来显示数据  
        var innerPanel;// 存放Panel的容器  
        var workerPanel;  
        var westPanel;  
        var deptStore;  
        var moduleObj = this;// 创建windows窗体的时获取下本身的环境,此处不能确定,这个this是指向Ext.define还是指向创建的这个窗体  
        var desktop = this.app.getDesktop();  
 
        // 获取窗体,外部最大窗体,具体方法不清楚。  
        var win = desktop.getWindow(‘defaultsWindow-win‘);  
 
        // 创建按钮bar组件,是上面的几个按钮。  
        var buttonBar = Ext.create(‘Ext.toolbar.Toolbar‘, {  
            dock : ‘top‘,  
            items : [{  
                        xtype : ‘button‘,  
                        text : ‘新建‘,  
                        iconCls : ‘add‘,  
                        handler : function() {  
                            // 自行新建操作,传入一个create字符串用来标示是什么按钮事件,传入dataPanel(注意:上面没有var  
                            // dataPanel;此处会报错。)因为后面的新建需要用到表格显示的数据(dataPanel.getSelectionModel().getSelection())  
                            moduleObj.proAction("create", dataPanel,  
                                    workerPanel);  
                        }  
                    }, {  
                        // 分隔符,不解释。  
                        xtype : ‘tbseparator‘  
                    }, {  
                        xtype : ‘button‘,  
                        text : ‘删除‘,  
                        iconCls : ‘remove‘,  
                        handler : function() {  
                            moduleObj.proAction("delete", dataPanel);  
                        }  
                    }, {  
                        xtype : ‘tbseparator‘  
                    }, {  
                        xtype : ‘button‘,  
                        text : ‘复制‘,  
                        iconCls : ‘copy‘,  
                        handler : function() {  
                            moduleObj.proAction("copy", dataPanel, workerPanel);  
                        }  
                    }, {  
                        xtype : ‘button‘,  
                        text : ‘重置检索‘,  
                        iconCls : ‘reset‘,  
                        handler : function() {  
                            dataPanel.resetSearch();  
                        }  
                    }]  
        });// 创建按钮bar组件结束  
 
        // 临时创建的一个用来展示的store  
        var theStore = Ext.create(‘Ext.data.Store‘, {  
            fields : [{  
                        name : ‘projectId‘,  
                        type : ‘String‘  
                    }, {  
                        name : ‘projectCode‘,  
                        type : ‘String‘  
                    }, {  
                        name : ‘projectName‘,  
                        type : ‘String‘  
                    }, {  
                        name : ‘startDate‘,  
                        type : ‘String‘  
                    }, {  
                        name : ‘endDate‘,  
                        type : ‘string‘  
                    }, {  
                        name : ‘qualityTarget‘,  
                        type : ‘string‘  
                    }, {  
                        name : ‘projectLeader‘,  
                        type : ‘string‘  
                    }, {  
                        name : ‘projectStatus‘,  
                        type : ‘string‘  
                    }, {  
                        name : ‘qualification‘,  
                        type : ‘string‘  
                    }, {  
                        name : ‘constructionUnit‘,  
                        type : ‘string‘  
                    }],  
            pageSize : 20,// 每页显示数量。此处设置可以在向后台申请数据的时候“自动”传参一个  
            // limit和satrt,start不需要指定ExtJS会自动计算,然后传值。  
            proxy : {  
                type : ‘ajax‘,// 使用传输方式为ajax(ajax是异步执行的操作,即不需要刷新页面即可申请后台资源。)  
                method : ‘POST‘,// post和get是HTML中表单(form)提交两种方式,get会在地址栏显示参数,post不显示  
                url : ‘/Training/myProjectInfoController/getAllProjectInfo.action?deptId=‘  
                        + 0,  
 
                reader : {// 设置读取方式属性  
                    type : ‘json‘,// 设置读取方式格式为:json字符串  
                    root : ‘root‘,// 设置根元素,即读取上面fields种的name中对应值的元素,此处多为元素组,json字符串如:{A:a,B:[{},{},{},………………]}  
                    totalProperty : ‘totalProperty‘// 设置总页码  
                }  
            },  
            autoLoad : true  
                // 自动读取,即显示绑定该store的组件的时候直接读取数据  
        });  
        // 创建临时Store结束  
 
        // 创建分页bar组建  
        var pagebar = Ext.create(‘Ext.toolbar.Paging‘, {  
                    pageSize : 20,  
                    store : theStore,  
                    dock : ‘bottom‘,  
                    setActive : false,  
                    refresh : false,  
                    displayInfo : true,  
                    plugins : Ext.create(‘Ext.ux.ProgressBarPager‘, {})  
                });  
        // 创建分页bar组建结束  
 
        // 为theGirdPanel创建一个SelectionModel  
        var selectionModeltoGridPanel = Ext  
                .create(‘Ext.selection.CheckboxModel‘); // 想要能进行选择或者多选,就需要设置selModel属性这是设置selection的模型,创建一个模型Ext.selection.CheckboxModel  
        // 初始化gridPanel  
        dataPanel = Ext.create(‘Ext.ux.LiveSearchGridPanel‘, {  
                    title : ‘<font color=red>工程详细信息</font>‘,  
                    region : ‘center‘,  
                    width : ‘100%‘,  
                    height : ‘96%‘,  
                    store : theStore,  
                    selModel : selectionModeltoGridPanel,  
                    // 一系列行,不解释,也可以var column=[`````````]然后columns:column  
                    iconCls : ‘remove‘,  
                    columns : [{  
                                dataIndex : ‘projectId‘,  
                                width : 80,  
                                text : ‘项目号‘  
                            }, {  
                                dataIndex : ‘projectCode‘,  
                                width : 80,  
                                text : ‘项目序号‘  
                            }, {  
                                dataIndex : ‘projectName‘,  
                                width : 100,  
                                text : ‘项目名称‘  
                            }, {  
                                dataIndex : ‘constructionUnit‘,  
                                width : 100,  
                                text : ‘建设单位‘  
                            }, {  
                                dataIndex : ‘startDate‘,  
                                width : 80,  
                                text : ‘开工日期‘  
                            }, {  
                                dataIndex : ‘endDate‘,  
                                width : 80,  
                                text : ‘竣工日期‘  
                            }, {  
                                dataIndex : ‘qualityTarget‘,  
                                width : 100,  
                                text : ‘质量目标‘  
                            }, {  
                                dataIndex : ‘projectLeader‘,  
                                width : 100,  
                                text : ‘项目负责人‘  
                            }, {  
                                dataIndex : ‘projectStatus‘,  
                                width : 80,  
                                text : ‘项目状态‘  
                            }, {  
                                dataIndex : ‘qualification‘,  
                                width : 80,  
                                text : ‘需要资质‘  
                            }],  
                    dockedItems : [buttonBar, pagebar]  
                });  
 
        // 绑定dataPanel鼠标双击事件。  
        dataPanel.on(‘itemdblclick‘, function() {  
                    moduleObj.proAction("update", dataPanel, workerPanel);  
 
                });  
        // 初始化gridPanel结束  
 
        // 为下面的部门信息分类栏(grid)创建一个store数据用jsonu读取/Training/DeptInfoController/getAllDeptInfo.action地址申请到的资源。  
        deptStore = Ext.create(‘Ext.data.Store‘, {  
                    fields : [{  
                                name : ‘deptId‘,  
                                type : ‘String‘  
                            }, {  
                                name : ‘deptName‘,  
                                type : ‘String‘  
                            }],  
                    proxy : {  
                        type : ‘ajax‘,  
                        method : ‘POST‘,  
                        url : ‘/Training/DeptInfoController/getAllDeptInfo.action‘,  
                        reader : {  
                            type : ‘json‘,// 用json字符串  
                            root : ‘root‘  
                        }  
                    },  
                    autoLoad : true  
                });  
 
        // 创建部门信息分类栏,  
        workerPanel = Ext.create(‘Ext.grid.Panel‘, {  
                    title : ‘部门信息‘,  
                    border : false,  
                    store : deptStore,  
                    hideHeaders : true,  
                    columns : [{  
                                dataIndex : ‘deptId‘,  
                                hidden : true,  
                                sortable : false,  
                                width : 180  
                            }, {  
                                dataIndex : ‘deptName‘,  
                                sortable : false,  
                                width : 180  
                            }]  
                });  
 
        // 给部门信息的grid绑定事件,当单击的时候触发事件,此事件用来刷新右侧列表  
        workerPanel.on(‘itemclick‘, function(grid, record) {  
            // 获取当前行的deptId列的值  
            var id = record.data.deptId;  
            // dataPanel.store:获取dataPanel的store属性的值,dataPanel.store.proxy获取数据来源属性,ataPanel.store.proxy.url获取数据来源属性的URL,  
            // 这个方法用来重新设置数据来源的地址,  
            // 注意:后面的?deptId是HTML传参方法,地址栏传参。跟form直接传参一样,后台可以接受。  
            dataPanel.store.proxy.url = ‘/Training/myProjectInfoController/getAllProjectInfo.action?deptId=‘  
                    + id;  
            dataPanel  
                    .setTitle("<font color=red>"  
                            + (workerPanel.getSelectionModel().getSelection())[0].data.deptName  
                            + "</font>部门信息");// ExtJS中的标题等字符串属性支持HTML语言,直接设置格式。  
            dataPanel.store.load();// dataPanel.store:获取dataPanel的store属性的值,dataPanel.store.load():调用取得的值的load()方法,用来重新加载store数据,实现grid刷新  
        });  
 
        // 初始工人信息Panel,同下  
        workerPane2 = Ext.create(‘Ext.grid.Panel‘, {// Ext.grid.Panel可以直接显示grid的panel不需要create一个Grid放置panel中  
            title : ‘BBBBBB‘,// 随便取标题  
            border : false,// 没有边框  
            store : theStore,  
            hideHeaders : true,  
            columns : [{  
                        dataIndex : ‘projectName‘,  
                        sortable : false,// 不能排序  
                        width : 180  
                    }]  
        });  
        // 初始工人信息Panel,用来实现折叠效果的panel  
        workerPanel3 = Ext.create(‘Ext.grid.Panel‘, {// Ext.grid.Panel可以直接显示grid的panel不需要create一个Grid放置panel中  
            title : ‘CCCCCCC‘,// 随便取标题  
            border : false,// 没有边框  
            store : theStore,  
            hideHeaders : true,// 隐藏grid每列数据的标题  
            columns : [{  
                        dataIndex : ‘projectName‘,  
                        sortable : false,// 不能排序  
                        width : 180  
                    }]  
        });  
 
        // 左边伸缩栏  
        westPanel = Ext.create("Ext.panel.Panel", {  
            collapsible : true,// 这个属性设置此panel容易可以隐藏(最小化)  
            title : ‘分类查看‘,  
            layout : ‘accordion‘,// 这个属性设置此panel容易可以实现折叠效果  
            width : 200,  
            region : ‘west‘,  
            iconCls : ‘reset‘,  
            items : [workerPanel, workerPane2, workerPanel3]  
                // 放置三个小panel容器,如上定义  
            });  
 
        // 创建容器,用来存放整个窗体的组件,并且在下面直接放置到win中。  
        theContainer = Ext.create(‘Ext.container.Container‘, {  
                    layout : ‘border‘,  
                    items : [dataPanel, westPanel]  
                });  
 
        // 判断是否已经创建最外边窗体,如果创建了,(JS是弱类型语言,认为null相当于false)  
        if (!win) {  
            win = desktop.createWindow({ // 所以此处的目的是:如果win已经初始化存在了,那么就不新创建窗体,直接调用下面的show()方法  
                // 下面属性不具体解释,详细可以查看API手册  
                id : ‘defaultsWindow-win‘,  
                title : ‘工程详细信息设置‘,  
                width : 1100,  
                height : 600,  
                iconCls : ‘icon-grid‘,  
                animCollapse : false,  
                constrainHeader : true,  
                layout : ‘fit‘,  
                items : [theContainer]  
                    // 把创建好存放所有组件的窗体放置到外围窗体中  
            });  
        }  
        win.show();// 显示窗体。  
        return win;// 把窗体的句柄(相当于内存引用)返回  
    },  
    // 创建窗体的方法结束  
 
    // 显示一个对话框的方法,暂时带有一个用来判断是什么按钮的属性  
    proAction : function(btn, dataPanel, workerPanel) {  
        var selectData;// 预设一个用来存放被选中的数据的变量  
        var innerPanel;  
        // 如果选择的是复制  
        if ("copy" == btn) {  
            if (dataPanel.getSelectionModel().getSelection().length == 0) {  
                Ext.hx.msg("提示", "请先选择您要复制的行");  
                return;  
            }  
 
            selectData = (dataPanel.getSelectionModel().getSelection())[dataPanel  
                    .getSelectionModel().getCount()  
                    - 1].data;// 如果是删除的话需要读取被选中的数据,就初始化被selectData。  
        }  
        // 如果选择的是新建  
        if ("create" == btn) {  
            // 新建的时候设置选择的行为null,没有值。也就不会在创建的panel中显示当前行。此处是因为在复制的时候会去读取。  
            selectData = null;  
        }  
 
        // 如果选择的是复制  
        if ("update" == btn) {  
            selectData = (dataPanel.getSelectionModel().getSelection())[0].data;// 先取出所有的记录组成的数组。  
        }  
 
        // 如果选择的是删除  
        if ("delete" == btn) {  
            var oneDate;// 预设一个用来存放一条数据进行操作的变量  
            var records = dataPanel.getSelectionModel().getSelection();// 先取出所有的记录组成的数组。  
            // 判断如果还没有选择任何行就提示并且返回方法  
            if (records.length == 0) {  
                Ext.hx.msg("提示", "请先选择您要删除的行");  
                return;  
            }  
 
            // 遍历所有的数组然后设置里面的各种标志  
            var array = new Array();// 预设一个用来存放新的data的数组  
            for (var i = 0; i < records.length; i++) {  
                oneDate = records[i].data;// 取出其中一条  
                oneDate.deleteFlg = true;// 设置删除标志  
                array.push(oneDate);// 放置到数组中  
            }  
 
            // 用ajax来进行后台交互  
            Ext.Ajax.request({  
                url : ‘/Training/myProjectInfoController/deleteProjectInfo.action‘,  
                method : ‘POST‘,  
                success : function(res, opts) {// 交互成功的时候  
                    Ext.hx.msg("提示", ‘删除成功!‘);// 提示  
                    dataPanel.store.load();// 表格数据刷新  
                },  
                failure : function(res, opts) {  
                    Ext.hx.msg("提示", ‘删除失败!‘);  
                },  
                params : {  
                    jsonString : Ext.JSON.encode(array)  
                    // 调用ExtJS内置对象的方法,把数组转换成json字符串  
                },  
                scope : this  
                    // 作用范围本页。//具体不知道,没用。、  
            });  
 
            return;// 执行完成操作马上返回,不执行下面代码。  
        }  
 
        /* 下面定义一系列用来输入的文本框 */  
        deptBoxStore=Ext.create(‘Ext.data.Store‘, {  
                    fields : [{  
                                name : ‘deptId‘,  
                                type : ‘String‘  
                            }, {  
                                name : ‘deptName‘,  
                                type : ‘String‘  
                            }],  
                    proxy : {  
                        type : ‘ajax‘,  
                        method : ‘POST‘,  
                        url : ‘/Training/DeptInfoController/getAllDeptInfo.action‘,  
                        reader : {  
                            type : ‘json‘,// 用json字符串  
                            root : ‘root‘  
                        }  
                    },  
                    autoLoad : true  
                });  
        // 下面是一个下来选择菜单,用来下拉选择部门。  
        var dptBox = Ext.create("Ext.form.field.ComboBox", {  
            fieldLabel : ‘部门选择‘,  
            store :deptBoxStore ,  
            displayField : ‘deptName‘,  
            valueField : ‘deptId‘,  
            allowBlank : false,// 不允许为空  
            editable : false,// 不允许编辑  
            x : 10,  
            y : 20  
        });  
        //设置上面部门选择的Combox默认值  
        deptBoxStore.load({   
        callback : function(records) {  
            dptBox.setValue(workerPanel.getSelectionModel().getSelection().length==0?null:(workerPanel.getSelectionModel().getSelection())[0].data.deptId);   
        }   
    });  
          
        // 各种输入框,制定value(默认值)在没有selectData是null(即if ("create" ==  
        // btn)的时候)设置为“”(空字符串),否则分别取出选择行的每一个数据。作为默认数据,  
        var projectIdField = Ext.create(‘Ext.form.field.Text‘, {  
                    fieldLabel : ‘项目号‘,  
                      
                    x : 10,  
                    y : 20,  
                    value : selectData != null ? selectData.projectId : ""  
                });  
        var projectCodeField = Ext.create(‘Ext.form.field.Text‘, {  
                    fieldLabel : ‘项目序号‘,  
                      
                    x : 10,  
                    y : 50,  
                    value : selectData != null ? selectData.projectCode : ""  
                });  
        var projectNameField = Ext.create(‘Ext.form.field.Text‘, {  
                    fieldLabel : ‘项目名称‘,  
                    allowBlank : false,  
                    blankText : ‘不可以为空‘,  
                      
                    x : 10,  
                    y : 80,  
                    value : selectData != null ? selectData.projectName : ""  
                });  
        var constructionUnitField = Ext.create(‘Ext.form.field.Text‘, {  
                    fieldLabel : ‘建设单位‘,  
                      
                    x : 10,  
                    y : 110,  
                    value : selectData != null  
                            ? selectData.constructionUnit  
                            : ""  
                });  
        var startDateField = Ext.create(‘Ext.form.field.Date‘, {  
                    format : ‘Y-m-d h:m:s ‘,  
                    fieldLabel : ‘开工日期‘,  
                    blankText : ‘不可以为空‘,  
                    allowBlank : false,  
                      
                    x : 10,  
                    y : 140,  
                    value : selectData != null  
                            ? selectData.startDate  
                            : new Date()  
                });  
        var endDateField = Ext.create(‘Ext.form.field.Date‘, {  
                    format : ‘Y-m-d h:m:s ‘,  
                    fieldLabel : ‘竣工日期‘,  
                    blankText : ‘不可以为空‘,  
                    allowBlank : false,  
                      
                    x : 10,  
                    y : 170,  
                    value : selectData != null  
                            ? selectData.endDate  
                            : new Date()  
                });  
        var qualityTargetField = Ext.create(‘Ext.form.field.Text‘, {  
                    fieldLabel : ‘质量目标‘,  
                      
                    x : 10,  
                    y : 200,  
                    value : selectData != null ? selectData.qualityTarget : ""  
                });  
        var projectLeaderField = Ext.create(‘Ext.form.field.Text‘, {  
                    fieldLabel : ‘项目负责人‘,  
                      
                    x : 10,  
                    y : 230,  
                    value : selectData != null ? selectData.projectLeader : ""  
                });  
        var projectStatusField = Ext.create(‘Ext.form.field.Text‘, {  
                    fieldLabel : ‘项目状态‘,  
                      
                    x : 10,  
                    y : 260,  
                    value : selectData != null ? selectData.projectStatus : ""  
                });  
        var qualificationField = Ext.create(‘Ext.form.field.Text‘, {  
                    fieldLabel : ‘需要资质‘,  
                      
                    x : 10,  
                    y : 290,  
                    value : selectData != null ? selectData.projectStatus : ""  
                });  
 
        var submitButton = Ext.create(‘Ext.button.Button‘, {  
            text : ‘确定‘,  
            x : 10,  
            y : 320,  
            value : selectData != null ? selectData.projectStatus : "",  
            handler : function() {  
                var arr = new Array();  
                // 上面说道的JS的定义对象的方法,  
                /**
                 * ####################################### 注意JS中有如下语法: var
                 * object={ paramter1:value1, paramter2:value2, paramter3:value3 }
                 * object.paramter1可以直接获得value1
                 * #####################################
                 */  
                var data = {  
                    projectId : projectIdField.getValue(),  
                    projectCode : projectCodeField.getValue(),  
                    projectName : projectNameField.getValue(),  
                    constructionUnit : constructionUnitField.getValue(),  
                    startDate : startDateField.getValue(),  
                    endDate : endDateField.getValue(),  
                    qualityTarget : qualityTargetField.getValue(),  
                    projectLeader : projectLeaderField.getValue(),  
                    projectStatus : projectStatusField.getValue(),  
                    qualification : qualificationField.getValue(),  
                    deptId : dptBox.getValue(),  
                    modifyFlg : "update" == btn ? true : false  
                };  
 
                // 上面定义的data有了projectId,projectCode,······deptId,modifyFlg这些属性,可以直接data.modifyFlg取得值。  
                if (!confirm("确定?")) {// confirm("确定?")弹出对话框,显示确定?点击是的时候返回true,此处判断如果端机否,直接返回方法不执行下面语句。  
                    return;  
                }  
                arr.push(data);// 把设置好属性的data对象放置到arr数组中。  
 
                // 用AJAX跟后台交互。  
                Ext.Ajax.request({  
                    url : ‘/Training/myProjectInfoController/saveProjectInfo.action‘,  
                    params : {  
                        jsonString : Ext.JSON.encode(arr)  
                    },  
                    success : function(response) {  
                        Ext.hx.msg("提示", "成功");  
                        var dialog = Ext.getCmp(‘theDialog‘);// Ext.getCmp(String  
                        // comID);传入组件ID,返回组件句柄(内存引用)  
                        dataPanel.store.load(); // 刷新panel不解释  
                        dialog.close();// 把窗体关闭(不显示)  
                        dialog.destroy();// 把窗体销毁(清空内存)  
                    },  
                    failure : function(response) {// 失败提示  
                        Ext.hx.msg("提示", "失败");  
                    }  
                });  
            }  
        });  
        var resetButton = Ext.create(‘Ext.button.Button‘, {  
                    text : ‘重置‘,  
                    x : 70,  
                    y : 320,  
                    value : selectData != null ? selectData.projectStatus : "",  
                    handler : function() {  
                        /*
                         * API上抄来的,不知道什么意思。 up( String selector ) : Container
                         * Walks up the ownerCt axis looking for an ancestor
                         * Container which matches the passed simple selector.
                         */  
                        this.up(‘form‘).getForm().reset();// 查找form上面的form(记住这么用吧,说不清楚。仔细看  
                        // innerPanel =  
                        // Ext.create(‘Ext.form.Panel‘,  
                        // {  
                        // 这句就知道了。)向上找form元素获取form表单,然后重置  
                    }  
                });  
 
        // 创建用来进行输入的文本框数组  
        /**
         * 此处使用的是Ext.form.Panel目的是为了上面的this.up(‘form‘).getForm().reset();
         */  
        innerPanel = Ext.create(‘Ext.form.Panel‘, {// 创建一个表单控件,  
            id : ‘innerPanel‘,  
            height : "100%",  
            width : "100%",  
            layout : {  
                type : ‘absolute‘  
            },  
            id : ‘innerPanel‘,  
            waitMsgTarget : true,// 显示错误提示的小叹号  
 
            fieldDefaults : {  
                labelWidth : 85,  
                msgTarget : ‘side‘// 错误提示的字体  
            },  
            items : [dptBox, projectCodeField, projectNameField,  
                    constructionUnitField, startDateField, endDateField,  
                    qualityTargetField, projectLeaderField, projectStatusField,  
                    qualificationField, submitButton, resetButton]  
        });  
 
        // 准备好一个用来显示窗体的dialog,实际上是一个窗体  
        var dlalog = Ext.create(‘Ext.window.Window‘, {  
            id : ‘theDialog‘,  
            title : ‘要点击之后显示的窗体‘,  
            height : 500,  
            width : 300,  
            layout : ‘fit‘,  
            items : [innerPanel],  
            modal : true  
                // 模态窗体,显示的时候不允许操作后面的控件。  
            });  
        dlalog.show();  
    }  
        // 显示一个对话框的方法结束  
});

时间: 2024-10-29 19:05:54

Ext 5.0案例 ~转~学习Extjs 5.0值得一看的相关文章

Lucene6.6.0 案例与学习路线

工头让我去学习Lucene这个全文检索工具,为项目搜索引擎的开发打下基础.花了一周的时间熟悉了Lucene基本API的使用并写了一些案例,在这里先分享一下关于Lucene的学习心得. 1.首先建议参看这篇精简的博文,对Lucene的索引创建和检索功能有个了解.https://www.ibm.com/developerworks/cn/java/j-lo-lucene1/ 需要注意这个博文的jar包是Lucene2.0.0比较老. 2.然后阅读另外一篇比较细致的博文:http://blog.csd

学习ExtJS的grid布局

这是之前学习ExtJS布局的时候我导师让我重点熟悉的内容.之后会发一个最近写的结合MVC项目的grid布局的案例. 上一篇关于ExtJS的学习资料什么的都已经更在上一篇了,这里只是对一些代码的记录. [学习资料](ExtJS4中的Grid.Tree.Form)http://www.cnblogs.com/niejunchan/p/4998512.html [效果] Array_Grid Tree_Grid [代码] [Array_Grid的代码] <!DOCTYPE html> <htm

extjs 4.0.7 Desktop 替换claaes.js

最近在学习Extjs 发现Demo 中有个Desktop的于是就尝试学习一下.结果发现怎么改都没效果后来偶然发现 默认采用的是classes.js 为压缩后的js 引入已经修改后的分开的js瞬间 一切ok了. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <met

NVIDIA DIGITS 学习笔记(NVIDIA DIGITS-2.0 + Ubuntu 14.04 + CUDA 7.0 + cuDNN 7.0 + Caffe 0.13.0)

转自:http://blog.csdn.net/enjoyyl/article/details/47397505?from=timeline&isappinstalled=0#10006-weixin-1-52626-6b3bffd01fdde4900130bc5a2751b6d1 NVIDIA DIGITS-2.0 + Ubuntu 14.04 + CUDA 7.0 + cuDNN 7.0 + Caffe 0.13.0环境配置 引言 DIGITS简介 DIGITS特性 资源信息 说明 DIGI

《SAS编程和数据挖掘商业案例》学习笔记# 19

继续<SAS编程与数据挖掘商业案例>学习笔记,本文側重数据处理实践.包含:HASH对象.自己定义format.以及功能强大的正則表達式 一:HASH对象 Hash对象又称散列表,是依据关键码值而直接进行訪问的数据结构.是依据关键码值而直接进行訪问的数据结构. sas提供了两个类来处理哈希表.用于存储数据的hash和用于遍历的hiter,hash类提供了查找.加入.改动.删除等方法,hiter提供了用于定位和遍历的first.next等方法. 长处:键值的查找是在内存中进行的,有利于提高性能:

Retrofit2.0通俗易懂的学习姿势,Retrofit2.0 + OkHttp3 + Gson + RxJava

Retrofit2.0通俗易懂的学习姿势,Retrofit2.0 + OkHttp3 + Gson + RxJava Retrofit,因为其简单与出色的性能,也是受到很多人的青睐,但是他和以往的通信框架还是有点区别,不过放心,因为他本身还是挺简单的,所有我相信你看完这篇文章,对基本的请求是没什么问题的,其实现在网上这样的文章也有很多了,好了,那我们直接开车吧! 一.相关资料 Github:https://github.com/square/retrofit 官网文档:http://square

Extjs 3.0 htmleditor实现插入图片功能

首先感谢前辈们的无私奉献.贴出参考地址 http://zhidao.baidu.com/link?url=Q0ZM405OFNy_xAHSut9TepRJxgXCxFayQttrQz1N82dlA1_JnAb4Ojdl-b9T0AyzPNcgdHWI5h-66RUcVWLW6Mb295rWGUXJFyLw1GBrvwK 贴出效果图 按照前辈的指示.我复制代码存为了一个js文件.引入.关于之前的js代码请移步我贴出的链接. 最开始,我一字不改地复制了代码,除了修改了文件上传的url.测试,发现总是

《SAS编程与数据挖掘商业案例》学习笔记之十九

继续<SAS编程与数据挖掘商业案例>学习笔记,本文侧重数据处理实践,包括:HASH对象.自定义format.以及功能强大的正则表达式 一:HASH对象 Hash对象又称散列表,是根据关键码值而直接进行访问的数据结构,是根据关键码值而直接进行访问的数据结构, sas提供了两个类来处理哈希表,用于存储数据的hash和用于遍历的hiter,hash类提供了查找.添加.修改.删除等方法,hiter提供了用于定位和遍历的first.next等方法. 优点:键值的查找是在内存中进行的,有利于提高性能: h

ExtJs 5.0需要注意的问题

1.在网上查找到的一些例子当中,存在new Ext.grid.ColumnModel()这样的操作,在5.0当中这是不允许的,在5.0当中这个已经被设置为私有方法,不允许用户调用,在5.0中我们不需要创建所谓的列模型,只需要在grid中增加一个属性columns,类似代码如下: var grid = new Ext.grid.Panel({ title:'grid', columns:json.column, store:store, width:document.documentElement