Extjs-表單與輸入控制元件
專案中的from
1.Ext.form.FormPanel()表單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(); } }] });
2.formPanel和BasicForm詳解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] });
實際上,表單的功能是在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.jspvar 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 <!--h4的表單控制元件--> <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 獲取