ExtJS4 笔记(Form)

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title: 'User Form',
    height: 130,
    width: 280,
    bodyPadding: 10,
    defaultType: 'textfield',
    items: [
        {
            fieldLabel: 'First Name',
            name: 'firstName'
        },
        {
            fieldLabel: 'Last Name',
            name: 'lastName'
        },
        {
            xtype: 'datefield',
            fieldLabel: 'Date of Birth',
            name: 'birthDate'
        }
    ]
});

   上面是一个普通的Form表单。

 

  FormItem：

   (1):Combobox:--下拉列表

 

 

 上面的代码是在Form里添加了一个combobox，他的下拉数据来源是一个store，并且为他监听了select事件。

//这里是数据
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
        //...
    ]
});

    (2) :Date--日期

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 300,
    bodyPadding: 10,
    title: 'Dates',
    items: [{
        xtype: 'datefield',
        anchor: '100%',
        fieldLabel: 'From',
        name: 'from_date',
        maxValue: new Date()  // 最大时间    }, {
        xtype: 'datefield',
        anchor: '100%',
        fieldLabel: 'To',
        name: 'to_date',
        value: new Date()  // 默认时间    
      },{
        xtype:'datefield',
        anchor:'100%',
        fieldLabel:'Date',
        name:'date',//格式化时间，默认值是new Date()     
	format:'m/d/Y',
        value:new Date()}]
});

   

    (3):DIsplay---单纯显示文本控件

{
        xtype: 'displayfield',
        fieldLabel: 'Visitor',
        name: 'visitor_score',
        value: '11'
    }],

 这是一个不可编辑的文本

 (4):Hidden--隐藏控件

 {
        xtype: 'hiddenfield',
        name: 'hidden_field_1',
        value: 'value from hidden field'
    }],

 （5）:NumberField--数字控件

{
       xtype: 'numberfield',
       anchor: '100%',
       name: 'age',
       fieldLabel: 'Age',
       minValue: 0, //最小值
       hideTrigger: true,//隐藏上下导航的箭头
       keyNavEnabled: false,//禁止通过键盘上下键修改数字
       mouseWheelEnabled: false//禁止通过鼠标滚轮改变数字
}
//由此可见，我们可以通过导航箭头，键盘上下键 和鼠标滚轮来改变数字。

（6）radio  xtype---'radiofield'