`
lingyibin
  • 浏览: 196333 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

Ext常用的知识点(三)--combobox和xml的绑定

阅读更多

直接看代码,所有需要注意的地方都标在代码后面了

 

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>
 

 

0
9
分享到:
评论

相关推荐

    Extjs4---combobox省市区三级联动+struts2

    要实现这个功能,我们需要创建三个ComboBox,分别对应省份、城市和区/县。每个ComboBox都需要配置`store`来存储数据,`displayField`用于显示值,`valueField`用于保存选中的值。通过监听`select`事件,我们可以触发...

    gwt-ext 实例

    3. **创建UI组件**:使用gwt-ext库创建各种组件,如Grid、FormPanel、ComboBox等,并了解它们的属性、方法和事件处理。 4. **布局管理**:学习gwt-ext提供的布局管理器,如FitLayout、BorderLayout、ColumnLayout,...

    EXT开发文档

    4. **灵活的数据管理**:支持多种数据源,包括 JSON、XML 和服务器端脚本等,方便进行数据绑定和处理。 5. **主题支持**:提供了多种主题风格,允许开发者轻松地更改应用的外观。 #### 三、EXT JS 开发入门 1. **...

    ext-1.0.1.rar

    5. **Ajax**:EXT内置了Ajax模块,简化了异步数据请求和响应处理,支持JSON、XML等多种数据格式。 6. **Form Elements**:EXT提供了多种表单元素,如文本框(TextField)、复选框(Checkbox)、下拉框(ComboBox)...

    Ext 3.0 中文文档.zip

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

    Extjs中文教程

    ### Extjs中文教程知识点梳理 #### 一、Extjs简介及环境搭建 - **Extjs**是一种基于JavaScript的开源框架,用于构建现代化的Web应用程序。它提供了丰富的UI组件库、强大的数据处理能力和灵活的布局管理机制。 - **...

    EXT3.2 多选下拉框

    需要注意的是,EXT JS的事件处理和数据绑定也是重要的部分。例如,当用户选择或取消选择选项时,可以监听`select`事件,获取当前选中的值。同时,如果你的多选下拉框是动态加载数据的,可能还需要实现远程数据加载和...

    extJs ComboBox级联

    以上就是关于ExtJS ComboBox级联的核心知识点,通过理解和运用这些概念,你可以构建出功能强大的级联选择组件。如果需要深入学习,建议查看官方文档和更多相关的博客文章,例如给出的博文链接,那里可能有更详尽的...

    EXT_JS实例,官方实例

    EXT JS实例通常包括一系列预定义的组件、布局、数据绑定机制和丰富的用户界面控件,这些都极大地简化了开发复杂的Web应用。 在"EXT_JS实例,官方实例"这个压缩包中,你将找到EXT JS 3.2.1版本的官方示例。EXT JS ...

    Ext.data专题

    **Grid** 和 **ComboBox** 等组件都是基于Ext.data进行数据操作的。它们利用这些核心组件来实现诸如异步加载、类型转换、分页等功能。 #### 二、数据格式和支持 Ext.data支持多种数据格式,包括但不限于: - **...

    dwr+ext的eclipse新工程

    【标题】"dwr+ext的eclipse新工程"是一个基于Eclipse开发的项目,它结合了Direct Web Remoting (DWR) 和Ext JS技术,主要用于构建富客户端Web应用程序。DWR是一种允许JavaScript与服务器端Java代码进行交互的库,而...

    Ext3.2中文API

    本文将深入探讨Ext3.2 API中的关键知识点,帮助开发者更好地理解和应用这一版本的库。 1. **组件系统**:Ext3.2的核心是其组件化的设计,允许开发者创建可复用的UI部件。包括Grid(表格)、Panel(面板)、Form...

    Ext Js权威指南(.zip.001

    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....

    Extjs 初体验

    5. **Ext.form.ComboBox.xml** - 代表下拉框组件,常用于输入选择,它可以动态加载数据,并具有多种筛选和显示模式。 6. **Ext.dd.DDProxy.xml** - 一个特殊的拖动源,它在拖动过程中会创建元素的代理,通常用于...

    ext 实例

    这可能包括文本输入框(`Ext.form.TextField`)用于用户名和留言内容,下拉菜单(`Ext.form.ComboBox`)用于选择主题,以及提交按钮(`Ext.Button`)来发送留言。 2. **布局管理**:EXT的布局系统允许开发者灵活地...

    ExtJs XML 省市县级联

    ExtJs是一款强大的JavaScript框架,专用于构建富客户端Web应用程序。...它涉及到了ExtJs的组件使用、数据绑定、事件监听、XML数据解析等多个技术点,对于学习ExtJs和Web前端开发的人来说,是一个很好的实践案例。

    Ext 2.0 中文api 天涯浪子

    这个API文档涵盖了以下几个关键知识点: 1. **组件系统**:Ext 2.0的核心是其组件模型,包括基本组件如Panel、Window、Grid等,以及各种复杂的UI元素。开发者可以通过组合这些组件来构建复杂的用户界面。 2. **...

    ExtJs中文教程

    ### ExtJs中文教程知识点概览 #### 一、ExtJs简介 - **ExtJs**是一款基于JavaScript的开源前端框架,用于构建复杂的Web应用程序。 - 它提供了丰富的UI组件库、强大的数据处理能力和灵活的布局管理机制。 #### 二、...

    ext asp.net mvc nhibernate 完整项目示例

    1. **EXT.NET的使用**:EXT.NET提供了多种组件,如GridPanel(数据网格)、FormPanel(表单)、ComboBox(下拉框)等,以及事件处理和数据绑定机制,用于创建丰富的客户端交互。 2. **ASP.NET MVC框架**:理解路由...

Global site tag (gtag.js) - Google Analytics