谈谈我对Ext的认识，元芳，你怎么看

末蓝、 2022-09-25 10:20 180阅读 0赞

*  实用Ext第一步当然是引用jar包啦。 [下载地址][Link 1]
    
    在页面上加上div用于显示这也是必须的
    
        <div id='loginpanel' ></div>
    
    在js中我们肯定需要将Ext进行初始化，我们的Ext初始化仅需两步
    
        Ext.QuickTips.init();
        Ext.state.Manager.setProvider(newExt.state.CookieProvider());
    
    初始化Ext状态管理器，在Cookie中记录用户的操作状态，如果不启用，象刷新时就不会保存当前的状态，而是重新加载
    
    象如果窗口中有用可拖动面板的话，你在拖动后如果启动了Ext.state.Manager.setProvider(new Ext.state.CookieProvider()),就算刷新后面板仍然会在你拖动后的位置。如果不启用的话是不是就会按照默认的排列方式排列

--------------------

*  Ext的特点就是不需要jsp，我们所有的空间都在js中借助Ext来创建。现在我们来创建几个空间来看看效果吧
    
        var loginNames = new Ext.form.TextField({
                name        : 'userName',
                width:140,
                allowBlank : false,
                maxLength : 16,
                fieldLabel  : Label_Login.loginName,
                listeners : {
                    'specialkey' : function(f, e) { 
                        if (e.getKey() == Ext.EventObject.ENTER) {
                            loginForm.form.findField('password').focus(
                                    true, false);
                        }
                    }
                },
                blankText : Label_Login.loginNameBlank // '用户名不能为空'
                // regex:/^[0-9a-zA-Z]{2,20}$/,
                // regexText:'只能为两到二十位的大小写字母。',
            });

### 【脚注】 ###

上面代码详解点这里1

Ext.onReady(login);

--------------------

*  效果图
    
    ![这里写图片描述][20160819153110165]
 *  创建store
    
        var tab2store = new Ext.data.Store( {
            url : path + '/SysKhyz/getKHyzInstallList.json?id=' + id,
            reader : new Ext.data.JsonReader( {
                fields : [ 'ID', 'NAME', 'MODEL', 'TONS', 'NUM', 'PLACE',
                        'LINE_STATUS' ],
                root : 'rows',
                totalProperty : 'total'
            })
        // autoLoad : true
                });
        tab2store.load( {
            params : {
                start : 0,
                limit : pagesize
            }
        });

--------------------

*  加载grid
    
        var tab2_grid = new Ext.grid.GridPanel( {
            id : 'KhyzInstall',
            // title :'站线信息',
            height : 500,
            trackMouseOver : true,
            region : "center",
            layout : 'fit',
            anchor : '100%',
            frame : false,
            stripeRows : true,
            loadMask : {
                msg : '正在加载数据，请稍后.....'
            },
            ds : tab2store,
            sm : new Ext.grid.CheckboxSelectionModel( {
                singleSelect : false
            }),
            viewConfig : {
                forceFit : true
            },
            columns : [ new Ext.grid.CheckboxSelectionModel(),
                    new Ext.grid.RowNumberer(), {
                        header : '设备名称',
                        sortable : true,
                        width : 220,
                        dataIndex : 'NAME'
                    }, {
                        header : '设备型号',
                        sortable : true,
                        width : 220,
                        dataIndex : 'MODEL'
                    }, {
                        header : '吨位（t）',
                        width : 220,
                        sortable : true,
                        dataIndex : 'TONS'
                    }, {
                        header : '数量',
                        width : 220,
                        sortable : true,
                        dataIndex : 'NUM'
                    }, {
                        header : '配置地点',
                        width : 220,
                        sortable : true,
                        dataIndex : 'PLACE'
                    }, {
                        header : '状态',
                        width : 220,
                        sortable : true,
                        dataIndex : '',
                        renderer : function(v, p, r, i) { 
                            var s = r.get('LINE_STATUS');
                            if (s == '0' || s == 0) {
                                return '待提交';
                            } else if (s == '1' || s == 1) {
                                return '审批中';
                            } else if (s == '2' || s == 2) {
                                return '已通过';
                            } else if (s == '3' || s == 3) {
                                return '已驳回';
                            } else {
                                return '';
                            }
        
                        }
                    }
        
            ],
            bbar : new Ext.PagingToolbar( {
                pageSize : pagesize,
                store : tab2store,
                displayInfo : true,
                displayMsg : '显示第{0}条到{1}条记录，一共{2}条',
                emptyMsg : '没有发现记录'
            })
        });

