`
tesia
  • 浏览: 33147 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论

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

阅读更多
<!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>
  • 大小: 21.8 KB
分享到:
评论

相关推荐

    Ext下拉树、下拉表格

    4. 配置下拉组合框:使用Ext.form.field.ComboBox,配置其store为表格数据模型,指定显示字段和值字段,同时设置 tpl 或者 displayField 和 valueField 来定制显示和选择项。 在myEclipse的Web项目中,你需要将这些...

    ExtJS4官方指南:数据Data简体中文版.pdf

    在ExtJS 4中,数据管理是构建应用程序的关键组件,尤其是对于处理和展示大量数据的应用来说。这个官方指南主要关注的是数据包...开发者可以通过配置这些组件来适应不同的数据源和应用场景,实现高效的数据操作和展示。

    DWR+EXT简单示例

    store.loadData(response); }); new Ext.container.Viewport({ layout: 'fit', items: grid }); }); ``` 4. 用户在EXT GRID上进行操作,如编辑单元格,DWR可以用来同步这些变化到服务器: ```javascript ...

    Ext2[1].0框架的Grid使用介绍

    var ds = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), // 数据来源 reader: new Ext.data.ArrayReader({}, [ // 数据解析规则 { name: 'id', mapping: 0 }, { name: 'sex', mapping: 1 }, { ...

    EXT3.2 多选下拉框

    关键配置包括`typeAhead`(自动补全)、`triggerAction`(触发行为,通常是所有或查询)、`store`(存储数据源,可以是JSON或者XML)、`displayField`(显示字段)和`valueField`(值字段)。 对于多选功能,我们...

    ext2.0 详解和API

    4. **数据管理**:如Ext.data.Store,用于存储和管理数据,可以与各种数据源(如XML、JSON)进行交互。 5. **表格组件**:如Ext.grid.GridPanel,用于显示和编辑表格数据,支持分页、排序、过滤等功能。 6. **树形...

    Ext实例详解 超值!!

    通过`Ext.data.Model`定义数据结构,`Ext.data.Store`管理数据源,以及`Ext.grid.Panel`等组件与数据的双向绑定,可以实现数据的实时更新和展示。这对于创建动态表格和列表非常有用。 另外,ExtJS的事件处理也是一...

    extjs editgrid combobox 回显

    在探讨“extjs editgrid combobox 回显”这一主题时,我们主要关注的是如何在ExtJS框架下,实现编辑网格(EditGrid)中的组合框(ComboBox)的值能够正确地回显到网格中。这一功能对于那些需要用户在表单中选择数据...

    Ext 3.3 - 中文API文档

    `Ext.data.Store`是数据存储的主要类,负责数据加载、刷新和更新等操作。 文档中还可能包含示例代码,以直观展示如何使用API。例如,创建一个简单的表格可能会涉及到`Ext.grid.Panel`的配置,包括列模型、数据源、...

    ext 3.0源码+帮助文档chm

    在深入学习EXT 3.0源码时,建议先从核心类开始,例如Ext.Element(基础DOM操作)、Ext.Panel(基本组件)和Ext.data.Store(数据管理)。了解这些基础类的用法和实现原理后,再逐步探索更复杂的组件和功能,如Grid、...

    用Ext 2_0 combobox 做的省份和城市联动选择框 DOJO中国

    1. **store**:这是Combobox的数据源,通常是一个Ext.data.Store对象,用于存储省份和城市的数据。数据可以是XML、JSON或其他格式,通过配置reader进行解析。 2. **displayField**:定义了显示在Combobox文本框中的...

    extjs详细讲解!并给出生动例子!并含有多个ext帮助文档

    - **Store**: 存储数据的容器,可以连接到各种数据源,如JSON、XML或Ajax请求,提供数据加载、刷新和排序等功能。 - **Model**: 定义数据结构和字段,用于数据验证和操作。 - **View**: 显示数据的部分,通常由组件...

    Ext 3.0 中文文档.zip

    Store可以连接到不同的数据源,如JSON、XML或CSV,并提供数据加载、过滤、排序和分页功能。通过事件监听,Store能够实时同步数据变化,确保UI的更新。 二、Data:Data包是Ext的数据模型层,包含Model、Proxy和...

    extjs3.0例子

    5. **Ext.data.Store**: 存储数据的抽象层,可以连接到不同的数据源(如JSON、XML或Ajax请求)。Store包含`fields`(字段定义)和`proxy`(数据获取方式)等配置。 6. **Ext.layout**: 布局管理器,如`FitLayout`...

    extjs 学习笔记(三) 最基本的grid

    - `dataIndex`: 关联的数据字段,用于从数据源中获取值,这里的数据源通常是一个二维数组或Store。 除了上述配置,还有一些常见的列属性,例如: - `editable`: 指示列是否可编辑,如果为`true`,用户可以直接在...

    ext combox

    在提供的代码片段中,使用了`JsonStore`作为数据源,其通过指定的URL(`path+'/servlet/ComBox'`)异步加载JSON格式的数据。`JsonStore`的`fields`属性定义了数据集中字段的结构,这里的`groupId`和`groupName`分别...

    ext-3.4.0.zip

    此外,ExtJS还具有数据绑定机制,允许组件与数据源进行双向同步,简化了数据管理和更新。 在ExtJS 3.4.0中,开发者可以期待以下主要特性: 1. **组件增强**:此版本可能包含对现有组件的性能优化和新功能的添加,...

    Ext grid与树实例

    在Ext Grid中,你可以定义列(columns)来展示数据的不同属性,通过store来绑定数据源,以及使用各种插件和功能,如行选择、分组、自定义编辑等。在提供的"extdemo"压缩包中,可能包含了一个展示如何创建和配置Grid...

    JavaScript Extjs组合框选择以调用MVC控制器中的方法

    - 通过配置`store`属性,可以指定组合框的选项数据源,可以是静态数组或动态获取的数据。 - `displayField`用于设置显示在组合框中的字段名,而`valueField`则用来指定选定项的真实值。 2. **绑定数据**: - ...

Global site tag (gtag.js) - Google Analytics