Extjs基础(一)

1.1基础学习
说明：
本示例的所有代码均在extjs6.2版本上测试通过,学习内容来源于官方文档和自己的一些见解。
1.1.1window组件
简单的一个window面板：

title: '窗口标题',
    height: 220,  //可以使用百分比
    width: 220,  
    html: '内容部分',
    resizable: true, //允许改变大小
    modal: true,     //设置遮罩层
    closable: true,   //设置显示关闭按钮
    autoShow: true,  //自动显示
    maximizable: true,//显示最大化按钮
    minimizable: true //显示最小化按钮
});
1
2
3
4
5
6
7
8
9
10
11

一、属性
plain：布尔类型，true表示强制与背景色保持协调，默认值为false。
resizable：布尔类型，用户是否可以调整窗体大小，默认值为true表示可以调整大小。
maxinizable：布尔类型，true表示显示最大化按钮，默认值为false。
maximized：布尔类型，true表示显示窗体时将窗体最大化，默认值为false。
closable：布尔类型，true表示显示关闭按钮，默认值为true。
bodyStyle：与边框的间距，如：bodyStyle:“padding:3px”。
buttonAlign：窗体中button的对齐方式(left、center、right)，默认值为right。
closeAction："close"释放窗体所占内存，“hide"隐藏窗体，建议使用"hide”。

针对单个组件有handler事件可以处理：

二、方法
show：打开窗体。
setHidden(Boolean)：隐藏窗体。
close：关闭窗体。
三、事件
show：打开窗体时触法。
hide：隐藏窗体时触法。
close：关闭窗体时触法。

1.1.2formPanel组件
继上一小节window窗口组件，增加一个表单面板：

const form = Ext.create('Ext.form.Panel', {
    title: '标题',
    width: 200,
    height: 100,
    html: '表单内容',
    style: 'margin:10px',//设置一个样式
    // frame: true
});
1
2
3
4
5
6
7
8

一、属性
width:整型，表单宽度。
height:整型，表单高度。
url:字符串，表单提交地址。
二、方法
reset:表单重置。
isValid:表单是否验证全部通过。
submit:表单提交。



点击提交可以发现有请求信息,但是现在还不能访问远程,简单来说，就是你项目部署在tomcat中,只能是当前项目访问当前的服务端代码,比如/request/update，前面不可以跟上ip地址。
1.1.3TextField
基于上一小节，加入两个文本字段,用户接收用户输入的信息：

