Ext.widgets-form(下)ComboBox,TimeField,DateField,TriggerField,TextArea,NumberField
2007-12-04 12:45
399 查看
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中解释
综合示例
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
Ext.QuickTips.init();
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
var arr=[ [1, '本.拉登'], [2, '笨.拉登'],[3, '笨.拉灯'] ];
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
var reader = new Ext.data.ArrayReader(
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
...{id: 0},
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
[
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
...{name: 'value'},
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
...{name: 'key'}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
]);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
var store=new Ext.data.Store(...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
reader:reader
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
});
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
store.loadData(arr);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
var htmleditor=new Ext.form.HtmlEditor(...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'htmleditor',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
width:450,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fontFamilies:['宋体','隶书'],
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
name:'editor',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
id:'editor'
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
});
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
var form = new Ext.FormPanel(...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
labelWidth: 75,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
url:'post.php',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
frame:true,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
width: 800,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
defaultType: 'textfield',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
items: [
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.Checkbox(...{ //checkbox
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'checkbox',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
name:'cb',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
checked:true,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
boxLabel:'checkbox'
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.FieldSet(...{ //radio
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
border:false,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
title:'radio',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
items:[
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.Radio(...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
labelSeparator:'',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
name:'radio',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
checked:true,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
boxLabel:'radio 1'
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.Radio(...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
labelSeparator:'',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
name:'radio',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
checked:true,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
boxLabel:'radio 2'
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
})
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
]
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.Hidden(...{ //hidden
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
name:'hidden'
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
htmleditor,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.TextField(...{ //text
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'text',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
name:'text',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
grow:true,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
allowBlank:false,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
blankText : "这个字段最好不要为空",
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
maskRe:/[a-zA-z]/gi
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.NumberField(...{ //NumberField
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
allowNegative:true,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'number',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
name:'number'
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.TextArea(...{ //TextArea
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'textarea',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
name:'textarea'
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.TriggerField(...{ //TriggerField
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'TriggerField',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
name:'TriggerField'
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.ComboBox(...{ //select
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'select',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
editable:false,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
triggerAction: 'all',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
valueField:'value',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
displayField:'key',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
mode: 'local',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
store:store
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.ComboBox(...{ //combobox
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'ComboBox',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
displayField:'key',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
mode: 'local',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
store:store
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.DateField(...{ //DateField
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'DateField',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
format:'Y-m-d',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
disabledDays:[0,6]
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.TimeField(...{//TimeField
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'TimeField',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
mode: 'local',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
increment:60
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
})
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
]
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
});
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
form.render(document.body);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
htmleditor.setRawValue("<h1>hello world</h1>");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
htmleditor.syncValue();
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
继承自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中解释
综合示例
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
Ext.QuickTips.init();
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
var arr=[ [1, '本.拉登'], [2, '笨.拉登'],[3, '笨.拉灯'] ];
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
var reader = new Ext.data.ArrayReader(
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
...{id: 0},
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
[
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
...{name: 'value'},
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
...{name: 'key'}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
]);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
var store=new Ext.data.Store(...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
reader:reader
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
});
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
store.loadData(arr);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
var htmleditor=new Ext.form.HtmlEditor(...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'htmleditor',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
width:450,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fontFamilies:['宋体','隶书'],
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
name:'editor',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
id:'editor'
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
});
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
var form = new Ext.FormPanel(...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
labelWidth: 75,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
url:'post.php',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
frame:true,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
width: 800,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
defaultType: 'textfield',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
items: [
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.Checkbox(...{ //checkbox
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'checkbox',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
name:'cb',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
checked:true,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
boxLabel:'checkbox'
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.FieldSet(...{ //radio
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
border:false,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
title:'radio',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
items:[
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.Radio(...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
labelSeparator:'',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
name:'radio',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
checked:true,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
boxLabel:'radio 1'
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.Radio(...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
labelSeparator:'',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
name:'radio',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
checked:true,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
boxLabel:'radio 2'
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
})
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
]
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.Hidden(...{ //hidden
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
name:'hidden'
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
htmleditor,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.TextField(...{ //text
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'text',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
name:'text',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
grow:true,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
allowBlank:false,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
blankText : "这个字段最好不要为空",
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
maskRe:/[a-zA-z]/gi
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.NumberField(...{ //NumberField
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
allowNegative:true,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'number',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
name:'number'
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.TextArea(...{ //TextArea
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'textarea',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
name:'textarea'
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.TriggerField(...{ //TriggerField
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'TriggerField',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
name:'TriggerField'
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.ComboBox(...{ //select
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'select',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
editable:false,
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
triggerAction: 'all',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
valueField:'value',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
displayField:'key',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
mode: 'local',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
store:store
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.ComboBox(...{ //combobox
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'ComboBox',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
displayField:'key',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
mode: 'local',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
store:store
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.DateField(...{ //DateField
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'DateField',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
format:'Y-m-d',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
disabledDays:[0,6]
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}),
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
new Ext.form.TimeField(...{//TimeField
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
fieldLabel:'TimeField',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
mode: 'local',
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
increment:60
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
})
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
]
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
});
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
form.render(document.body);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
htmleditor.setRawValue("<h1>hello world</h1>");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
htmleditor.syncValue();
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
相关文章推荐
- Ext.widgets-form(下)ComboBox,TimeField,DateField,TriggerField,TextArea,NumberField
- Ext.widgets-form(下)ComboBox,TimeField,DateField,TriggerField,TextArea,NumberField
- Ext.widgets-form(下)ComboBox,TimeField,DateField,TriggerField,TextArea,NumberField
- Ext.widgets-form(下)ComboBox,TimeField,DateField,TriggerField,TextArea,NumberField
- Ext.widgets-form(下)ComboBox,TimeField,DateField,TriggerField,TextArea,NumberField(转)
- Ext.widgets-form(下)ComboBox,TimeField,DateField,TriggerField,TextArea,NumberField
- Ext.widgets-form(下)ComboBox,TimeField,DateField,TriggerField,TextArea,NumberField
- Ext.widgets-form(上)BasicForm/Field/Checkbox/Radio/HtmlEditor/TextField
- Ext.form.ComboBox 设置默认值为第一个值
- Ext.form.ComboBox 动态加载数据后设置下拉选项
- EXTJS学习系列提高篇:第二十九篇(转载)作者殷良胜,ext2.2打造Ext.form.ComboBox系列--树形结构
- 修改Ext.DatePicker使得Ext.form.DateField只选择年月
- Ext Ext.form.combobox使用注意事项
- Ext.form.ComboBox调用store.filterBy失效问题
- Ext.widgets-form(上)BasicForm/Field/Checkbox/Radio/HtmlEditor/TextField
- EXT核心API详解Ext.widgets(十六)-form(下)
- [转载]EXT核心API详解Ext.widgets(十六)-form(下)
- 组合框Ext.form.field.ComboBox
- 继承Ext.form.DateField只选择年月
- 扩展Ext.form.DateField实现定义日期面板默认展示日期