--------------------

*  按钮事件
    
        var addWin = new Ext.Window(
                {
                    layout : 'fit',
                    width : 1000,
                    height : 400,
                    plain : true,
                    border : false,
                    maximizable : true,
                    title : '新增',
                    items : [ add_formpanel ],
                    modal : true,
                    shadow : true,
                    resizable : false,
                    closeAction : 'hide',
                    maximizable : true,
                    buttons : [
                            {
                                id : 'SaveBtn5',
                                text : '保存',
                                iconCls : 'save',
                                disabled : false,
                                handler : function() { 
                                    Ext.getCmp('SaveBtn5').setDisabled(true);
                                    if (add_formpanel.form.isValid()) {
        
                                        add_formpanel
                                                .getForm()
                                                .submit(
                                                        {
                                                            url : path
                                                                    + '/SysKhyz/savaKHyzInstall.json?TKHYZ_BASE_ID='
                                                                    + id
                                                                    + '&LINE_STATUS=0',
                                                            method : 'POST',
                                                            success : function( form, action) { 
                                                                Ext.MessageBox
                                                                        .alert(
                                                                                "提示信息",
                                                                                "信息保存成功！");
                                                                tab2store
                                                                        .load( {
                                                                            params : {
                                                                                start : 0,
                                                                                limit : pagesize
                                                                            }
                                                                        });
                                                                addWin.hide();
                                                                Ext
                                                                        .getCmp(
                                                                                'SaveBtn5')
                                                                        .setDisabled(
                                                                                false);
                                                            },
                                                            failure : function( form, action) { 
                                                                Ext.MessageBox
                                                                        .alert(
                                                                                "提示信息",
                                                                                "服务器错误,请重试！");
                                                                Ext
                                                                        .getCmp(
                                                                                'SaveBtn5')
                                                                        .setDisabled(
                                                                                false);
                                                            }
                                                        });
                                    } else {
                                        Ext.getCmp('SaveBtn5').setDisabled(false);
                                    }
        
                                }
                            },
                            {
                                text : '提报',
                                iconCls : 'taskSend',
                                handler : function() { 
        
                                    if (add_formpanel.form.isValid()) {
        
                                        add_formpanel
                                                .getForm()
                                                .submit(
                                                        {
                                                            url : path
                                                                    + '/SysKhyz/savaKHyzInstall.json?TKHYZ_BASE_ID='
                                                                    + id
                                                                    + '&LINE_STATUS=1',
                                                            method : 'POST',
                                                            success : function( form, action) { 
                                                                if (action.result.flag) {
                                                                    Ext.MessageBox
                                                                            .alert(
                                                                                    "提示信息",
                                                                                    "信息提报成功！");
        
                                                                } else {
                                                                    Ext.MessageBox
                                                                            .alert(
                                                                                    "提示信息",
                                                                                    "提报流程出错,数据已保存！");
                                                                }
        
                                                                tab2store
                                                                        .load( {
                                                                            params : {
                                                                                start : 0,
                                                                                limit : pagesize
                                                                            }
                                                                        });
                                                                addWin.hide();
                                                            },
                                                            failure : function( form, action) { 
                                                                Ext.MessageBox
                                                                        .alert(
                                                                                "提示信息",
                                                                                "服务器错误,请重试！");
                                                            }
                                                        });
                                    }
        
                                }
        
                            }, {
                                text : '关闭',
                                iconCls : 'clear',
                                handler : function() { 
                                    addWin.hide();
        
                                }
        
                            } ]
                });

--------------------

> 每天进步一点

--------------------

1.  > Label\_Login.loginName系统字段，读者可以改成自己的文字  
    > listeners注册的监听，按下键盘回车就把屏幕焦点放到密码框  
    > blankText是右边错误提示信息
    
    ↩

[Link 1]: http://extjs.org.cn/
[20160819153110165]: /images/20220718/db5c565cec5e49f389baa5f3cc8f9843.png