items: [   //添加一个输入框,用于测试reset方法
    {
        xtype: 'textfield',
        name: 'username',
        fieldLabel: '用户账号:',
        allowBlank: false,// 表单项非空,
        emptyText: '请输账号',
        blankText: '输入不能为空'
    },
    {
        xtype: 'textfield',
        name: 'password',
        fieldLabel: '用户密码:',
        allowBlank: false,// 表单项非空
        emptyText: '请输入密码',//提示信息
        blankText: '输入不能为空',
        inputType: 'password'
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

|
一、属性
allowBlank：是否允许为空，默认为true
blankText：空验证失败后显示的提示信息
emptyText：在一个空字段中默认显示的信息
grow：字段是否自动伸展和收缩，默认为false
growMin：收缩的最小宽度
growMax：伸展的最大宽度
inputType：字段类型：默认为text
maskRe：用于过滤不匹配字符输入的正则表达式
maxLength：字段允许输入的最大长度
maxLengthText：最大长度验证失败后显示的提示信息
minLength：字段允许输入的最小长度
minLengthText：最小长度验证失败后显示的提示信息
1.1.4Button

 {
    xtype: 'button',
    text: '重置',
    scale: large,//大的按钮,还有small和medium
    enableToggle: true,//有按压效果
    menu: [ //带有下拉列表
        {text: 'Item 1'},
        {text: 'Item 2'},
        {text: 'Item 3'},
        {text: 'Item 4'}
    ],
    handler: function () {
        //  alert('你点击了重置按钮');
    },
    listeners: {//监听多个事件
        click: function () {
            // this == the button, as we are in the local scope
            this.setText('I was clicked!');
        },
        mouseover: function () {
                if (!this.mousedOver) {
                this.mousedOver = true;
         alert('You moused over a button!\n\nI wont do this again.');
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

1.1.5登录界面
通过一个登陆界面把前面的内容串起来:
//创建一个表单

const form = Ext.create('Ext.form.Panel', {
    title: '用户登录',
    width: 300,
    height: 300,
    buttonAlign: 'center',
    // url: 'http://localhost:8080/request/login',
    items: [   //添加一个输入框,用于测试reset方法
        {
            xtype: 'textfield',
            name: 'username',
            fieldLabel: '用户账号:',
            allowBlank: false,// 表单项非空,
            emptyText: '请输账号',
            blankText: '输入不能为空'
        },
        {
            xtype: 'textfield',
            name: 'password',
            fieldLabel: '用户密码:',
            allowBlank: false,// 表单项非空
            emptyText: '请输入密码',//提示信息
            blankText: '输入不能为空',
            inputType: 'password'
        }, {
            //单选按钮
            xtype: 'radiogroup',
            fieldLabel: '选择您的角色:',
            columns: 2,
            vertical: true,
            items: [
                {boxLabel: '学生', name: 'rb', inputValue: '1'},
                {boxLabel: '老师', name: 'rb', inputValue: '2', checked: true}
            ]
        }],
    buttons: [
        {
            xtype: 'button',
            text: '登录',
            handler: function () {
                alert("登录按钮");
            }
        },
        {
            xtype: 'button',
            text: '重置',
            handler: function () {
                form.getForm().reset();
            }
        }
    ]
});
//创建一个Window窗口作为容器
const win = Ext.create('Ext.window.Window', {
        // height: 220,
        // width: 220,
        resizable: true, //允许改变大小
        closable: true,   //设置显示关闭按钮
        autoShow: true,  //自动显示
        maximizable: true,//显示最大化按钮
        minimizable: true, //显示最小化按钮
        buttonAlign: 'center',
        items: form,
        listeners: {
            hide: function () {
                alert('窗口被隐藏');
            }
            ,
            close: function () {
                alert('窗口被关闭');
            }
            ,
            show: function () {
                //  alert('窗口显示出来');
            }
        }
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

1.1.6numberfield，hidden,datefield

{
    //数值字段
    xtype: 'numberfield',
    fieldLabel: '请输入你的身高',
    value: '1.7',
    minValue: '1.0',
    maxValue: '2.5',
    step: '0.1',//每次递减0.1
    blankText: '请输入在1.0-2.5范围的值'
}, {
    //隐藏字段,一般用于向后台提交数据
    xtype: 'hiddenfield',
    name: 'hidden_field_1',
    value: ''
}, {
    //日期控件
    xtype: 'datefield',
    anchor: '100%',
    fieldLabel: '你的生日',
    name: 'birthday',
editable:false,//不允许编辑
    format: 'Y-m-d',//格式化日期显示
    value: new Date()  // defaults to today
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

1.1.7checkboxfield
基于上一小节,接着添加一个复选按钮的控件：

 {
    xtype: 'fieldcontainer',//需要使用这个容器来包含复选按钮
    fieldLabel: '你的爱好:',
    defaultType: 'checkboxfield',
    items: [
        {
            boxLabel  : '写代码',
            name      : 'coding',
            inputValue: '1',
            id        : 'checkbox1'
        }, {
            boxLabel  : '还是写代码',
            name      : 'coding',
            inputValue: '2',
            checked   : true,
            id        : 'checkbox2'
        }, {
            boxLabel  : '继续写代码',
            name      : 'coding',
            inputValue: '3',
            id        : 'checkbox3'
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

1.1.8ComboBox
基于上一小节,接着添加内容：

//数据源
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data: [
        {"abbr": "AL", "name": "群众"},
        {"abbr": "AK", "name": "共青团员"},
        {"abbr": "AZ", "name": "党员"}
    ]
});
//复选按钮
{
    xtype: 'combobox',
    fieldLabel: '政治面貌:',
    value:'群众',//默认值
    store: states,
    queryMode: 'local',//查找数据方式,从本地查找
    displayField: 'name',
    blankText: '请选择你的政治面貌',
    editable: false//不允许编辑
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

1.1.9文件上传

Ext.onReady(function () {
    //窗体
    var win = new Ext.Window({
        title: '上传文件窗口',
        width: 500,
        height: 400,
        resizable: false,
        modal: true,
        closable: true,
        closeAction: 'hide',
    });
    //表单面板
    var addImageForm = new Ext.form.Panel({
        border: false,
        bodyPadding: 5,
        id: 'addImageForm',
        height: 350,
        fieldDefaults: {anchor: '100%'},//填充父窗口
        items: [
            {
                xtype: 'fieldset', title: '图片上传',
                items: [
                    {
                        xtype: 'textfield',
                        fieldLabel: '图片描述:',
                        name: 'picDisc',
                        id: 'picDisc',
                        allowBlank: false,
                        emptyText: '请输入图片的描述信息'
                    }, {
                        xtype: 'filefield',
                        fieldLabel: '上传图片',
                        name: 'pic',//名称需要和服务端保持一致
                        id: 'pic',
                        buttonText: '选择文件',
                        listeners: {
                            change: function (btn, value, eOpts) {
                                var img = Ext.getCmp('img1');
                                var file = btn.fileInputEl.dom.files[0];
                                var url = URL.createObjectURL(file);
                                img.setSrc(url);
                            }
                        }
                    }
                ]
            }, {
                xtype: 'fieldset',
                title: '图片预览',
                layout: 'column',
                items:
                    {
                        xtype: 'image',
                        width: 130,
                        height: 200,
                        id: 'img1'
                    }
            }
        ],
        buttons: [{
            xtype: 'button',
            text: '确认上传', handler: function () {
                var form = this.up('form').getForm();
                if (form.isValid()) {
                    form.submit({
                        url: '/test/upload',
                        method: 'post',
                        submitEmptyText: false,
                        waitMsg: '请稍等，系统正在帮您添加',
                        success: function (form, action) {
                            Ext.MessageBox.alert('成功', action.result);
                        },
                        failure: function (form, action) {
                            Ext.MessageBox.alert('失败', action.result);
                        }
                    })
                }
            }
        }, {
            xtype: 'button',
            text: '重置表单', handler: function () {
                this.up('form').getForm().reset();
            }
        }]
    });
    win.items.add(addImageForm);
    win.show();
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87