<%@ 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-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位)和教程,一共四部分
此外,它也可以负责加载数据到视图,比如通过Store从服务器获取用户数据。 4. **存储(Store)**:在ExtJS中,Store是数据集的容器,它可以连接到数据源,如服务器端API,管理数据的加载、排序、过滤和更新。在这个...
LOV Combo(Look Up Value ComboBox)是ExtJS中的一种复合控件,它的主要功能是展示一个下拉列表,其中的数据来源于远程服务或本地存储,并且带有分页功能。在处理大量数据时,这种控件非常实用,因为它允许用户逐步...
"extjs-theme-bootstrap-master.zip" 文件很可能是ExtJS的一个主题包,它集成了Bootstrap的样式,使得ExtJS组件能够呈现出Bootstrap的经典外观。 在深入讲解这个主题之前,让我们先了解一下基础概念: 1. **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...
此"extjs-620-docs.rar"压缩包包含了该版本的完全离线版API文档,旨在解决在没有网络连接或网络环境不稳定时,开发者仍然可以便捷地查阅和学习ExtJS 6.2.0的相关知识。 API 文档是任何开发者的重要工具,特别是对于...