1：简单介绍
A combobox control with support for autocomplete, remote loading, and many other features.
A ComboBox is like a combination of a traditional HTML text
<input>
field and a
<select>
field; the user is able to type freely into the field, and/or pick values from a dropdown selectionlist. The user can input any value by default, even if it does not appear in the selection list;to prevent free-form values and restrict them to items in the list, set forceSelection to
true
.
The selection list's options are populated from any Ext.data.Store, including remotestores. The data items in the store are mapped to each option's displayed text and backing value viathe valueField and displayField configurations, respectively.
If your store is not remote, i.e. it depends only on local data and is loaded up front, you should besure to set the queryMode to
'local'
, as this will improve responsiveness for the user.
2：程序代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>ComboBox</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="ExtJS4/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJS4/bootstrap.js"></script>
<script type="text/javascript" src="ExtJS4/ext-all.js" ></script>
<script type="text/javascript" src="ExtJS4/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" >
Ext.onReady(function() {
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['value', 'text'],
data : [
{"value":"1", "text":"长沙市"},
{"value":"2", "text":"株洲市"},
{"value":"3", "text":"湘潭市"},
{"value":"4", "text":"邵阳市"}
]
});
// Create the combo box, attached to the states data store
var combo = Ext.create('Ext.form.ComboBox', {
fieldLabel: '您喜欢湖南的哪个城市',
store: states, //设置下拉列表框的数据源
queryMode: 'local', //设置数据已经读取到本地
displayField: 'text',
valueField: 'value',
});
var button = Ext.create('Ext.Button', {
text: '获取下拉列表的值',
handler: function() {
Ext.MessageBox.alert('选择的ComboBox的值', '实际值:'+combo.getValue()+', 显示值:' + combo.getRawValue());
}
});
Ext.create('Ext.form.Panel', {
title: '社会大调查',
width: 300,
bodyPadding: 10,
renderTo: 'form1',
items: [
combo,
button
]
});
});
</script>
</head>
<body>
<div id="form1"></div>
</body>
</html> ![Ubuntu 自动挂载Windows分区 或 Linux分区[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)