Extjs-表單與輸入控制元件

阿新 • • 發佈：2019-01-21

專案中的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>

Extjs-表單與輸入控制元件

專案中的from var editForm = new Ext.form.FormPanel({ labelWidth : 120, labelAlign : 'right', border : false, frame : true, trackRe

Extjs4——表單與輸入控件

sel incr () 高度 add eset 自動 extjs 函數 1.表單的簡單形式： var form = new Ext.form.FormPanel({ title: ‘form‘, defaultType: ‘te

表單之textfileld控制元件登陸

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用者登入介面</title>

html表單實現互動,控制元件,可訪問性

實現互動：背景什麼是表單表單如何工作，表單在瀏覽器中如何工作（什麼是控制元件）具體操作<form>語法,post和get區別（外觀上,本質上） -------------------

frm表單-引數面板控制元件上加連結

在實際工作中，我們會用到按鈕控制元件，一般就是想點選不同的按鈕以實現不同的功能，也就是跳轉到不同的表單，這是需要一個按鈕繫結一個js事件（其他控制元件也可以）步驟：選中按鈕>事件&g

angularjs-表單與驗證-表單控制元件的使用

表單控制元件：input/select/textarea  <input type="text"/> <input type="password"/> <input ty

element Form表單自定義校驗（針對區域性輸入控制元件區域性校驗）

最近幫朋友看一個vue專案，需要在整個表單的一個輸入控制元件上新增校驗，因為表單是動態建立的，就沒有考慮整個表單繫結rules，而是在<el-form-item>上綁定了rules，具體程式碼如下： template/html部分： <el-form-i

resetFields 重置一組輸入控制元件的值（為initialValue）與狀態

resetFields 重置一組輸入控制元件的值（為initialValue）與狀態，如不傳引數，則重置所有的元件。用法：Function([name: string[]]) 例子： isSelectChange(value) { //清除所有的 this.pr

關於表單（輸入）常用的驗證

content user urn doctype mage tran nav pid clas 現在輸入經常通過ajax提交，所以我也沒有直接寫表單的驗證。凡是輸入其實都是可以驗證的。說到驗證，我們習慣於在輸入之後馬上就能返回結果，在這一點上ajax能有不錯的效果。但是大部

css總結18：HTML 表單和輸入

進行 ons 單選允許 word pan 通過定義 file 1 HTML 表單和輸入 1.1 HTML 表單介紹表單是一個包含表單元素的區域。表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選

Python Tornado初學筆記之表單與模板（一）

too pan ade pin 只需要過濾擴展 python代碼 squeeze Tornado中的表單和HTML5中的表單具有相同的用途，同樣是用於內容的填寫。只是不同的是Tornado中的表單需要傳入到後臺，然後通過後臺進行對模板填充。

ionic-CSS：ionic 表單和輸入框

輸入框 hit col 標簽字段 head wid AS wrapper ylbtech-ionic-CSS：ionic 表單和輸入框 1.返回頂部 1、 ionic 表單和輸入框 list 類同樣可以用於 input 元素。item-in

JQuery擴展方法實現Form表單與Json互相轉換

val adjust new 映射 checked josn fin pop undefined JQuery筆記記兩段代碼，使用JQuery實現從表單獲取json與後端交互，以及把後端返回的json映射到表單相應的字段上。把表單轉換出json對象 //把表單

讓表單的輸入框不顯示歷史輸入記錄

記錄 clas 歷史 ext spa span toc tex 顯示 <input name="test" type="text" id="test" autocomplete="off"/> 讓表單的輸入框不顯示歷史輸入記錄

android獲取螢幕寬高與獲取控制元件寬高

// 獲取螢幕寬高（方法1） int screenWidth = getWindowManager().getDefaultDisplay().getWidth(); // 螢幕寬（畫素，如：480px） int screenHeight = getWindowManager().getDe

使用layer彈窗提交表單時判斷表單是否輸入為空

使用layer彈窗提交表單時判斷表單是否輸入為空獲得 layer 檔案包後，解壓並將 layer 整個資料夾（不要拆分結構）存放到你專案的任意目錄，使用時，只需引入 layer.js 即可使用時一定他要先引入jq1.8，或者以上版本！！！下面是提交表單的實列

C語言Windows程式開發—Windows視窗樣式與常用控制元件樣式【第04天】

（一）Windows視窗（MDICLIENT）樣式介紹 1 /* Windows視窗樣式 */ 2 WS_BORDER //帶有邊框的視窗 3 WS_CAPTION //帶有標題欄的視窗 4 WS_CHILD

RxSwift：Driver與UI控制元件初體驗

輸入電話號碼的區號和八位數主體號碼，下面的Label實時更新最新的輸入，如果區號為3位數，點選按鈕，按鈕名字變成“變！” Ps：目前還不會，同時滿足上面兩位，下面三位的的約束，以後會更新的檔名：ViewController.swift // // ViewController.swi

ZK輸入控制元件的約束

Constraint 約束規則約束條件解析 no empty 輸入不能為空 no future 不能是以後的時間。用於datebox

從零開始的全棧工程師——js篇2.14（表單與定時器）

一、表單 Form input select textarea type=”radio/checkbox/password/button/text/submit/reset/” 表單的事件 onchange 當表單內容被修改時觸發的事件 onfocus 獲取

Extjs-表單與輸入控制元件

相關推薦