Extjs-表单与输入控件

项目中的from

var editForm = new Ext.form.FormPanel({
labelWidth : 120,
labelAlign : 'right',
border : false,
frame : true,
trackResetOnLoad : true,
anchor : '100%',
bodyStyle : 'padding:5px 5px 0',
defaults : {
width : 200,
msgTarget : 'side'
},
reader:new Ext.data.JsonReader({
root:'root',
fields:[
{name : 'MK_BH'},
{name : 'MK_MC'},
{name : 'FATHER_BH'},
{name : 'MK_HERF'},
{name : 'MK_TB'},
{name : 'IS_LEAF'}
]
}),
items : [],
buttonAlign : 'center',
minButtonWidth : 60,
buttons : [{
text : '保存',
handler : function(){
var frm = this.ownerCt.ownerCt.form;
if (frm.isValid()) {
Ext.Ajax.request({
url:'<%=rootpath%>/MkServlet?method=mod',
method : 'post',
params:Ext.Ajax.serializeForm(frm.el.dom),
success : function(response, options){
grid.getStore().reload();
frm.reset();
addWindow.hide();
var c1 = response.responseText;
var c2 = Ext.util.JSON.decode(c1);
Ext.Msg.alert('系统提示', c2.msg);
},
failure : function(response){
Ext.Msg.alert('系统提示', '出错了请联系管理员!');
}
})
}
}
},{
text : '重置',
handler : function() {
this.ownerCt.ownerCt.form.reset();
}
},{
text : '取消',
handler : function() {
this.ownerCt.ownerCt.ownerCt.hide();
}
}]
});

1.Ext.form.FormPanel()表单

var form = new Ext.form.FormPanel({
title: 'form',
defaultType: 'textfield',
//面板的标签对齐方式,有效值left,right,top
labelAlign: 'right',
labelWidth: 50,
//面板按钮的对齐方式,有效值right,left,center
buttonAlign: 'center',
//true表单对象的form.reset()方法重置到最后一次加载的数据或setValues()数据
trackResetOnLoad : true,
//true表示面板边框可定义,false表示边框可1px的点线(解决form背景色问题)
frame:true,
width: 220,
items: [{
fieldLabel: '文本框'
}],
buttons: [{
text: '按钮'
}]
});
new Ext.Viewport({
items : [form]
});

2.formPanel和BasicForm详解

实际上,表单的功能是在Ext.form.BasicForm中实现的,在获取Ext.form.FormPanel之后,随时可以用getForm()获取BasicForm对象,我们可以得到BasicForm上执行提交表格数据和复位表单初始化

3.Ext.form.FormField输入控件

FormField是所有表单输入控件的基类,其实输入控件都是基于FormField扩展来的,
FormField定义了输入控件通用的属性和功能函数,这些通用的属性和功能函数大致分为三大类
页面显示样式:定义不同状态下输入框采用的样式
控件参数配置:设置输入控件生成DOM内容和标签内容,以及是否禁用是否可读等配置
数据有效验证:设置数据效验的方式以及如何显示错误信息
表单输入控件可以使用的效验显示方式,默认情况下,这些输入控件会监听blur事件,如果数据效验失败就会根据msgTarget中设置显示错误信息,
通常msgTarget会设置成qtip,也可以将msgTarget设置为title,side,under

4.Ext.form.TextField文本输入控件

var field = new Ext.form.TextField({
xtype:'textfield',
fieldLabel: 'empty',
allowBlank: false,
name : ''
//emptyText: '空',
//maxLength: 50,
//minLength: 10
});

5.Ext.form.TextArea 多行文本输入控件

var field = new Ext.form.TextArea({
xtype:'textarea',
fieldLabel: 'empty',
allowBlank: false,
name : 'JTZZ'
//grow: true,//表示可以根据内容自动延伸
//preventScrollbars: true,//防止出现滚动条
//emptyText: '空',
//maxLength: 50,
//minLength: 10,
//value: '第一行\n第二行\n第三行\n第四行'
});

6. Ext.form.DateField日期输入控件

