Extjs-表单与输入控件

最新推荐文章于 2021-07-02 23:35:58 发布

itlwc

最新推荐文章于 2021-07-02 23:35:58 发布

阅读量7.9k

点赞数

分类专栏： Extjs 文章标签：编译器扩展

本文链接：https://blog.csdn.net/itlwc/article/details/7872556

版权

Extjs 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

项目中的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>

itlwc

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Extjs-表单与输入控件

项目中的fromvar editForm = new Ext.form.FormPanel({ labelWidth : 120, labelAlign : 'right', border : false, frame : true, trackResetOnLoad : true, anchor : '100%', bodyStyle : 'padding:5p
复制链接

扫一扫

专栏目录