Ext.widgets-form(下)ComboBox,TimeField,DateField,TriggerField,TextArea,NumberField

Ext.form.NumberField
继承自Ext.form.TextField,因为Ext.form.TextField虽然强大,但写起来的确还是有点麻烦,后面的类都继承自Ext.form.TextField,没有自定义的方法,属性和事件

config定义为{
    allowDecimals : Boolean    //true
    allowNegative : Boolean    //true
    baseChars : String    //'0123456789'
    decimalPrecision : Number    //精度,默认值2
    decimalSeparator : String    //小数分隔符
    fieldClass : String    //默认样式为x-form-field x-form-num-field
    maxText : String
    maxValue : Number    //默认Number.MAX_VALUE
    minText : String
    minValue : Number    //默认Number.NEGATIVE_INFINITY
    nanText : String    //NaN时显示?
}

 Ext.form.TextArea

 config{
    autoCreate : String/Object    //{tag: "textarea", style: "width:100px;height:60px;", autocomplete: "off"}
    growMax : Number    //1000
    growMin : Number    //60
    preventScrollbars : Boolean    //如果为真等于设置overflow: hidden,默认为false
 }

 Ext.form.TriggerField
 这个类只要text旁边加了个下拉按钮,要自己实现onTriggerClick
 config{
    autoCreate : String/Object,    //{tag: "input", type: "text", size: "16", autocomplete: "off"}
    hideTrigger : Boolean        //隐藏trigger,就是右边的那个下拉选择框
    triggerClass : String

}
事件
onTriggerClick( EventObject e ) : void


Ext.form.DateField
继承自TriggerField,用于日期选择

config{
    altFormats : String        //转换用户输入到日期时的格式,默认'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d'
    autoCreate : String/Object    //{tag: "input", type: "text", size: "10", autocomplete: "off"}
    disabledDates : Array        //禁止选择的日期:例 ["^03","04/../2006","09/16/2003"],不让选3月,2006年4月,2003年9月16
    disabledDatesText : String    //不让选总得给个理由吧
    disabledDays : Array    //不让选星期几,例[0,6],不让选周六,周日
    disabledDaysText : String    //周日要休息,这就是理由
    format : String    //显示时的格式
    invalidText : String    //验证非法时的提示
    maxText : String
    maxValue : Date/String
    minText : String
    minValue : Date/String
    triggerClass : String
}

方法,除了构造,多了两个顾名思义的方法
DateField( Object config )
getValue() : Date
setValue( String/Date date ) : void



Ext.form.ComboBox
config{
    allQuery : String        //''
    autoCreate : Boolean/Object    //{tag: "input", type: "text", size: "24", autocomplete: "off"}
    displayField : String    //显示字段
    editable : Boolean        //true当然就是combobox了,如果不可编辑就是一个select了
    forceSelection : Boolean
    handleHeight : Number    //如果resiable为真时,设置
    hiddenName : String
    lazyInit : Boolean    //除非得到焦点才开始初始化列表,默认为真
    lazyRender : Boolean    //除非请求,才开始输出,默认为假
    listAlign : String    //对齐方式,参见Ext.Element.alignTo,默认为'tl-bl'
    listClass : String
    listWidth : Number
    loadingText : String    //仅当mode = 'remote'时调用数据时显示的文本
    maxHeight : Number        //300
    minChars : Number        //最少输入多少个字开始响应,远程时默认为4,本地为0,如果不可编辑则此值无效
    minListWidth : Number
    mode : String    //可选值local/remote之一,从本地还是远程取数据
    pageSize : Number    //在远程模式下,如果此值大于0会在底部显示一个翻页工具条
    queryDelay : Number    //查询延时,远程默认为500,本地10
    queryParam : String    //查询参数,默认为query
    resizable : Boolean
    selectOnFocus : Boolean
    selectedClass : String
    shadow : Boolean/String    //True或"sides"为默认风格, "frame" for 4-way shadow, and "drop" for bottom-right
    store : Ext.data.Store
    title : String
    transform : Mixed    //对应一个select元素,可以将select转为combobox对象
    triggerAction : String    //点击按钮时的动作.默认为query
    triggerClass : String
    typeAhead : Boolean        //false
    typeAheadDelay : Number    //250
    valueField : String
    valueNotFoundText : String    //值不存在时的提示信息
}

属性
view : Ext.DataView

方法
ComboBox( Object config )
构造

clearValue() : void
清除所有文本/值对

collapse() : void
expand() : void
收起/展开下拉列表

doQuery( String query, Boolean forceAll ) : void
执行查询

getValue() : String
选择当前字段的值