var field = new Ext.form.DateField({
xtype:'datefield',
fieldLabel: '日期',
format: 'Y-m-d',
editable:false,
emptyText: '请选择日期',
name : 'RQ'
});

DateField常用配置项

{
//组件类型
xtype:'datefield',
fieldLabel: '日期',
//设置最小值
minValue : '2012-09-05',
//设置最小值
maxValue : '09/10/2012',
//不允许编辑
editable:false,
//为空时显示
emptyText: '请选择日期',
//如何保存选中日期
format: 'Y-m-d',
//禁止一周中的星期,参数值是一个数组,禁止了礼拜天和礼拜六
disabledDays : [0,6],
//字段的HTML名称属性
name : 'RQ'
}

常用方法

listeners:{
'focus' : function(s){
s.getValue();
s.setMinValue();
s.setMaxValue();
s.setDisabledDays([0,6]);
}
}

7.Ext.form.TimeField时间输入控件

var field = new Ext.form.TimeField({
fieldLabel: '时间',
emptyText: '请选择',
minValue: '10:00 AM',//开始
maxValue: '14:00 PM',//结束
increment: 30,//时间间隔
format : 'H:i'//设置为24小时
});

8.Ext.form.HtmlEditor在线编译器

var field = new Ext.form.HtmlEditor({
fieldLabel: '在线编辑器',
enableAlignments: true,
enableColors: true,
enableFont: true,
enableFontSize: true,
enableFormat: true,
enableLinks: true,
enableLists: true,
enableSourceEdit: true,
fontFamilies: ['宋体', '黑体']
});

9.Ext.form.Hidden隐藏域
可以通过getValue()和setValue()对它执行赋值和取值

var field = new Ext.form.Hidden({
name: 'hiddenId'
});
field.setValue("some thing");
var value = field.getValue();

10.Ext.form.Radio()单选框

var field1 = new Ext.form.Radio({
boxLabel : '男',
name : 'sex',
value : '1',
checked : true
});
var field2 = new Ext.form.Radio({
boxLabel : '女',
name : 'sex',
value : '2'
});

10.Ext.form.RadioGroup()单选框组

var field1 = new Ext.form.RadioGroup ({
fieldLabel : '性别',
columns : 2,
items : [
{
boxLabel : '男',
name : 'sex',
inputValue : '0'
},{
boxLabel : '女',
name : 'sex',
inputValue : '1'
}
]
});

11.Ext.form.Checkbox()复选框

var field1 = new Ext.form.Checkbox({
boxLabel : '首先要穿暖',
name : 'check',
value : '1',
checked : true
});
var field2 = new Ext.form.Checkbox({
boxLabel : '然后要吃饱',
name : 'check',
value : '2'
});

12.Ext.form.FieldSet()内部分组

使用style: 'margin-left : 20px'为了第一列和第二列不会靠得太近

var field = new Ext.form.FieldSet({
//checkbox开关
checkboxToggle : true,
//hideLabels : true,//隐藏左侧的fieldLabel
title : '单纯输入',
items : [{
xtype : 'textfield',
fieldLabel : '文本',
width : 200,
name : 'text'
},{
xtype : 'numberfield',
fieldLabel : '数字',
width : 200,
name : 'number'
}]
});

13.文件上传

var field = new Ext.form.TextField({
fieldLabel : '文本框',
name : 'myfile',
inputType : 'file'
});

14.Ext.form.ComboBox下拉框

id : 'combo'对应必须是<input>,不能渲染在DIV
ComboBox原来就是用div包裹一个input和img
注意:hiddenName不能和id重复

14.1将select转化为ComboBox

new Ext.form.ComboBox({
emptyText : '请选择...',
mode : 'local',//本地读取
triggerAction : 'all',
/*
告诉Ext指定的Select中的数据逐条抽取出来,
添加到ComboBox里,最后把Select完全替换成ComboBox
*/
transform : 'combo'
});

<select id = 'combo'>
<option value = '1'>李文超</option>
<option value = '2'>懒蛋</option>
<option value = '3'>道士</option>
<option value = '4'>蛋蛋</option>
</select>

