EXT--本地数据源的组合框示例 Ext.data.Store

最新推荐文章于 2017-10-18 12:41:34 发布
最新推荐文章于 2017-10-18 12:41:34 发布
阅读量160 收藏
点赞数
分类专栏： EXT 文章标签： xhtml javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_4927/article/details/82541868
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>本地数据源的组合示例</title> 
<link rel="stylesheet" href="ext-4.2.1/resources/css/ext-all.css" /> 
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script>  
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script> 
<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'} 
] 
}); 
//创建表单 
Ext.create('Ext.form.Panel',{ 
title:'combBox本地数据源', 
renderTo:Ext.getBody(), 
bodyPadding:5, 
frame:true, 
height:150, 
width:370, 
defaults:{ 
labelSeparator:':', 
labelwidth:70, 
width:200, 
labelAlign:'left' 
}, 
items:[{ 
xtype:'combo', 
listConfig:{  emptyText:'未找到匹配值', maxHeight:60 
       }, //设置下拉列表的最大高度为60像素 
name:'post', 
fieldLabel:'邮政编码', 
triggerAction:'all',//单击触发按钮显示全部数据 
store:postStore,//设置数据源 
displayField:'province',//定义要显示的字段 
valueField:'post', //定义值字段 
queryMode:'local', //本地模式 
forceSelection:true,//要求输入值必须在列表中存在 
typeAhead:true, //允许自动选择匹配的剩余部分文本 
value:'102600' //默认选择大兴的邮编 
}] 
}); 
}); 
</script> 
</head> 

<body> 
</body> 
</html>

 

开发者博客：www.developsearch.com

