直接看代码,所有需要注意的地方都标在代码后面了
Ext.onReady(function() {
var mystore = new Ext.data.Store({
url:"data/myInfo.xml", //要加载的文件,这要有服务器(如果tomcat)才能加载到数据
reader:new Ext.data.XmlReader({
record:"person", //每一条记录的根
id:"id" //这个id很重要,不可以省略,而且要是唯一的,要不然同id的项之间会相互覆盖
},["name","email", //如果name和mapping一样的话可以这么简写,否则用下面的写法
//{name: 'title', mapping: 'record.innerHTML'} 用这个来加载标签里面的内容,如<person>me</person>
{name: 'title', mapping: 'name @first'} //name @first表示 <name first="……“>……</name>
])
});
var loginForm = new Ext.FormPanel({
title:"登陆",
width:270,
renderTo:"test1",
frame:true,
labelWidth:70,
collapsible:true,
autoHeight:true,
items:[{
xtype:"combo",
id:"myCombo",
fieldLabel:"个人信息",
emptyText:"请选择",
displayField:"title",
valueField:"email",
mode:"remote",//设成local,测试了一下,也可以
triggerAction:"all",
store:mystore,
listeners:{
"select":function(){
Ext.MessageBox.alert("消息",Ext.get("myCombo").getValue())
},
"collapse":function(){//没选 任何选项的时候就出现一个进度条,让用户等5秒
Ext.MessageBox.show({
title:"你好",
msg:"请稍等……",
width:200,
progress:true,
wait:true,
waitConfig:{
duration:5000,
interval:600,
fn:function(){
Ext.MessageBox.hide();
}
}
})
}
}
}
]
});
mystore.load(); //最后,别忘了这句话来加载数据
});
xml文档:
<?xml version="1.0" encoding="UTF-8"?>
<root>
<person>
<id>1</id>
<name first="ling">person1</name>
<phone>12345******</phone>
<email>person1@gmail.com</email>
</person>
<person>
<id>2</id>
<name first="wang">person2</name>
<phone>54321******</phone>
<email>person2@gmail.com</email>
</person>
</root>
分享到:
相关推荐
要实现这个功能,我们需要创建三个ComboBox,分别对应省份、城市和区/县。每个ComboBox都需要配置`store`来存储数据,`displayField`用于显示值,`valueField`用于保存选中的值。通过监听`select`事件,我们可以触发...
3. **创建UI组件**:使用gwt-ext库创建各种组件,如Grid、FormPanel、ComboBox等,并了解它们的属性、方法和事件处理。 4. **布局管理**:学习gwt-ext提供的布局管理器,如FitLayout、BorderLayout、ColumnLayout,...
4. **灵活的数据管理**:支持多种数据源,包括 JSON、XML 和服务器端脚本等,方便进行数据绑定和处理。 5. **主题支持**:提供了多种主题风格,允许开发者轻松地更改应用的外观。 #### 三、EXT JS 开发入门 1. **...
5. **Ajax**:EXT内置了Ajax模块,简化了异步数据请求和响应处理,支持JSON、XML等多种数据格式。 6. **Form Elements**:EXT提供了多种表单元素,如文本框(TextField)、复选框(Checkbox)、下拉框(ComboBox)...
Store可以连接到不同的数据源,如JSON、XML或CSV,并提供数据加载、过滤、排序和分页功能。通过事件监听,Store能够实时同步数据变化,确保UI的更新。 二、Data:Data包是Ext的数据模型层,包含Model、Proxy和...
### Extjs中文教程知识点梳理 #### 一、Extjs简介及环境搭建 - **Extjs**是一种基于JavaScript的开源框架,用于构建现代化的Web应用程序。它提供了丰富的UI组件库、强大的数据处理能力和灵活的布局管理机制。 - **...
需要注意的是,EXT JS的事件处理和数据绑定也是重要的部分。例如,当用户选择或取消选择选项时,可以监听`select`事件,获取当前选中的值。同时,如果你的多选下拉框是动态加载数据的,可能还需要实现远程数据加载和...
以上就是关于ExtJS ComboBox级联的核心知识点,通过理解和运用这些概念,你可以构建出功能强大的级联选择组件。如果需要深入学习,建议查看官方文档和更多相关的博客文章,例如给出的博文链接,那里可能有更详尽的...
EXT JS实例通常包括一系列预定义的组件、布局、数据绑定机制和丰富的用户界面控件,这些都极大地简化了开发复杂的Web应用。 在"EXT_JS实例,官方实例"这个压缩包中,你将找到EXT JS 3.2.1版本的官方示例。EXT JS ...
**Grid** 和 **ComboBox** 等组件都是基于Ext.data进行数据操作的。它们利用这些核心组件来实现诸如异步加载、类型转换、分页等功能。 #### 二、数据格式和支持 Ext.data支持多种数据格式,包括但不限于: - **...
【标题】"dwr+ext的eclipse新工程"是一个基于Eclipse开发的项目,它结合了Direct Web Remoting (DWR) 和Ext JS技术,主要用于构建富客户端Web应用程序。DWR是一种允许JavaScript与服务器端Java代码进行交互的库,而...
本文将深入探讨Ext3.2 API中的关键知识点,帮助开发者更好地理解和应用这一版本的库。 1. **组件系统**:Ext3.2的核心是其组件化的设计,允许开发者创建可复用的UI部件。包括Grid(表格)、Panel(面板)、Form...
7.3.2 数据的转换过程:ext.data.reader.xml、ext.data.reader.json和ext.data.reader.array / 315 7.3.3 reader对象的配置项 / 321 7.3.4 格式化提交数据:ext.data.writer.writer、ext.data.writer.json和ext....
5. **Ext.form.ComboBox.xml** - 代表下拉框组件,常用于输入选择,它可以动态加载数据,并具有多种筛选和显示模式。 6. **Ext.dd.DDProxy.xml** - 一个特殊的拖动源,它在拖动过程中会创建元素的代理,通常用于...
这可能包括文本输入框(`Ext.form.TextField`)用于用户名和留言内容,下拉菜单(`Ext.form.ComboBox`)用于选择主题,以及提交按钮(`Ext.Button`)来发送留言。 2. **布局管理**:EXT的布局系统允许开发者灵活地...
ExtJs是一款强大的JavaScript框架,专用于构建富客户端Web应用程序。...它涉及到了ExtJs的组件使用、数据绑定、事件监听、XML数据解析等多个技术点,对于学习ExtJs和Web前端开发的人来说,是一个很好的实践案例。
这个API文档涵盖了以下几个关键知识点: 1. **组件系统**:Ext 2.0的核心是其组件模型,包括基本组件如Panel、Window、Grid等,以及各种复杂的UI元素。开发者可以通过组合这些组件来构建复杂的用户界面。 2. **...
### ExtJs中文教程知识点概览 #### 一、ExtJs简介 - **ExtJs**是一款基于JavaScript的开源前端框架,用于构建复杂的Web应用程序。 - 它提供了丰富的UI组件库、强大的数据处理能力和灵活的布局管理机制。 #### 二、...
1. **EXT.NET的使用**:EXT.NET提供了多种组件,如GridPanel(数据网格)、FormPanel(表单)、ComboBox(下拉框)等,以及事件处理和数据绑定机制,用于创建丰富的客户端交互。 2. **ASP.NET MVC框架**:理解路由...