14.2读取本地数据

var field = new Ext.form.ComboBox({
fieldLabel : '选择',
width : 200,
hiddenName : 'combo',
//触发器被激活时执行的动作(解决只能选择一次的错误)
triggerAction : 'all',
store : new Ext.data.SimpleStore({
fields : ['bh','mc'],
data : [
['1','大学'],
['2','高中'],
['3','初中'],
['4','小学']
]
}),
displayField : 'mc',
valueField : 'bh',
//applyTo : 'combo',//把ComboBox画到页面上
//ComboBox读取本地数据则将值设为local,默认为remote表示从服务器读取数据
mode : 'local',
emptyText : '请选择...'
});

14.3读取远程数据

data.txt

[
['1','tom'],
['2','cat'],
['3','sum'],
['4','time']
]

index.jsp

var store = new Ext.data.Store({
autoLoad : true,
proxy : new Ext.data.HttpProxy({
url : 'data.txt'
}),
reader : new Ext.data.ArrayReader({},[
{name : 'id'},
{name : 'name'}
])
});
new Ext.form.ComboBox({
store : store,
emptyText : '请选择...',
mode : 'remote',//远程读取
triggerAction : 'all',
valueField : 'id', //值
displayField : 'name', //显示值
value : '默认值' //默认值
});

14.4带分页的ComboBox

new Ext.form.ComboBox({
store : store,
emptyText : '请选择...',
mode : 'remote',
triggerAction : 'all',
valueField : 'id',
displayField : 'name',
value : '默认值',
//分页
pageSize : 3, //分页使用 每次显示多少条
minListWidth : 300,//分页使用 设置下拉列表的宽度
resizable : true //拖放
});

14.5获取数据

listeners :{
select : function(combo){
alert(combo.getValue()+'-'+combo.getRawValue());
}
}

15.ComboBoxTree下拉框树

使用此组件必须导入ComboBoxTree.js文件,然后在使用的页面带入ComboBoxTree.js

ComboBoxTree.js

Ext.ux.ComboBoxTree = function(){
this.treeId = Ext.id()+'-tree';
this.maxHeight = arguments[0].maxHeight || arguments[0].height || this.maxHeight;
this.tpl = new Ext.Template('' +
'<tpl for=".">' +
'<div style="height:'+this.maxHeight+'px">' +
'<div id="'+this.treeId+'">' +
'</div>' +
'</div>' +
'</tpl>');
this.store = new Ext.data.SimpleStore({fields:[],data:[[]]});
this.selectedClass = '';
this.mode = 'local';
this.triggerAction = 'all';
this.onSelect = Ext.emptyFn;
this.editable = false;
this.beforeBlur = Ext.emptyFn;

//all:所有结点都可选中
//exceptRoot：除根结点，其它结点都可选（默认）

//folder:只有目录（非叶子和非根结点）可选

//leaf：只有叶子结点可选

this.selectNodeModel = arguments[0].selectNodeModel || 'exceptRoot';

this.addEvents('afterchange');

Ext.ux.ComboBoxTree.superclass.constructor.apply(this, arguments);

}

