ExtJS 使用技巧记录

1.引用文件1常用控件开发1文本框1复选框2单选2按钮2下拉2多行文本框2日期文本框2数据源数据设置2列表控件21.引用文件在使用ExtJS的过程中需要引用的样式和脚本文件<link rel="Stylesheet" type="text/css" href="/Lib/Javascript/Ext4.1.0/Resources/CSS/ext-all.css" /><script type="text/javascript" src="/Lib/Javascript/Ext4.1.0/ext-all.js"></script>常用控件开发文本框         Ext.create('Ext.form.Panel', {                title: '文本框¨°',                width: 300,                height: 150,                bodyPadding: 10,                renderTo: Ext.getBody(),                items: [{                    xtype: 'textfield',                    name: 'name',                    id: 'name',                    fieldLabel: '姓名',blankText: '姓名不允许为空!',  //为空时文本框边框变红色曲线，出现设置字体// inputType: 'password'', 设置密码                    allowBlank: false  //文本框不能为空！                }]            });复选框  Ext.create('Ext.form.Panel', {                bodyPadding: 10,                width: 300,                height: 200,                title: '复选框',                items: [                {                        xtype: 'fieldcontainer',                        fieldLabel: '科目',                        defaultType: 'checkboxfield',                        items: [                            {                                boxLabel: '一',                                name: 'topping',                                inputValue: '1',                                id: 'checkbox1'                            }, {                                boxLabel: '二',                                name: 'topping',                                inputValue: '2',                                checked: true,                                id: 'checkbox2'                            }, {                                boxLabel: '三',                                name: 'topping',                                inputValue: '3',                                id: 'checkbox3'                            }                        ]                    }                ],                renderTo: Ext.getBody()            });单选      Ext.create('Ext.form.Panel', {                title: '单选框',                width: 300,                height: 150,                bodyPadding: 10,                renderTo: Ext.getBody(),                items: [        {            xtype: 'fieldcontainer',            fieldLabel: 'Size',            defaultType: 'radiofield',            defaults: {                flex: 1            },            layout: 'hbox',            items: [                {                    boxLabel: 'M',                    checked: true,                    name: 'size',                    inputValue: 'm',                    id: 'radio1'                }, {                    boxLabel: 'L',                    name: 'size',                    inputValue: 'l',                    id: 'radio2'                }, {                    boxLabel: 'XL',                    name: 'size',                    inputValue: 'xl',                    id: 'radio3'                }            ]        }    ]            });按钮  Ext.create('Ext.Button', {                text: '确定 ',                renderTo: Ext.getBody(),                handler: function () {                   alert(‘我是一个按钮！’);                }            });下拉创建一个Store  var states = Ext.create('Ext.data.Store', {                fields: ['abbr', 'name'],                data: [        { "abbr": "1", "name": "1" },        { "abbr": "2", "name": "2" },        { "abbr": "3", "name": "3" }                ]            });            Ext.create('Ext.form.ComboBox', {                fieldLabel: '下?拉¤-',                id: 'cmbList',                store: states,                queryMode: 'local',                displayField: 'name',                valueField: 'abbr',                renderTo: Ext.getBody()            });多行文本框            Ext.create('Ext.form.FormPanel', {                title: '多¨¤行D文?本À?框¨°',                width: 400,                height: 150,                bodyPadding: 10,                renderTo: Ext.getBody(),                items: [{                    xtype: 'textareafield',                    id: 'txtareMessage',                    grow: true,                    name: 'message',                    fieldLabel: 'Message',                    anchor: '100%'                }]            });日期文本框   Ext.create('Ext.form.Panel', {                renderTo: Ext.getBody(),                width: 300,                height: 150,                bodyPadding: 10,                title: '日¨?历¤¨²控?件t',                format: 'Y-m-d H:i:s',                items: [{                    xtype: 'datefield',                    id: 'txtTime',                    anchor: '85%',                    fieldLabel: '时º¡À间?',                    name: 'datetimes',                    value: new Date()                }]            });数据源数据设置清空数据源数据：Ext.getStore("teacherStore").removeAll(false); //清空Ext.getStore("disStore").removeAll(false);     //清空设置数据源数据：Ext.getStore("teacherStore").add(teacher);Ext.getStore("disStore").add(dis);列表控件控件赋值和取值文本框： Ext.getCmp('name').setValue('我是文本框！'); Ext.getCmp('name').getValue();复选框：   Ext.getCmp('checkbox3').setValue(true);Ext.getCmp(' checkbox3').getValue();获取inputValue值,Ext.getCmp('checkbox3').getSubmitValue();单选框：Ext.getCmp("radio1").getValue();Ext.getCmp("radio1").setValue(true);获取inputValue值：Ext.getCmp("radio1").getSubmitValue();下拉框：Ext.getCmp("cmbList").setValue("1");Ext.getCmp("cmbList").getValue();多行文本框：Ext.getCmp("txtareMessage").setValue("我是多选文本框！");                    Ext.getCmp("txtareMessage").getValue();日历控件：Ext.getCmp("txtTime").setValue("1998-10-23");                    Ext.getCmp("txtTime").getValue();