Ext Js 4 的ComboBox学习与实例

最新推荐文章于 2020-12-25 17:57:08 发布

波哥的技术积累

最新推荐文章于 2020-12-25 17:57:08 发布

阅读量2.2k

点赞数

分类专栏： Ext Js 文章标签： ext extjs autocomplete stylesheet dropdown button

本文链接：https://blog.csdn.net/woshisap/article/details/6663156

版权

Ext Js 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

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>

3：程序效果图