Ext.extend(Ext.ux.ComboBoxTree,Ext.form.ComboBox, {

expand : function(){
Ext.ux.ComboBoxTree.superclass.expand.call(this);
if(this.tree.rendered){
return;
}

Ext.apply(
this.tree,{
height:this.maxHeight,
width:(this.listWidth||this.width-(Ext.isIE?3:0))-2,
border:false, autoScroll:true
});
if(this.tree.xtype){
this.tree = Ext.ComponentMgr.create(this.tree, this.tree.xtype);
}
this.tree.render(this.treeId);

var root = this.tree.getRootNode();
if(!root.isLoaded())
root.reload();

this.tree.on('click',function(node){
var selModel = this.selectNodeModel;
var isLeaf = node.isLeaf();

if((node == root) && selModel != 'all'){
return;
}else if(selModel=='folder' && isLeaf){
return;
}else if(selModel=='leaf' && !isLeaf){
return;
}

var oldNode = this.getNode();
if(this.fireEvent('beforeselect', this, node, oldNode) !== false) {
this.setValue(node);
this.collapse();

this.fireEvent('select', this, node, oldNode);
(oldNode !== node) ?
this.fireEvent('afterchange', this, node, oldNode) : '';
}
}, this);
},
onViewClick : function(doFocus) {

var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);
if (r) {
this.onSelect(r, index);
} else if (s.getCount() === 0) {
this.collapse();
}
if (doFocus !== false) {
this.el.focus();
}
},
setValue : function(node){
this.node = node;
var text = node.text;
this.lastSelectionText = text;
if(this.hiddenField){
this.hiddenField.value = node.id;
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = node.id;
},

defaultValue : function(v,r){
this.lastSelectionText = r;
if(this.hiddenField){
this.hiddenField.value=v;
}
Ext.form.ComboBox.superclass.setValue.call(this,r);
this.value=v;
return this;
},

getValue : function(){
return typeof this.value != 'undefined' ? this.value : '';
},

getNode : function(){
return this.node;
},

clearValue : function(){
Ext.ux.ComboBoxTree.superclass.clearValue.call(this);
this.node = null;
},

// private
destroy: function() {
Ext.ux.ComboBoxTree.superclass.destroy.call(this);
Ext.destroy([this.node,this.tree]);
delete this.node;
}
});

Ext.reg('combotree', Ext.ux.ComboBoxTree);

页面使用

var treePanel = new Ext.tree.TreePanel({
rootVisible: false,
autoScroll:true,
loadingText:'加载中...',
loader: new Ext.tree.TreeLoader({
dataUrl:'getTreeData.jsp',
baseParams : {}
}),
root : new Ext.tree.AsyncTreeNode({
id:'0',
parentId:'',
text:'root',
listeners : {
'load' : function() {
treePanel.expandAll();

}
}
})
});
var comboBoxTree = new Ext.ux.ComboBoxTree({
valueField : 'bh',
displayField : 'mc',
allowBlank : false,
hiddenName:'bdgkBean.GQ_BH',
selectNodeModel:'leaf',
fieldLabel : '部门编号',
emptyText:'请选择部门',
tree : treePanel
});

16.Ext.form.TriggerField下拉框效果图



代码

<script type="text/javascript" defer>
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
var grid = new Ext.grid.GridPanel({
width : 300,
height : 200,
title : 'grid',
store : new Ext.data.SimpleStore({
data : [
['李文超','25'],
['懒蛋','27'],
['道士','24'],
['蛋蛋','23'],
['和尚','18']
],
fields : ['name','sex']
}),
columns : [{
header : '姓名',
dataIndex : 'name'
},{
header : '性别',
dataIndex : 'sex'
}],
viewConfig : {
forceFit : true
}
});
var selectMenu = new Ext.menu.Menu({
items : [grid]
});
var form = new Ext.form.FormPanel({
title : 'form标题',//头部的文本标题
width : 500,
height : 300,
//defaultType : 'textfield',//默认类型
buttonAlign : 'center',
labelAlign : 'right',
labelWidth : 80,
frame : true,
items : [new Ext.form.TriggerField({
id :  'xz',
fieldLabel : '选择',
/*
该方法应该用于处理触发器的click事件
默认为空方法,要被某个实现的方法重写后才会有效
函数主要实现淡出窗体
*/
onTriggerClick : function(){
if(this.menu==null){ //判断menu属性是否存在
this.menu = selectMenu;//不存在给menu属性赋值
}
//"tl-bl?"表示弹出菜单的左上角或者右下角与TF的对齐
this.menu.show(this.el,"tl-bl?");
}
})]
});
grid.on('rowclick',function(grid,rowIndex,e){
selectMenu.hide();//隐藏菜单
var str = grid.getStore().getAt(rowIndex).get('name');
Ext.getCmp('xz').setValue(str);
});
new Ext.Viewport({
items: [form]
});
});
</script>