`

Extjs之旅-combox之本地加载数据

阅读更多
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/"/>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="shared/example.css" />
<script type="text/javascript" src="js/ext/ext-all.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
Ext.onReady(function(){

//创建数据模型
 Ext.regModel('postInfo',{
	 fields:[{name:'province'},{name:'post'}]
 });
 
 //定义组合框中显示的数据源
 var postStore = Ext.create('Ext.data.Store',{
	 model:'postInfo',
	 data:[
	 {province:'北京',post:'100000'},
	 {province:'通县',post:'101100'},
	 {province:'昌平',post:'102200'},
	 {province:'大兴',post:'102600'},
	 {province:'密云',post:'101500'},
	 {province:'延庆',post:'102100'},
	 {province:'顺义',post:'101300'}
	 ]
 });
 //创建表单
 Ext.create('Ext.form.Panel',{
	 title:'Ext.form.ComboBox本地数据源演示',
	 renderTo:Ext.getBody(),
	 bodyPadding:5,
	 frame:true,
	 height:100,
	 width:270,
	 defaults:{
		 labelSeparator:': ',
		 labelWidth:70,
		 width:200,
		 labelAlign:'left'
		 
	 },
	 items:[{
		 xtype:'combo',
		 listConfig:{
			 emptyText:'未找到匹配值',
			 maxHeight:60
		},
		 name:'post',
		 fieldLabel:'邮政编码',
		 triggerAction:'all',//单击按钮显示全部数据
		 store:postStore,
		 displayField:'province',//定义要显示的字段
		 valueField:'post',
		 queryMode:'local',//本地模式
		 forceSelection:true,//要求输入值必须在列表中存在
		 typeAhead:true,//允许自动选择匹配的剩余部分文本
		 value:'102600'//默认值
	 }]
 });
});
</script>
</head>
<body>
<div id="form"></div>
</body>
</html>

 

分享到:
评论

相关推荐

    Extjs之旅-combox之远程加载数据

    本篇我们将深入探讨“Extjs之旅”中的一个关键组件——Combox(组合框),特别是其远程加载数据的特性。 Combox在ExtJS中是一个非常灵活的控件,它可以看作是下拉列表和文本输入框的结合体,用户可以输入文本搜索,...

    ExtJs常用布局--layout详解实例代码

    ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...

    extjs-620-docs.zip

    extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档

    Extjs之--图片浏览器

    综上所述,这个“Extjs之--图片浏览器”项目涉及到了Ext JS的组件使用、数据绑定、样式设计、用户交互等多个方面,为开发者提供了一种用JavaScript实现图片浏览功能的解决方案。通过阅读提供的博客文章和分析...

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    extjs-theme-bootstrap

    "extjs-theme-bootstrap" 是针对 EXTJS4 的一个主题,它借鉴了 Bootstrap 的设计风格,让 EXTJS4 应用程序具有更加现代化和一致的外观。 Bootstrap 是一个流行的前端开发框架,由 Twitter 推出,主要用于构建响应式...

    extjs-json-数据转换

    使用ExtJs获取后台json格式的数据必须的七个jar包,commons-beanuti-1s-1.7.0.jar,commons-collections-3.1.jar,commons-lang-2.5.jar,commons-logging-1.0.4.jar,ezmorph-1.0.4.jar,json-lib-2.1.jar,...

    Extjs4---combobox省市区三级联动+struts2

    在这个特定的项目“Extjs4---combobox省市区三级联动+struts2”中,我们将探讨如何利用ExtJS 4的ComboBox组件实现省市区的三级联动效果,并结合Struts2框架进行数据交互。 首先,`ComboBox`是ExtJS中的一个组件,它...

    ExtJS快速入门--传智播客--蔡世友

    ExtJS快速入门--传智播客--蔡世友

    extjs2----关于extjs 的使用,操作

    4. **数据绑定**:阐述ExtJS的数据模型(Store)和数据显示组件(Grid、Tree)之间的数据绑定机制,包括XML、JSON数据源的加载。 5. **表单元素**:深入探讨表单(Form)的创建,包括各种表单字段(TextField、...

    extJs-5.0.1-gpl(part1)

    extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包(分为32位和64位)和教程,一共四部分

    ExtJS-MVC-用户列表实例

    此外,它也可以负责加载数据到视图,比如通过Store从服务器获取用户数据。 4. **存储(Store)**:在ExtJS中,Store是数据集的容器,它可以连接到数据源,如服务器端API,管理数据的加载、排序、过滤和更新。在这个...

    Extjs之--带分页的lovcombo控件

    LOV Combo(Look Up Value ComboBox)是ExtJS中的一种复合控件,它的主要功能是展示一个下拉列表,其中的数据来源于远程服务或本地存储,并且带有分页功能。在处理大量数据时,这种控件非常实用,因为它允许用户逐步...

    extjs-theme-bootstrap-master.zip

    "extjs-theme-bootstrap-master.zip" 文件很可能是ExtJS的一个主题包,它集成了Bootstrap的样式,使得ExtJS组件能够呈现出Bootstrap的经典外观。 在深入讲解这个主题之前,让我们先了解一下基础概念: 1. **ExtJS*...

    ExtJS笔记---Grid实现后台分页

    - `load`事件:当Store从服务器加载数据时触发,可以在此事件中处理加载后的数据。 - `beforeload`事件:在数据请求发送到服务器前触发,可以在这里添加额外的请求参数,如排序条件或过滤器。 4. **后端接口**: ...

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    extjs-7.0.0-gpl

    在"extjs-7.0.0-gpl"版本中,我们看到的是ExtJS框架的一个重要里程碑,这个版本引入了许多新特性、性能优化和兼容性的提升。 1. **组件化开发**:ExtJS 7.0.0的核心是其组件化的开发模式。组件可以是按钮、表格、...

    ExtJS----HelloWorld程序源码

    在"ExtJS----HelloWorld程序源码"中,我们将会看到如何使用ExtJS来创建一个简单的“你好,世界!”应用。以下是对这个示例中涉及的主要知识点的详细解释: 1. **引入ExtJS库**:首先,你需要在HTML文件中引入ExtJS...

    extjs-620-docs.rar完全离线版

    此"extjs-620-docs.rar"压缩包包含了该版本的完全离线版API文档,旨在解决在没有网络连接或网络环境不稳定时,开发者仍然可以便捷地查阅和学习ExtJS 6.2.0的相关知识。 API 文档是任何开发者的重要工具,特别是对于...

Global site tag (gtag.js) - Google Analytics