isExpanded() : void
下拉列表是展开的?

select( Number index, Boolean scrollIntoView ) : void
选中第index列表项

selectByValue( String value, Boolean scrollIntoView ) : Boolean
选中值为value的列表项

setEditable( Boolean value ) : void
设editable属性为value

setValue( String value ) : void
设置当前值为

事件
beforequery : ( Object queryEvent )
beforeselect : ( Ext.form.ComboBox combo, Ext.data.Record record, Number index )
collapse : ( Ext.form.ComboBox combo )
expand : ( Ext.form.ComboBox combo )
select : ( Ext.form.ComboBox combo, Ext.data.Record record, Number index )


Ext.form.TimeField
继承自combobox,用于选择时间
config{
    altFormats : String    //
    format : String
    increment : Number    //时间增长间隔,默认15
    invalidText : String
    maxText : String
    maxValue : Date/String
    minText : String
    minValue : Date/String
}

总的来说Ext.form对input type='text' select 这样的输入标签都有对应的类,并对有些标签做了简单的扩展,当然很重要的一点,漂亮多了,vtype属性也方便了处理,建议有兴趣的同胞对Ext.form.VTypes和Ext.form.HtmlEditor做一些扩展
form中还有两个类,比如下例中的FormPanel和FieldSet,
都继承自panel,所以会放在panel中解释

综合示例
   

Ext.QuickTips.init();
   
    
var arr=[ [1'本.拉登'], [2'笨.拉登'],[3'笨.拉灯'] ];
    
var reader = new Ext.data.ArrayReader(
   
{id: 0},
   [
    
{name: 'value'},        
    
{name: 'key'}   
    ]);
   
    
var store=new Ext.data.Store({
      reader:reader
   }
);
   store.loadData(arr);
   
    
var htmleditor=new Ext.form.HtmlEditor({
        fieldLabel:
'htmleditor',
        width:
450,
        fontFamilies:[
'宋体','隶书'],
        name:
'editor',
        id:
'editor'
    }
);
       
var form = new Ext.FormPanel({
        labelWidth: 
75,
        url:
'post.php',
        frame:
true,
        width: 
800,
        defaultType: 
'textfield',
        items: [
            
new Ext.form.Checkbox({     //checkbox
                fieldLabel:'checkbox',
                name:
'cb',
                checked:
true,
                boxLabel:
'checkbox'
            }
),
            
new Ext.form.FieldSet(//radio
                border:false,
                title:
'radio',
                items:[
                    
new Ext.form.Radio({
                        labelSeparator:
'',
                        name:
'radio',
                        checked:
true,
                        boxLabel:
'radio 1'
                    }
),
                    
new Ext.form.Radio({
                        labelSeparator:
'',
                        name:
'radio',
                        checked:
true,
                        boxLabel:
'radio 2'
                    }
)
                ]
             }
),
            
new Ext.form.Hidden({   //hidden
                name:'hidden'
            }
),
           
            htmleditor,
            
new Ext.form.TextField(//text
                fieldLabel:'text',
                name:
'text',
                grow:
true,
                allowBlank:
false,
                blankText : 
"这个字段最好不要为空",
                maskRe:
/[a-zA-z]/gi
            }
),
            
new Ext.form.NumberField({  //NumberField
                allowNegative:true,
                fieldLabel:
'number',
                  name:
'number'
            }
),
            
new  Ext.form.TextArea({    //TextArea
                fieldLabel:'textarea',
                name:
'textarea'
            }
),
            
new Ext.form.TriggerField(//TriggerField
                fieldLabel:'TriggerField',
                name:
'TriggerField'
            }
),
            
new Ext.form.ComboBox(//select
                fieldLabel:'select',
                editable:
false,
                triggerAction: 
'all',
                valueField:
'value',
                displayField:
'key',
                mode: 
'local',
                store:store
            }
),
            
new Ext.form.ComboBox(//combobox
                fieldLabel:'ComboBox',
                displayField:
'key',
                mode: 
'local',
                store:store
            }
),
            
new Ext.form.DateField(//DateField
                fieldLabel:'DateField',
                format:
'Y-m-d',
                disabledDays:[
0,6]
            }
),
            
new Ext.form.TimeField({//TimeField
                fieldLabel:'TimeField',
                mode: 
'local',
                increment:
60
               
            }
)
            ]
        }
);
form.render(document.body);

htmleditor.setRawValue(
"<h1>hello world</h1>");
htmleditor.syncValue();
 
posted @ 2008-05-23 21:19 meetrice 阅读(...) 评论(...) 编辑 收藏