tesia
- 浏览: 33473 次
- 性别:
- 来自: 广州
-
最新评论
<!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>
<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.data.TreeStore 分级异步加载树节点示例
2013-07-10 15:36 2075Ext.data.TreeStore远程加载树节点有两种常用方 ... -
Ext.Ajax.request提交JSON数据
2013-07-10 09:29 1371JSON作为轻量级的数据传输格式，在很多时候可以作为XML文件 ... -
Ext.Ajax.request提交XML数据示例
2013-07-09 16:51 950服务器端：loginServerXml.jsp 在lib下要有 ... -
Ext.Ajax.request异步提交表单示例
2013-07-09 16:10 1048服务器端代码：loginServer.jsp <%@ ... -
树形面板Ext.tree.Panel
2013-07-05 15:19 651<!DOCTYPE html PUBLIC " ... -
relayEvents传播分发事件
2013-07-04 14:17 696<!DOCTYPE html PUBLIC " ... -
Extjs自定义事件
2013-07-04 10:54 438<!DOCTYPE html PUBLIC " ... -
改变文档样式风格示例
2013-07-04 10:55 775<!DOCTYPE html PUBLIC " ... -
ExtJS事件绑定方式示例
2013-07-04 10:55 676<!DOCTYPE html PUBLIC " ... -
Ext.util.JSON编码和解码JSON对象
2013-07-03 15:27 946<script type="text/java ... -
Ext.util.Format提供的常用格式化方法
2013-07-03 14:57 1338<!DOCTYPE html PUBLIC " ... -
Ext.util.ClickRepeater 事件的配置和触发
2013-07-03 11:55 748Ext.util.ClickRepeater 继承Ext.ut ... -
样式表的创建和规则获取示例
2013-07-03 10:44 518<!DOCTYPE html PUBLIC " ... -
Ext.KeyNav为元素提供简单的按键处理方法示例
2013-07-03 09:46 850<!DOCTYPE html PUBLIC " ... -
Ext常用函数
2013-07-01 16:42 632函数一：Ext.onReady（） Ext的Dom都是动态生成 ... -
水平盒布局HBox
2013-07-01 15:43 487<!DOCTYPE html PUBLIC " ... -
表格布局
2013-07-01 15:18 523<!DOCTYPE html PUBLIC " ... -
Ext.layout.container.Column布局
2013-07-01 15:18 759<script type="text/java ... -
Absolute绝对位置布局示例
2013-07-01 14:35 400Ext.layout.container.Absolute对应 ... -
Card 卡片式布局
2013-06-28 16:40 952<!DOCTYPE html PUBLIC " ...
相关推荐
4. 配置下拉组合框：使用Ext.form.field.ComboBox，配置其store为表格数据模型，指定显示字段和值字段，同时设置 tpl 或者 displayField 和 valueField 来定制显示和选择项。 在myEclipse的Web项目中，你需要将这些...
在ExtJS 4中，数据管理是构建应用程序的关键组件，尤其是对于处理和展示大量数据的应用来说。这个官方指南主要关注的是数据包...开发者可以通过配置这些组件来适应不同的数据源和应用场景，实现高效的数据操作和展示。
store.loadData(response); }); new Ext.container.Viewport({ layout: 'fit', items: grid }); }); ``` 4. 用户在EXT GRID上进行操作，如编辑单元格，DWR可以用来同步这些变化到服务器： ```javascript ...
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 }, { ...
关键配置包括`typeAhead`（自动补全）、`triggerAction`（触发行为，通常是所有或查询）、`store`（存储数据源，可以是JSON或者XML）、`displayField`（显示字段）和`valueField`（值字段）。 对于多选功能，我们...
4. **数据管理**：如Ext.data.Store，用于存储和管理数据，可以与各种数据源（如XML、JSON）进行交互。 5. **表格组件**：如Ext.grid.GridPanel，用于显示和编辑表格数据，支持分页、排序、过滤等功能。 6. **树形...
通过`Ext.data.Model`定义数据结构，`Ext.data.Store`管理数据源，以及`Ext.grid.Panel`等组件与数据的双向绑定，可以实现数据的实时更新和展示。这对于创建动态表格和列表非常有用。 另外，ExtJS的事件处理也是一...
在探讨“extjs editgrid combobox 回显”这一主题时，我们主要关注的是如何在ExtJS框架下，实现编辑网格（EditGrid）中的组合框（ComboBox）的值能够正确地回显到网格中。这一功能对于那些需要用户在表单中选择数据...
`Ext.data.Store`是数据存储的主要类，负责数据加载、刷新和更新等操作。 文档中还可能包含示例代码，以直观展示如何使用API。例如，创建一个简单的表格可能会涉及到`Ext.grid.Panel`的配置，包括列模型、数据源、...
在深入学习EXT 3.0源码时，建议先从核心类开始，例如Ext.Element（基础DOM操作）、Ext.Panel（基本组件）和Ext.data.Store（数据管理）。了解这些基础类的用法和实现原理后，再逐步探索更复杂的组件和功能，如Grid、...
1. **store**：这是Combobox的数据源，通常是一个Ext.data.Store对象，用于存储省份和城市的数据。数据可以是XML、JSON或其他格式，通过配置reader进行解析。 2. **displayField**：定义了显示在Combobox文本框中的...
- **Store**: 存储数据的容器，可以连接到各种数据源，如JSON、XML或Ajax请求，提供数据加载、刷新和排序等功能。 - **Model**: 定义数据结构和字段，用于数据验证和操作。 - **View**: 显示数据的部分，通常由组件...
Store可以连接到不同的数据源，如JSON、XML或CSV，并提供数据加载、过滤、排序和分页功能。通过事件监听，Store能够实时同步数据变化，确保UI的更新。 二、Data：Data包是Ext的数据模型层，包含Model、Proxy和...
5. **Ext.data.Store**: 存储数据的抽象层，可以连接到不同的数据源（如JSON、XML或Ajax请求）。Store包含`fields`（字段定义）和`proxy`（数据获取方式）等配置。 6. **Ext.layout**: 布局管理器，如`FitLayout`...
- `dataIndex`: 关联的数据字段，用于从数据源中获取值，这里的数据源通常是一个二维数组或Store。 除了上述配置，还有一些常见的列属性，例如： - `editable`: 指示列是否可编辑，如果为`true`，用户可以直接在...
在提供的代码片段中，使用了`JsonStore`作为数据源，其通过指定的URL（`path+'/servlet/ComBox'`）异步加载JSON格式的数据。`JsonStore`的`fields`属性定义了数据集中字段的结构，这里的`groupId`和`groupName`分别...
此外，ExtJS还具有数据绑定机制，允许组件与数据源进行双向同步，简化了数据管理和更新。 在ExtJS 3.4.0中，开发者可以期待以下主要特性： 1. **组件增强**：此版本可能包含对现有组件的性能优化和新功能的添加，...
在Ext Grid中，你可以定义列（columns）来展示数据的不同属性，通过store来绑定数据源，以及使用各种插件和功能，如行选择、分组、自定义编辑等。在提供的"extdemo"压缩包中，可能包含了一个展示如何创建和配置Grid...
- 通过配置`store`属性，可以指定组合框的选项数据源，可以是静态数组或动态获取的数据。 - `displayField`用于设置显示在组合框中的字段名，而`valueField`则用来指定选定项的真实值。 2. **绑定数据**： - ...