ExtJs教程----控件介绍:文本框，下拉框，时间框，列表,弹窗

1.普通文本框textfield

 xtype: 'textfield',//控件类型
 fieldLabel: '申请人姓名（中文名）',//控件左边的描述文字
 padding: '5 10 5 0',//内边距
 value:"张三"//控件的默认显示值
 labelWidth: 140,//控件左边的描述文字的宽度
 readOnly: true,//是否只读，控件变灰
 editable: false,//是否可以编辑，控件颜色不变
 hidden: true,//是否隐藏该控件   
 regex: /^[A-Za-z\s]+$/,//验证正则表达式
 regexText: '只能输入字母和空格',//正则表达式的错误提示信息
 maxLength: 20,//验证输入文字的最大长度为20给字符 
 allowBlank: false,//是否允许为空
//控件的名称，可以使用Ext.ComponentQuery.query("StudentInfo")[0].getForm().findField("FullName").value取得该控件的值 
name: 'FullName'
//控件的Id,可以使用Ext.ComponentQuery.query("FullName")[0].value取得该控件的值
 itemId: 'FullName'
listeners: {//监听事件             
           "change": function (newValue, oldValue, eOpts) { 
                try {                      
                      //TODO                    
                    }                 
                catch (ex) {                     
                      Ext.MessageBox.alert("错误", "数据加载失败");                    
                    }               
                }            
}

2.下拉框:Combo

大部分的属性和textfield都一样,不一样的地方就可以通过store属性去获取下拉框的内容

   xtype: 'combobox',
   fieldLabel: '教育程度',
   padding: '5 10 5 0',
   allowBlank: false,
   labelWidth: 140,
   value:'',
   name: 'Education',
   itemId: 'Education',
   //当EducationType这个store中的autoLoad属性为true时，页面被打开的时候这个store会自动从后台获取数据， 
   //当用户点击这个下拉框时会直接从本地缓存获取数据，否则会在次调后台的方法获取数据
   queryMode: 'local', editable: false, store: 'common.EducationType', displayField: 'Description',//页面上用来显示的值(Value),和Model中的"Description"保持一致 valueField: 'Code'//实际值(Key),和Model中的"Code"保持一致
   listeners: {//监听事件
                    "select": function (combo, record, index) {
                        try {
                           //ToDo
                        }
                        catch (ex) {
                            Ext.MessageBox.alert("错误", "数据加载失败");
                        }
                    }
                }

   

Store:

Ext.define('ExtJS5Example.store.common.EducationType', {
    extend: 'Ext.data.Store',//继承基类
    alias: 'widget.EducationType',//别名
    autoLoad: true,//store被加载的时候自动调用后台的方法
    autoSync: false,
    model: 'ExtJS5Example.model.ComboBoxModel',
    proxy: {
        type: 'ajax',
        api: {
            read: '/Home/GetEducationType'
        },
        reader: {
            type: 'json',
            successProperty: 'success',
            rootProperty: 'data',
            messageProperty: 'message'
        },
        extraParams: { paramDesc: 'EducationType' },
        listeners: {
            exception: function (proxy, response, operation) {
                Ext.MessageBox.show({
                    title: 'REMOTE EXCEPTION',
                    msg: operation.getError(),
                    icon: Ext.MessageBox.ERROR,
                    buttons: Ext.Msg.OK
                });
            }
        }
    }
});

Model:

Ext.define('ExtJS5Example.model.ComboBoxModel', {
    extend: 'Ext.data.Model',
    alias: 'widget.comboboxModel',
    fields: [
         { name: 'Description', type: 'string' },
         { name: 'Code', type: 'string' }
     ]
});

3.时间控件:datefield

 xtype: 'datefield',
 fieldLabel: '出生年月',
 padding: '5 10 5 0',
 allowBlank: false,
 labelWidth: 140,
 format: 'Y/m/d',//时间的格式化
 name: 'DOB',
 itemId: 'DOB',
 listeners: {
         "blur": function () {
             try {
                 checkDOBofBasic();
                 }
             catch (ex) {
                 Ext.MessageBox.alert("错误", "数据加载失败");
                  }
               }
    }

4.标签：Label

 xtype: 'label',
 text: '年龄',   
 cls: 'lblTitle',//样式
 padding: '0 10 5 20'

5.:复选框：radiogroup

<pre name="code" class="javascript">   xtype: 'radiogroup',
   itemId: 'rgSexCheck',
   fieldLabel: '性别',
   columns: 2,//可以理解为子元素的个数
   vertical: true,//子元素的排列方向
   margin: '5 0 5 0',//外边距
   items: [{
         boxLabel: '男',
         name: 'male',
         inputValue: '0',//实际值，"男"相当于“Description”,“0”相当于"Code"
         padding: '0 20 0 0'
   }, {
          boxLabel: '女',
          inputValue: '1',
          name: 'female',
          padding: '0 20 0 0'
        }],
   listeners: {
        "change": function () {
               //todo
          }
    }                 

6.GridPanel:列表

  xtype: 'gridpanel',
  itemId: 'StudentList',
  width: 770,//列表的宽度
  store: 'ExtJS5Example.StudentList',
  //表头
  columns: [{
            dataIndex: 'StudentID',
            hidden:true,
           }, {
            text: '姓名（中文）',//页面上的描述信息
            width: 120,//列的宽度
            dataIndex: 'Name'//索引，每列的索引不可仪一样
           }, {
            text: '性别',
            width: 60,
            dataIndex: 'Gender'
           }, {
            text: '身份证号码',
            width: 200,
            dataIndex: 'IDNo'
           },  {
            xtype: 'actioncolumn',//操作列，可以操作这一列的数据:增删改查
            text: '编辑',
            width: 70,
            items: [{
                  icon: 'Content/image/edit.gif',
                  margin: '0 0 0 10',
                  tooltip: '',
                  name: '编辑',
                   handler: function (grid, rowIndex, colIndex) {
				//TODO
               }
          }]
   }]

7.Window

Ext.define('ExtJS5Example.view.EditStudentInfo', {
    extend: 'Ext.window.Window',
    alias: 'widget.EditStudentInfo',
    itemId: 'EditStudentInfo',
    requires: ['Ext.form.Panel'], modal: true, title: '编辑学生信息', width: 1100, collapsible: false, defaults: { anchor: '100%', labelWidth: 60 }, items: [{ xtype: 'tabpanel', layout: 'fit', bodyPadding: 10, items: [{
    xtype: 'textfield',
                fieldLabel: '学生姓名',
                padding: '5 10 5 0',
                allowBlank: false,
                labelWidth: 140,
                maxLength: 11,
                regex: /^\d+$/,
                regexText: '只能输入数字',
                name: 'Name',
                listeners: {
                    "change": function () {
                        try {
                            //TODO
                        }
                        catch (ex) {
                            Ext.MessageBox.alert("错误", "数据加载失败");
                        }
                    }
                 }
              }
            ]
           }], 
   buttons: [{ 
          text: '保存', 
          itemId: 'btnsave', 
          action: 'save' 
         }, { 
          text: '关闭', 
          action: 'cancel', 
          handler: function (button) {
             //关闭弹窗
             this.up('window').close(); 
          }
         }], 
     closable: false
}); 

打开弹窗的方式:

Ext.widget('EditStudentInfo', { title: '编辑学生信息' }).show()