- 浏览: 33270 次
- 性别:
- 来自: 广州
最新评论
<!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>
发表评论
-
Ext.data.TreeStore 分级异步加载树节点示例
2013-07-10 15:36 2068Ext.data.TreeStore远程加载树节点有两种常用方 ... -
Ext.Ajax.request提交JSON数据
2013-07-10 09:29 1356JSON作为轻量级的数据传输格式,在很多时候可以作为XML文件 ... -
Ext.Ajax.request提交XML数据示例
2013-07-09 16:51 938服务器端:loginServerXml.jsp 在lib下要有 ... -
Ext.Ajax.request异步提交表单示例
2013-07-09 16:10 1047服务器端代码:loginServer.jsp <%@ ... -
树形面板Ext.tree.Panel
2013-07-05 15:19 644<!DOCTYPE html PUBLIC " ... -
relayEvents传播分发事件
2013-07-04 14:17 693<!DOCTYPE html PUBLIC " ... -
Extjs自定义事件
2013-07-04 10:54 434<!DOCTYPE html PUBLIC " ... -
改变文档样式风格示例
2013-07-04 10:55 772<!DOCTYPE html PUBLIC " ... -
ExtJS事件绑定方式示例
2013-07-04 10:55 672<!DOCTYPE html PUBLIC " ... -
Ext.util.JSON编码和解码JSON对象
2013-07-03 15:27 941<script type="text/java ... -
Ext.util.Format提供的常用格式化方法
2013-07-03 14:57 1326<!DOCTYPE html PUBLIC " ... -
Ext.util.ClickRepeater 事件的配置和触发
2013-07-03 11:55 745Ext.util.ClickRepeater 继承Ext.ut ... -
样式表的创建和规则获取示例
2013-07-03 10:44 512<!DOCTYPE html PUBLIC " ... -
Ext.KeyNav为元素提供简单的按键处理方法示例
2013-07-03 09:46 843<!DOCTYPE html PUBLIC " ... -
Ext常用函数
2013-07-01 16:42 625函数一:Ext.onReady() Ext的Dom都是动态生成 ... -
水平盒布局HBox
2013-07-01 15:43 480<!DOCTYPE html PUBLIC " ... -
表格布局
2013-07-01 15:18 519<!DOCTYPE html PUBLIC " ... -
Ext.layout.container.Column布局
2013-07-01 15:18 743<script type="text/java ... -
Absolute绝对位置布局示例
2013-07-01 14:35 395Ext.layout.container.Absolute对应 ... -
Card 卡片式布局
2013-06-28 16:40 949<!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. **绑定数据**: - ...