ComboBox組合框。
示例一：顯示本地數據。（相應的一定會有遠程數據，教程一般都是模擬數據，事實上數據處理的能力一定要強）
|
Ext.onReady(function(){ Ext.QuickTips.init();
var store = new Ext.data.SimpleStore({ fields:["city"], data:[ ["北京"], ["廣州"], ["上海"] ] });
var form = new Ext.FormPanel({ renderTo:"form", title:"表單Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ new Ext.form.ComboBox({ id:"city", name:"city", fieldLabel:"城市", triggerAction:"all",//查詢所有數據 store:store, displayField:"city", valueField:"city", mode:"local" }) ] }); });
|
示例二：鍵值對的設置。
|
Ext.onReady(function(){ Ext.QuickTips.init();
var store = new Ext.data.SimpleStore({ fields:["chinese","english"], data:[ ["北京","beijing"], ["廣州","guangzhou"], ["上海","shanghai"] ] });
var form = new Ext.FormPanel({ renderTo:"form", title:"表單Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ new Ext.form.ComboBox({ id:"city", name:"city", fieldLabel:"城市", triggerAction:"all",//查詢所有數據 store:store, displayField:"chinese", valueField:"english", mode:"local" }) ] }); });
|
示例三：獲得value值。
|
Ext.onReady(function(){ Ext.QuickTips.init();
var store = new Ext.data.SimpleStore({ fields:["chinese","english"], data:[ ["北京","beijing"], ["廣州","guangzhou"], ["上海","shanghai"] ] });
var form = new Ext.FormPanel({ renderTo:"form", title:"表單Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ new Ext.form.ComboBox({ id:"city", name:"city", fieldLabel:"城市", triggerAction:"all",//查詢所有數據 store:store, displayField:"chinese", valueField:"english", mode:"local", hiddenName:"cityValue", listeners:{ "select":function(){ Ext.MessageBox.alert("城市","你選擇的城市是" + Ext.get("cityValue").getValue()) } } }) ] }); });
|
示例四：獲得遠程數據。
|
Ext.onReady(function(){ Ext.QuickTips.init();
var store = new Ext.data.SimpleStore({ fields:["chinese","english"], proxy: new Ext.data.HttpProxy({ url:"citySearchServer.jsp" }) });
var form = new Ext.FormPanel({ renderTo:"form", title:"表單Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ new Ext.form.ComboBox({ id:"city", name:"city", fieldLabel:"城市", triggerAction:"all",//查詢所有數據 store:store, displayField:"chinese", valueField:"english", mode:"remote", hiddenName:"cityValue", listeners:{ "select":function(){ Ext.MessageBox.alert("城市","你選擇的城市是" + Ext.get("cityValue").getValue()) } } }) ] }); });
|
|
<%@ page language="java" contentType="text/html; charset=gb2312" pageEncoding="gb2312"%> <% String citys = "[['北京','beijing'],['上海','shanghai'],['廣州','guangzhou'],['長沙','changsha']]"; response.getWriter().write(citys); %> |
示例五：動態查詢。
|
Ext.onReady(function(){ Ext.QuickTips.init();
var store = new Ext.data.SimpleStore({ fields:["chinese","english"], proxy: new Ext.data.HttpProxy({ url:"citySearchServer2.jsp"//現在一般都是前後端分離開發的，但是很久前都是不分離的 }) });
var form = new Ext.FormPanel({ renderTo:"form", title:"表單Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ new Ext.form.ComboBox({ id:"city", name:"city", fieldLabel:"城市", triggerAction:"all",//查詢所有數據 store:store, displayField:"chinese", valueField:"english", mode:"remote", hiddenName:"cityValue", queryParam:"shengfen",//查詢參數 allQuery:"hunan",//查詢值 listeners:{ "select":function(){ Ext.MessageBox.alert("城市","你選擇的城市是" + Ext.get("cityValue").getValue()) } } }) ] }); });
|
|
<%@ page language="java" contentType="text/html; charset=gb2312" pageEncoding="gb2312"%> <% String shengfen = request.getParameter("shengfen");
String beijing = "['北京','beijing']"; String guangdong = "['廣州','guangzhou'],['中山','zhongshan']"; String hunan = "['長沙','changsha'],['益陽','yiyang']";
String citys = ""; if(shengfen.equals("beijing")) { citys = "[" + beijing + "]"; } else if(shengfen.equals("guangdong")) { citys = "[" + guangdong + "]"; } else if(shengfen.equals("hunan")) { citys = "[" + hunan + "]"; } response.getWriter().write(citys); %> |
示例六：ComboBox級聯
|
Ext.onReady(function(){ Ext.QuickTips.init();
var store = new Ext.data.SimpleStore({ fields:["chinese","english"], proxy: new Ext.data.HttpProxy({ url:"citySearchServer2.jsp" }) });
var shenfenstore = new Ext.data.SimpleStore({ fields:["chinese","english"], proxy: new Ext.data.HttpProxy({ url:"shengfenSearchServer.jsp" }) })
var shengfen = new Ext.form.ComboBox({ id:"shengfen", fieldLabel:"省份", triggerAction:"all",//查詢所有數據 displayField:"chinese", valueField:"english", mode:"remote", hiddenName:"shengfenValue", store:shenfenstore, listeners:{ "select":function(combo, record,index){ city.clearValue(); store.proxy = new Ext.data.HttpProxy({ url:"citySearchServer2.jsp?shengfen=" + Ext.get("shengfenValue").getValue() }); store.load(); } } })
var city = new Ext.form.ComboBox({ id:"city", name:"city", fieldLabel:"城市", triggerAction:"all",//查詢所有數據 store:store, displayField:"chinese", valueField:"english", mode:"remote", hiddenName:"cityValue", queryParam:"shengfen",//查詢參數 allQuery:"hunan",//查詢值 listeners:{ "select":function(){ Ext.MessageBox.alert("城市","你選擇的城市是" + Ext.get("cityValue").getValue()) } } })
var form = new Ext.FormPanel({ renderTo:"form", title:"表單Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ shengfen,city ] }); }); |
forceSelection : true, 要求輸入值必須在列表中存在
resizable : true, 允許改變下拉列表的大小
typeAhead : true, 允許自動選擇匹配的剩餘部分文本
value:'beijing', 默認選擇北京
emptyText:'請選擇一個城市//爲空時顯示文本
轉換select組件爲Ext.form.ComboBox的示例
|
Ext.onReady(function(){ var form = new Ext.form.FormPanel({ title:'轉換select組件爲Ext.form.ComboBox的示例', labelSeparator :'：',//分隔符 labelWidth : 80,//標籤寬度 bodyStyle:'padding:5 5 5 5',//表單邊距 frame : true, height:80, width:270, applyTo :'form', items:[ new Ext.form.ComboBox({ name:'level', fieldLabel:'職稱等級', lazyRender : true, triggerAction: 'all',//單擊觸發按鈕顯示全部數據 transform : 'levelName' }) ] }) }); |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>TestFormPanel</title> <script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../Ext/ext-all-debug.js"></script> <script type="text/javascript" src="TestFormPanel3.js"></script> <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css"></link> <style type="text/css"> </style> </head> <body> <SELECT ID="levelName"> <OPTION VALUE="1">高級工程師</OPTION> <OPTION VALUE="2">中級工程師</OPTION> <OPTION VALUE="3" SELECTED>初級工程師</OPTION> <OPTION VALUE="4">高級經濟師</OPTION> <OPTION VALUE="5">中級經濟師</OPTION> <OPTION VALUE="6">初級經濟師</OPTION> </SELECT> </body> </html>
|