Ext3.0 boxComponent之表单

一、继承图

表单.jpg

二、表单容器

$\color{blue}{Ext.form.FormPanel }$ 表单面板

1.属性

$\color{blue}{formId }$ 可选，FORM标签的id（默认是自动生成的）。(

$\color{blue}{labelWidth }$ 可选，标签的宽度

$\color{blue}{labelAlign }$ 可选，标签的对齐方式有效值为"left," "top" 和 "right" (默认为"left")

$\color{blue}{labelWidth }$ 可选，标签的宽度

$\color{blue}{labelWidth }$ 可选，标签的宽度

2.方法

$\color{blue}{getForm() }$ 返回该面板包含的Form
getForm()表单的方法

$\color{blue}{getForm().reset() }$ 表单重置

$\color{blue}{getForm().isValid()}$ 表单验证

$\color{blue}{form.getForm().submit(options) }$ 表单提交

三、表单选项基类

$\color{blue}{Ext.form.Field }$ 表单元素的基类，提供事件操作、尺寸调整、值操作与其它功能。

1.属性

$\color{blue}{name }$ 可选，字段的name属性，HTML的name属性

$\color{blue}{value }$ 可选，字段初始化的值（默认为undefined）。

$\color{blue}{inputType }$ 可选，input字段的type属性，诸如 radio、text、password、file等

$\color{blue}{focusClass }$ 可选，当表单元素获取焦点时的CSS样式

$\color{blue}{invalidClass }$ 可选，当出现无效字段所使用上的CSS样式

$\color{blue}{invalidText }$ 可选，表单元素无效时标在上面的文本信息

$\color{blue}{validationEvent }$ 可选，String/Boolean ，初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）

$\color{blue}{msgTarget }$ 可选，错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"，“side”旁边)

$\color{blue}{readOnly }$ 可选，只读

2.方法

$\color{blue}{getName() }$ 获取元素的名称。

$\color{blue}{reset() }$ 重置此元素的值到原始值

$\color{blue}{getValue() }$ 返回格式化后的数据

$\color{blue}{getValue() }$ 返回格式化后的数据

$\color{blue}{getValue() }$ 返回格式化后的数据， $\color{blue}{setValue( Mixed value ) }$ 设置值

$\color{blue}{getRawValue() }$ 返回可能无效的原始值， $\color{blue}{setRawValue( Mixed value ) }$ 跃过验证直接设置DOM元素值

3.事件

$\color{blue}{focus() }$ 获取焦点

$\color{blue}{blur() }$ 失去焦点

$\color{blue}{change() }$ change改变

$\color{blue}{valid() }$ 在此元素被验证有效后触发此事件

四、表单选项

$\color{blue}{单选框组，复选框组}$ checkBoxGroup，radioGroup

$\color{blue}{单选框，复选框}$ checkBox，radio

$\color{blue}{普通输入框}$ TextField

$\color{blue}{功能性输入框}$ textArea多文本输入框，NumberField数字输入框

$\color{blue}{下拉框输入框}$ triggerField（下拉输入框基类）=>DateField，comboBox，timeField

$\color{blue}{html编辑器}$ htmlEditor

$\color{blue}{隐藏域}$ hidden

五、表单选项之Ext.form.TextField（输入框）

主要是增加了对输入内容的 $\color{red}{校验 }$ （输入框边框就会触发，也可以设置失去焦点时 $\color{red}{也}$ 触发），及不符合要求的文字提示

1.属性

$\color{blue}{allowBlank }$ 可选，布尔值，【校验】是否允许为空

$\color{blue}{blankText}$ 可选，【提示】不符合allowBlank的文本提示

$\color{blue}{minLength }$ 可选，number，【校验】字段最少字符控制

$\color{blue}{minLengthText }$ 可选，【提示】不符合minLength时的文本提示

$\color{blue}{maxLength }$ 【校验】字段最多字符控制

$\color{blue}{maxLengthText}$ 【提示】不符合maxLengthText的文本提示

$\color{blue}{validator }$ 可选，Function，函数校验可以执行复杂的校验(会覆盖前面的校验)

$\color{blue}{validateOnBlur }$ 可选，布尔，是否失去焦点时【校验】，默认true(会校验)(对所有校验生效)

$\color{blue}{validationDelay }$ 可选，number，【校验】延迟时间，默认250毫秒(对所有校验生效)

$\color{blue}{selectOnFocus }$ 可选，布尔，是否获得焦点

2.事件

$\color{blue}{keydown() }$ 输入字段键盘下降时的事件

$\color{blue}{keyup() }$ 输入字段键盘升起时的事件

$\color{blue}{keypress() }$ 输入字段键盘升起时的事件

六、表单选项之Ext.form.ComboBox（下拉框）

$\color{blue}{Ext.form.TriggerField }$ 带下拉按钮的输入框，需要自定义触发域，一般作为下拉框基类来使用。

$\color{blue}{Ext.form.ComboBox}$ 在Ext.form.TriggerField基础上提供自动完成、远程加载、分页和许多其他特性的组合框。

1.属性

$\color{blue}{store}$ 必选，该组合框绑定的数据仓库（默认为 undefined）。

$\color{blue}{mode}$ 可选，数据来源，默认"remote"远程。"local"本地

$\color{blue}{editabl}$ 可选，是否可编辑

$\color{blue}{title}$ 可选，下拉框标题

$\color{blue}{displayField}$ 必选，下拉框的显示的值，对应数据源store中的fields中的字段

$\color{blue}{valueField}$ 必选，下拉框的显示值的value，对应数据源store中的fields中的字段

$\color{blue}{hiddenName}$ 可选，如果设置该项，则提交字段为：[hiddenName:valueField]，否则为[name:displayField]

$\color{blue}{triggerAction}$ 可选，/默认为'query'，输入值之后，下拉框显示和输入框相关的字段。“all”，下拉框把所有数据显示

$\color{blue}{pageSize}$ 可选，每页显示个数。只在 mode = 'remote'时生效（默认为 0）。会传递参数，请求参数为limit

$\color{blue}{titloadingTexte}$ 可选，载数据是文本提示

$\color{blue}{listWidth}$ 可选，下拉框宽度，其它可以设置minHeight maxHeight等配置

2.事件

$\color{blue}{expand()}$ 当下拉列表展开的时候触发

$\color{blue}{collapse() }$ 当下拉列表收起的时候触发

$\color{blue}{beforeselect() }$ 列表项被选中前触发。返回 false 可以取消选择

$\color{blue}{select() }$ 当列表项被选中时触发，

$\color{blue}{beforequery() }$ 所有的查询被处理前触发。返回 false取消查询

七、数据仓库 Store

1.使用

/*本地数据源，写法*/
var comboLocalStore=new Ext.data.ArrayStore({
        //数据字段，对应data
        fields: ['id', 'value'],
        //数据
        data: [[1, '江西'], [2, '江苏'], [3, '安徽'],[4, '浙江'], [5, '广东']]
})

/*远程数据，写法*/
var comboRemoteStoreMap=['id','value']; //相当本地数据源写法的fields
var comboRemoteStore = new Ext.data.Store({ //去请求数据，对比本地数据源写法的data
        autoLoad : true,//是否自动加载
        baseParams:comboRemotePostParams,//请求参数，写在请求url前  但这样写是post提交
        //Proxy对象，用于访问数据对象
        proxy: new Ext.data.HttpProxy({ url: 'http://localhost:8080/hello/comboTest'}),//url地址，后面可以带参数，为get提交

        sortInfo : {//如何排序的对象，remoteSort:true为发送请求参数，服务器排序。否则为本地排序
            field : "value",//排序字段
            direction : "ASC",//排序方法
        },
        remoteSort:true,//boolen值 是否远程排序，会添加请求参数【sort,dir】  sort:sortInfo.field  dir:sortInfo.direction
                                  
        reader: new Ext.data.JsonReader({  //处理数据对象的DataReader会返回一个Ext.data.Record对象的数组
            root: 'data',//要解析的json对象
            totalProperty: 'total' //赋值为返回字段的总数
            }, comboRemoteStoreMap),//root的每一项，对比comboLocalStore的fields
        listeners:{
            'beforeload':function(store,options){},//加载之前触发
            'load':function(){}//加载数据之后触发
        }
});

2.属性方法

基本上数组的增删改查操作，可以放在 $\color{red}{load事件}$ 中去执行，或 $\color{red}{load()/reload()方法}$ 的回调函数中执行

$\color{blue}{load(options) }$ 采用配置好的Reader格式去加载数据

$\color{blue}{reload(options) }$ 根据上一次的Reader格式去加载数据

3.事件

$\color{blue}{add() }$ 当有Record添加到Store里面后触发

$\color{blue}{remove() }$ 当Store中的Record被移除后触发

$\color{blue}{datachanged() }$ 数据发生改动的时候触发

$\color{blue}{update() }$ 当有Record改动时触发

$\color{blue}{clear() }$ 当数据缓存被清除的时候触发

$\color{blue}{beforeload() }$ 当请求新的数据对象之前触发

$\color{blue}{load() }$ 当一笔新的Record加载完毕后触发

八、整体代码

1.普通输入框TextField的使用

/* 继承于Ext.form.Field 表单选项 */
var textfield1=new Ext.form.TextField({
        name:'name',//表单提交时的name
        value:undefined,//表单提交时的value,可以设置初始值
        fieldLabel:"姓名",//选项前面的文字
        //以下为TextField自身属性
        emptyText:'请输入名字',//空白时文字
        //【校验】:输入框内容变化就会触发，也可以设置失去焦点时也触发
        allowBlank:false,//【校验】是否允许为空
        blankText:"为空时的文本提示",//【提示】不符合allowBlank的文本提示
        minLength:5,//【校验】字段最少字符控制
        minLengthText:"不符合minLength时的文本提示",//【提示】不符合minLength时的文本提示
        maxLength:10,//【校验】字段最多字符控制
        maxLengthText:"不符合maxLengthText的文本提示",//【提示】不符合maxLengthText的文本提示           
})
//普通输入框,这边测试validator:function校验函数
var textfield2=new Ext.form.TextField({
        name:'age',
        fieldLabel:"年龄",
        emptyText:'请输入年龄',//空白时文字
        inputType:"number",//输入框类型
        //以下为TextField自身属性
        allowBlank:false,//是否允许为空
        msgTarget:"qtip",//设置文本提示位置 
        validateOnBlur:false,//失去焦点时不校验，默认为true（校验）
        validationDelay:1000,//校验延迟，默认250毫秒
        validator:function(value){//函数校验 可以执行复杂的校验,会覆盖其它的校验
            console.log("校验")
            if(value.length<5) return "不符合minLength时的文本提示"
            else if(value.length>10) return "不符合maxLengthText的文本提示"
        }
})

2.下拉框基类TriggerField

/* 继承于Ext.form.TextField 普通输入框 */
//带下拉按钮的输入框，需要自定义触发域，一般作为下拉框基类来使用
var trigger=new Ext.form.TriggerField({
        name:'triggerField',
        fieldLabel:"下拉框基类",
        //其它属性:以下属性为TriggerField方法
        onTriggerClick:function(self){console.log(self,'点击下拉框倒三角会触发这个函数')}
})

3.日期下拉框DateField

/* 继承于Ext.form.TriggerField */
var datefield=new Ext.form.DateField({//拥有TextField属性及日期选择器属性
        name:'date',
        fieldLabel:"日期",
        emptyText:"请输入日期",
        allowBlank:false,
        validateOnBlur:false,
        validator:function(value){//函数校验 可以执行复杂的校验,会覆盖其它的校验
            console.log("日期输入框【校验函数】:"+value);
        },
        //其它属性:以下属性为日期选择器属性，参考日期选择器
        //format: Y M D y m d 可以使用用任何分隔符
        format:'y/m/d/星期D',//Y大写表示完整年份2018，y表示18。M表示十二月，m表示12。D表示星期，d表示天数28
        disabledDays:[1,3,4,5,0],//表示禁止点击的星期。0-6表示日，一，二，三，四，五，六
        disabledDaysText:"这个是鼠标悬浮禁用星期时显示的错误文本",
        listeners:{
            'select':function(self,date){console.log("日期输入框【select事件】:"+date)}
        }
})

4.下拉框ComboBox-本地数据源

/* 继承于Ext.form.TriggerField */
var comboBoxLocal=new Ext.form.ComboBox({
        name:'province',
        fieldLabel:"省份",
        emptyText:"请选择省份",
        allowBlank:false,
        blankText:"为空时的文本提示",//【提示】不符合allowBlank的文本提示
        //其它属性:以下属性comboBox自身属性
        //Ext.form.ComboBox重定义了onTriggerClick:function函数，实现数据下载，显示等
        store:comboLocalStore,//该组合框绑定的数据仓库（默认为 undefined）。
        mode:"local",//如果ComboBox读取本地数据则将值设为'local'（默认为 'remote' 表示从服务器读取数据）。
        editable:true,//是否可编辑   
        title:"这个是下拉框标题",//如果提供了，则会创建一个包含此文本的元素并被添加到下拉列表的顶部 
        displayField:"value",//下拉框显示字段。绑定数据之后，下拉域的key值，对应数据源storm中的fields中的字段
                
        hiddenName:undefined,//下拉框的隐藏name，如果设置了hiddenName  则提交字段为[hiddenName:valueField],如果设置的是name,则提交字段为[name:displayField]
        valueField:"id",//下拉框的value值，对应数据源storm中的fields中的字段
                
        triggerAction:"all",//默认为'query',点击下拉框倒三角加载数据逻辑，是基于输入框内容加载还是加载所有                
        listWidth:200,//以象素表示的下拉列表的宽度其它还有:minHeight maxHeight
        listeners:{
            'select':function(self){//这里是实验load,reload函数的使用。和下面的下拉框起联动作用
                console.log(self);
                console.log(self.value);//valueField值
                console.log(self.lastSelectionText)//displayField值
                //远程加载的store先清空内容
                comboRemoteStore.removeAll();//其实下面add设置false效果一样
                comboboxRemote.clearValue() ;
                comboRemotePostParams.type=self.value;
                comboRemoteStore.reload({//load采用配置好的Reader格式去加载数据,reload 根据上一次的Reader格式去加载数据
                    params: {}, //records,获取的数据;options,load()时传递的参数;success是否成功
                    callback: function (records, options, success) {},//records每一个记录   options代表自身配置,success标识请求状态
                    scope: comboRemoteStore,
                    add: false//设置为true,load()得到的数据会添加到原来store数据的尾部,否则先清除之前的数据,将得到的数据添加到store中
                }); 
            }
        }
})

5.下拉框ComboBox-远程数据源

var comboboxRemote=new Ext.form.ComboBox({
        name:'city',
        fieldLabel:"城市",
        emptyText:"请选择城市",
        allowBlank:false,
        //其它属性:以下属性comboBox自身属性
        store:comboRemoteStore,//该组合框绑定的数据仓库（默认为 undefined）。
        mode:"remote",//数据来源，默认"remote"远程。"local"本地
        editable:true,//是否可编辑   
        title:"这个是下拉框标题",//下拉框标题
        displayField:"value",//下拉框的显示的值，对应数据源store中的fields中的字段
                
        hiddenName:undefined,//下拉框的隐藏name，如果设置了hiddenName则提交字段为[hiddenName:valueField],如果设置的是name,则提交字段为[name:displayField]
        valueField:"id",//下拉框的显示值的value，对应数据源store中的fields中的字段
                
        triggerAction:"all",//默认为'query',点击下拉框倒三角加载数据逻辑，是基于输入框内容加载还是加载所有
        pageSize:4,//每页显示个数 。只在 mode = 'remote'时生效（默认为 0）。会传递参数，参数为limit:4
        loadingText:"这个是加载数据是文本提示",//加载数据是文本提示

        //queryParam可以作为额外参数，作为请求。会传递参数，默认参数为【queryParam值:allQuery值】
        queryParam:"query11",//如果不使用这个额外参数，可以置其值为"",默认"query"
        allQuery:"这里是query提交时的文本",//query提交的文本。即这边提交参数为:[query11:"这里是query提交时的文本"]          

        listWidth:200,//以象素表示的下拉列表的宽度其它还有:minHeight maxHeight
})

5.1下拉框总结

6.时间选择下拉框TimeField

/* 继承于Ext.form.comboBox*/
var timefield=new Ext.form.TimeField({
        name:'time',
        fieldLabel:"时间",
        emptyText:"请选择时间",
        allowBlank:false,
        //以下属性comboBox自身属性
        title:"跨度为30分钟",
        maxHeight:100,//修改下拉框高度
        //TimeField属性
        format:'时间   H:i ',//g 小时:1-12,h 小时:01-12,G 小时:1-23,H 小时:01-23
                            //i 分钟:00-59, s 秒 :00-59,a 上午下午:am pm ,A:AM PM
                            //这边发现bug,a 及  A在下拉框能正常显示，但选择后输入框为空。不是中文问题
        minValue: '9:00 AM',
        maxValue: '6:00 PM',
        increment: 30,//跨度,单位为分钟
});

7.多文本TextArea

/* 继承于Ext.form.TextField*/
var textarea=new Ext.form.TextArea({
        //BoxComponent属性
        width:200,
        height:150,
        //form.field属性
        name:'textarea',
        fieldLabel:"描述",
        //TextField属性
        emptyText:"请描述下你的情况",   
})

8.数字输入框

/* 继承于Ext.form.TextField*/
var numberfield=new Ext.form.NumberField ({
        name:'number',
        fieldLabel:"number加强版输入框",
        emptyText:"请输入",
        //NumberField 自身属性
        minValue:10,
        maxValue:10000,
        decimalPrecision:1,//精度。设置小数点后最大精确位数(默认为 2)。    
})

9.隐藏域Hidden

/* 继承于Ext.form.Field */
var hiddenfield=new Ext.form.Hidden({
        //Ext.form.Field属性
        name:'hiddenField',
        value:'这个是表单隐藏项'
});

11.单选、复选Radio/CheckBox、RadioGroup/CheckBoxGroup

/* 增加单选按钮 组*/   //提交的字段 [name:inputValue]  sex:1
//这个不添加到一个Group中 
var radio_alone=new Ext.form.Radio({//只要是同name,即使不在同一组中，能实现当选效果
    //Ext.form.Field属性
    fieldLabel:"性别'is alone'",//不在Group中，这个属性才生效
    name:'sex',//注意要同name,才能实现单选作用
    //Checkbox属性
    boxLabel:'女',              
    inputValue:"woman",
    checked:true
})
//这个添加到Group中
var radio=new Ext.form.Radio({
    //Ext.form.Field属性
    name:'sex',//注意要同name,才能实现单选作用
    //Checkbox属性,Radio自身没有添加属性
    boxLabel:'女', //checkbox旁边显示的文字
    inputValue:"woman",
    checked:true
})
//radioGroup组
var radioGroup=new Ext.form.RadioGroup({
    //Ext.form.Field属性
    fieldLabel:'性别',
    width:100,
    //checkBoxGroup属性
    items:[{  //这边测试，一个写在里面。一个外面
        boxLabel:'男',
        name:'sex',
        inputValue:"man",
    },radio],
    //columns布局方式，几列。默认"auto",值有：'auto'/Numbel/Array
    columns:2,//这里表示：2列
    allowBlank:false,//是否允许为空
    blankText:"这个是radioGroup不能为空文本提示"//【校验】是否满足allowBlank的文字提示
});
/* 复选框 添加到表单中*/ //提交的字段 [name:inputValue] 得到的是数组 love[1,2]  
var checkbox_alone=new Ext.form.Checkbox({
    //Ext.form.Field属性
    name:'love',
    fieldLabel:"爱好'is alone'",//不在Group中，这个属性才生效
    //Checkbox属性
    boxLabel:'唱歌',
    inputValue:"sing",
    checked:true
})
//这个添加到Group中
var checkbox=new Ext.form.Checkbox({
    //Ext.form.Field属性
    name:'love',
    //Checkbox属性
    boxLabel:'运动',
    inputValue:"sports",
    checked:true
})
//CheckboxGroup组
var checkboxGroup=new Ext.form.CheckboxGroup({
    fieldLabel:'爱好',
    width:800,
    //checkBoxGroup属性
    items:[{//这边测试，一个写在里面。一个外面
        name:'love',
        boxLabel:'上网',
        inputValue:"surf",
    },{
        name:'love',
        boxLabel:'旅游',
        inputValue:"travel",
    },{
        name:'love',
        boxLabel:'购物',
        inputValue:"shopping",
    },checkbox],
    //columns布局方式，几列。默认"auto",值有：'auto'/Numbel/Array
    columns:[0.4,0.2,0.2,0.2],//这里表示：4列，宽度比例为Array中的比例
    allowBlank:false,//是否允许为空
    blankText:"这个是checkGroup不能为空文本提示"//【校验】是否满足allowBlank的文字提示
})

11.1单选、复选总结

单选，复选为了实现单选复选效果，要同name

radio/radioGroup是checkBox/checkBoxGroup的子类，但没有增加其它属性

12.表单容器FormPanel

var form=new Ext.form.FormPanel({
        //Component属性
        renderTo:"form",
        //Container容器属性
        items:[textfield1,textfield2,trigger,datefield,comboBoxLocal,comboboxRemote,
        timefield,textarea,numberfield,hiddenfield,radio_alone,radioGroup,checkbox_alone,checkboxGroup]
})

/*渲染的节点*/
<div id="form"></div>

13.增加提交和重置按钮

var btReset=new Ext.Button({
        text:'重置',
        handler:function(val){
           form.getForm().reset();//表单重置
        }
});
var btSubmit=new Ext.Button({
        text:'提交',
        listeners:{
           'click':function(){
              if(form.getForm().isValid()){//表单校验
                  //获得表单内容
                  console.log(form.getForm().getValues());//获得表单内容，包括隐藏域的
                  form.getForm().submit({
                      url : 'http://localhost:8080/hello/form',//提交地址  
                      waitMsg : '正在提交,请稍等……',  
                      timeout : 100000,  
                      method : 'GET',  
                      reset : false ,   //当成功提交后清空输入域的值  
                      success : function(form,action){     //是与业务相关的只有后台响应为true或响应的JSON包含success:true  
                          Ext.MessageBox.alert('提示', '提交成功');
                      },
                      failure : function(form,action){  //后台响应的JSON包含error:{},就认为连接失败  
                          Ext.Msg.alert('提示','提交失败<br/>');   
                      }  
                  })
              }else{
                  Ext.MessageBox.alert('提示', '输入不合法');
              }}
        }
});

//然后，在表单面板中，增加Buttons属性
//表单
        var form=new Ext.form.FormPanel({
            renderTo:"form",
            items:[textfield1,textfield2,trigger,datefield,comboBoxLocal,comboboxRemote,
                  timefield,textarea,numberfield,hiddenfield,radio_alone,radioGroup,checkbox_alone,checkboxGroup],
            buttons:[btReset,btSubmit]
})

14.图示

form_Run1.jpg

form_Run2.jpg

14.1请求参数的返回格式补充

表单_Run3.jpg

表单_Run4.jpg

15.问题？

表单_Run5.jpg

最后编辑于：2018.12.29 12:57:34

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 219,869评论 6赞 508
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,716评论 3赞 396
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 166,223评论 0赞 357
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 59,047评论 1赞 295
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 68,089评论 6赞 395
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,839评论 1赞 308
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,516评论 3赞 420
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,410评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,920评论 1赞 319
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 38,052评论 3赞 340
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 40,179评论 1赞 352
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,868评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,522评论 3赞 331
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 32,070评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,186评论 1赞 272
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,487评论 3赞 375
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 45,162评论 2赞 356

Ext3.0 boxComponent之表单

一、继承图

二、表单容器

1.属性

2.方法

三、表单选项基类

1.属性

2.方法

3.事件

四、表单选项

五、表单选项之Ext.form.TextField（输入框）

1.属性

2.事件

六、表单选项之Ext.form.ComboBox（下拉框）

1.属性

2.事件

七、数据仓库 Store

1.使用

2.属性方法

3.事件

八、整体代码

1.普通输入框TextField的使用

2.下拉框基类TriggerField

3.日期下拉框DateField

4.下拉框ComboBox-本地数据源

5.下拉框ComboBox-远程数据源

5.1下拉框总结

6.时间选择下拉框TimeField

7.多文本TextArea

8.数字输入框

9.隐藏域Hidden

11.单选、复选Radio/CheckBox、RadioGroup/CheckBoxGroup

11.1单选、复选总结

12.表单容器FormPanel

13.增加提交和重置按钮

14.图示

14.1请求参数的返回格式补充

15.问题？

推荐阅读更多精彩内容