ExtJS 使用技巧记录

1.引用文件	1
常用控件开发	1
文本框	1
复选框	2
单选	2
按钮	2
下拉	2
多行文本框	2
日期文本框	2
数据源数据设置	2
列表控件	2


1.引用文件
在使用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();