iteye_4927
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
extjs3 combobox取value和text案例详解
10-27
使用combobox时，它有一个hiddenName的属性，专门用于提交combobox中value的值,接下来介绍extjs3 combobox如何取value和text值,感兴趣的朋友可以不要错过了啊
ext-3.4.0.zip
08-16
此外，ExtJS还具有数据绑定机制，允许组件与数据源进行双向同步，简化了数据管理和更新。 在ExtJS 3.4.0中，开发者可以期待以下主要特性： 1. **组件增强**：此版本可能包含对现有组件的性能优化和新功能的添加，...
本地数据源的组合框示例 Ext.data.Store
天螺蛳
06-27 182
本地数据源的组合示例 Ext.onReady(function(){ //创建数据模型 Ext.regModel('PostInfo',{ fields:[{name:'province'},{name:'post'}] }); //定义组合框中显示的数据源 var postStore=Ext.create('Ext.data...
Extjs组合框示例
Mr__fang的专栏
11-23 2439
1本地数据源组合框 Ext.onReady(function(){ //创建数据模型 Ext.regModel('PostInfo', { fields: [{name: 'province'}, {name: 'post'}] }); //定义组合框中显示的数据源 var postStore = Ext.create('Ext.data.Store', { mo
ExtJs3.2.2 Combobox同时加载本地数据及远程数据
andy_2的专栏
11-11 133
只有远程数据的时候，下来框数据显示如下： [url=http://hongfanshu.blogbus.com/][img]http://dl.iteye.com/upload/attachment/346468/2f3ae771-4718-3cc2-a256-0bf8f79c9c74.jpg[/img][/url] 添加以下代码 //在下拉框增加一行 [code="java"] la...
ExtJS ComboBox同时加载远程和本地数据
weixin_30783913的博客
07-11 92
ExtJS ComboBox同时加载远程和本地数据 原文：http://gblog.hbcf.net/index.php/archives/233 ComboBox比较特殊需求，将远程数据和本地数据同时加载。其实，还是先加载远程，在将本地数据塞进获取到的远程数据中去。大概的代码如下（网上得来，未验证，以备用） //首先远程读取数据 varseriesStore=...
Ext 3.0 中文文档.zip
03-15
Store可以连接到不同的数据源，如JSON、XML或CSV，并提供数据加载、过滤、排序和分页功能。通过事件监听，Store能够实时同步数据变化，确保UI的更新。 二、Data：Data包是Ext的数据模型层，包含Model、Proxy和...
ExtJS4官方指南：数据Data简体中文版.pdf
11-07
在ExtJS 4中，数据管理是构建应用程序的关键组件，尤其是对于处理和展示大量数据的应用来说。这个官方指南主要关注的是数据包...开发者可以通过配置这些组件来适应不同的数据源和应用场景，实现高效的数据操作和展示。
Ext 3.3 - 中文API文档
11-29
`Ext.data.Store`是数据存储的主要类，负责数据加载、刷新和更新等操作。 文档中还可能包含示例代码，以直观展示如何使用API。例如，创建一个简单的表格可能会涉及到`Ext.grid.Panel`的配置，包括列模型、数据源、...
Ext下拉树、下拉表格
10-14
4. 配置下拉组合框：使用Ext.form.field.ComboBox，配置其store为表格数据模型，指定显示字段和值字段，同时设置 tpl 或者 displayField 和 valueField 来定制显示和选择项。 在myEclipse的Web项目中，你需要将这些...
extjs4 对各类型store各种数据的读取 model 前台 等等
10-18
extjs4 对多种store数据 ，以多种方式绑定到界面上，以一例子以说明编写
Ext 组合框 ComboBox 参数详解
04-11
该资源是war包，里面包括ComboBox中的各个参数， 详细讲解在我的文档中有
Ext.data专题十一：localXHR支持本地使用Ajax
天将降大任于斯人也
01-30 1627
Ext.data专题十一：localXHR支持本地使用AjaxAjax是不能在本地文件系统中使用的，必须把数据放到服务器上。无论是IIS、Apache、 Tomcat，还是你熟悉的其他服务器，只要支持HTTP协议，就可以使用EXT中的Ajax。至于本地为何不能用Ajax，主要是因为Ajax要判断HTTP响应返回的状态，只有status=200时才认为这次请求是成功的。所以，loca
Ext.data专题四：Ext.data.Store
天将降大任于斯人也
03-05 4063
Ext.data专题四：Ext.data.StoreExt.data.Store是EXT中用来进行数据交换和数据交互的标准中间件，无论是Grid还是ComboBox，都是通过它实现数据读取、类型转换、排序分页和搜索等操作的。Ext.data.Store中有一个Ext.data.Record数组，所有数据都存放在这些Ext.data. Record实例中，为后面的读取和修改操作做准备
Extjs中Ext.data.Store的多种操作详解
热门推荐
idomyway的博客
10-18 1万+
前言Store是extjs中的重中之重，贴过来，备用查询操作Store.getCount()Store.getCount()返回的是store中的所有数据记录，然后使用for循环遍历整个store，从而得到每条记录。store.each()除了使用getCount()的方法外，还可以使用each()函数，如下面的代码所示。 store.each(function(record) {
关于Ext的Combo加载数据的问题。
xiunai78的专栏
03-19 4647
    开篇     在combo的配置选项中有个mode,我们可以配置两个参数，local,remote 从字面意思上看，一个是本地加载，一个是远程加载。     于是就出现了一个问题，我用jsonStore去后台取数据的时候，认为数据是从后台来的所以设置mode为remote，但是combo并没有显示数据出来，从fireBug看到我拿到了正确的数据。试了很久都没解决，后来看到自己代码的store是这样的。 var store = new Ext.data.JsonStore({     
EXT--弹出的Window中嵌入iframe
开发者博客
11-14 1258
开发者博客：www.developsearch.com   &lt;!-- vim: ts=2:sw=2:nu:fdc=2:spell Handling Item Clicks @author Ing.Jozef Sakáloš @copyright (c) 2009, by Ing. Jozef Sakáloš @date 4. February 200...
Ext.data.Store从后台获取数据的方式
最新发布
06-03
Ext.data.Store 类是 ExtJS 中用于管理数据的核心类之一，它提供了从后台获取数据、本地缓存数据、数据筛选和排序等功能。下面介绍一下 Ext.data.Store 从后台获取数据的几种方式。 1. Ajax 请求方式 可以通过在 Store 的 proxy 配置中设置 type 为 ajax，然后配置 url、method、params 等参数来发送 Ajax 请求，从后台获取数据。示例代码如下： ``` Ext.create('Ext.data.Store', { proxy: { type: 'ajax', url: 'your_url', method: 'GET', params: { // 请求参数 }, reader: { type: 'json', rootProperty: 'data' } }, autoLoad: true, fields: [ // 字段定义 ] }); ``` 2. JsonP 请求方式 可以通过在 Store 的 proxy 配置中设置 type 为 jsonp，然后配置 url、callbackKey 等参数来发送 JsonP 请求，从后台获取数据。示例代码如下： ``` Ext.create('Ext.data.Store', { proxy: { type: 'jsonp', url: 'your_url', callbackKey: 'callback', reader: { type: 'json', rootProperty: 'data' } }, autoLoad: true, fields: [ // 字段定义 ] }); ``` 3. Restful 请求方式 可以通过在 Store 的 proxy 配置中设置 type 为 rest，然后配置 url、reader、writer 等参数来发送 Restful 请求，从后台获取数据。示例代码如下： ``` Ext.create('Ext.data.Store', { proxy: { type: 'rest', url: 'your_url', reader: { type: 'json', rootProperty: 'data' }, writer: { type: 'json' } }, autoLoad: true, fields: [ // 字段定义 ] }); ``` 4. WebSocket 请求方式 可以通过在 Store 的 proxy 配置中设置 type 为 websocket，然后配置 url、reader、writer 等参数来发送 WebSocket 请求，从后台获取数据。示例代码如下： ``` Ext.create('Ext.data.Store', { proxy: { type: 'websocket', url: 'your_url', reader: { type: 'json', rootProperty: 'data' }, writer: { type: 'json' } }, autoLoad: true, fields: [ // 字段定义 ] }); ``` 需要注意的是，以上不同类型的请求方式需要根据后台接口的实际情况进行选择和配置。同时，在 Store 的 fields 配置中也需要定义从后台获取的数据字段。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值