<%@ 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（组合框），特别是其远程加载数据的特性。 Combox在ExtJS中是一个非常灵活的控件，它可以看作是下拉列表和文本输入框的结合体，用户可以输入文本搜索，...
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
"extjs-theme-bootstrap-master.zip" 文件很可能是ExtJS的一个主题包，它集成了Bootstrap的样式，使得ExtJS组件能够呈现出Bootstrap的经典外观。 在深入讲解这个主题之前，让我们先了解一下基础概念： 1. **ExtJS*...
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
综上所述，这个“Extjs之--图片浏览器”项目涉及到了Ext JS的组件使用、数据绑定、样式设计、用户交互等多个方面，为开发者提供了一种用JavaScript实现图片浏览功能的解决方案。通过阅读提供的博客文章和分析...
语言程序设计资料：ExtJs学习笔记-2积分.doc
"extjs-theme-bootstrap" 是针对 EXTJS4 的一个主题，它借鉴了 Bootstrap 的设计风格，让 EXTJS4 应用程序具有更加现代化和一致的外观。 Bootstrap 是一个流行的前端开发框架，由 Twitter 推出，主要用于构建响应式...
使用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”中，我们将探讨如何利用ExtJS 4的ComboBox组件实现省市区的三级联动效果，并结合Struts2框架进行数据交互。 首先，`ComboBox`是ExtJS中的一个组件，它...
ExtJS快速入门--传智播客--蔡世友
4. **数据绑定**：阐述ExtJS的数据模型（Store）和数据显示组件（Grid、Tree）之间的数据绑定机制，包括XML、JSON数据源的加载。 5. **表单元素**：深入探讨表单（Form）的创建，包括各种表单字段（TextField、...
extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包（分为32位和64位）和教程，一共四部分
此"extjs-620-docs.rar"压缩包包含了该版本的完全离线版API文档，旨在解决在没有网络连接或网络环境不稳定时，开发者仍然可以便捷地查阅和学习ExtJS 6.2.0的相关知识。 API 文档是任何开发者的重要工具，特别是对于...
此外，它也可以负责加载数据到视图，比如通过Store从服务器获取用户数据。 4. **存储（Store）**：在ExtJS中，Store是数据集的容器，它可以连接到数据源，如服务器端API，管理数据的加载、排序、过滤和更新。在这个...
LOV Combo（Look Up Value ComboBox）是ExtJS中的一种复合控件，它的主要功能是展示一个下拉列表，其中的数据来源于远程服务或本地存储，并且带有分页功能。在处理大量数据时，这种控件非常实用，因为它允许用户逐步...
- `load`事件：当Store从服务器加载数据时触发，可以在此事件中处理加载后的数据。 - `beforeload`事件：在数据请求发送到服务器前触发，可以在这里添加额外的请求参数，如排序条件或过滤器。 4. **后端接口**： ...
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
在"extjs-7.0.0-gpl"版本中，我们看到的是ExtJS框架的一个重要里程碑，这个版本引入了许多新特性、性能优化和兼容性的提升。 1. **组件化开发**：ExtJS 7.0.0的核心是其组件化的开发模式。组件可以是按钮、表格、...
在"ExtJS----HelloWorld程序源码"中，我们将会看到如何使用ExtJS来创建一个简单的“你好，世界！”应用。以下是对这个示例中涉及的主要知识点的详细解释： 1. **引入ExtJS库**：首先，你需要在HTML文件中引入ExtJS...