ExtJS表单控件
2014-03-22
632
简介：
k代码如下
Php代码
Ext.onReady(function() {
Ext.
k代码如下
-
Ext.onReady(function() {
-
-
Ext.QuickTips.init();
-
Ext.form.Field.prototype.msgTarget = 'side';
-
-
var form1 = new Ext.FormPanel({
-
layout: 'form',
-
collapsible: true,
-
autoHeight: true,
-
frame: true,
-
renderTo: Ext.getBody(),
-
title: '<center style="curor:hand" onclick="window.location.reload();">表单控件</center>',
-
style: 'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;',
-
-
labelAlign: 'right',
-
-
labelWidth: 170,
-
-
buttonAlign:'center',
-
-
defaults:{
-
width:180
-
},
-
items: [{
-
fieldLabel: '文本框控件',
-
name: 'TextBox',
-
xtype: 'textfield'
-
-
-
},{
-
fieldLabel: '只允许输入数字'
-
,name:'TextBoxNumber'
-
,xtype:'numberfield'
-
-
-
-
-
},{
-
fieldLabel: '下拉框控件',
-
name: 'DropDownList',
-
xtype: 'combo',
-
-
mode:'local',
-
-
displayField: "Name",
-
-
valueField: "Id",
-
-
editable : false,
-
typeAhead: true,
-
-
-
-
triggerAction: 'all',
-
-
-
store:new Ext.data.SimpleStore({
-
fields: ['Id', 'Name'],
-
data: [ [1,'男'],[0,'女'] ]
-
})
-
}, {
-
fieldLabel: '日历控件',
-
xtype: 'datefield',
-
name: 'DateControl',
-
format: "Y-m-d",
-
editable : false
-
-
-
},{
-
fieldLabel: '单选控件'
-
,xtype:'radiogroup'
-
,name:'Radios'
-
,items:[
-
{name : 'RadioItems',boxLabel:'选我',inputValue:'1',checked:true},
-
{name : 'RadioItems',boxLabel:'选我吧',inputValue:'0'}
-
]
-
},{
-
fieldLabel: '复选控件'
-
,xtype:'checkboxgroup'
-
,name:'Checkboxs'
-
-
,columns:2
-
,items:[
-
{name : 'CheckboxItems',boxLabel:'香蕉',inputValue:'A'},
-
{name : 'CheckboxItems',boxLabel:'苹果',inputValue:'B'},
-
{name : 'CheckboxItems',boxLabel:'橘子',inputValue:'C'},
-
{name : 'CheckboxItems',boxLabel:'桃子',inputValue:'D'}
-
]
-
},{
-
fieldLabel: '文本域控件'
-
,xtype:'textarea'
-
,value:'可以输好多字！'
-
,height:50
-
},{
-
fieldLabel: '时间控件'
-
,xtype:'timefield'
-
-
-
,format:'H:i'
-
-
,increment: 60
-
},{
-
fieldLabel: '标签页'
-
,xtype:'fieldset'
-
,title: '标签页'
-
,autoHeight:true
-
,items :[{
-
xtype: 'panel',
-
title: '标签页中的面板',
-
frame: true,
-
height: 50
-
}]
-
},{
-
fieldLabel: '在线编辑器'
-
,xtype:'htmleditor'
-
,width:260
-
,height:100
-
-
-
-
-
-
-
-
-
-
}],
-
buttons: [{
-
text: "保 存"
-
,handler:function(){
-
MsgInfo('保存');
-
}
-
}, {
-
text: "取 消"
-
,handler:function(){
-
form1.form.reset();
-
}
-
}]
-
});
-
-
function MsgInfo(str_msg)
-
{
-
Ext.MessageBox.show({
-
title: '提示',
-
msg: str_msg,
-
width: 400,
-
icon:Ext.MessageBox.INFO,
-
buttons: Ext.MessageBox.OK
-
});
-
}
-
});
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
