`

Ext学习之7_下拉列表框

EXT 
阅读更多
Ext.namespace("com.deng");
Ext.onReady(function(){
	var cities = [
	              [1,"长沙市"],[2,"株洲市"],[3,"湘潭市"],[4,"邵阳市"]
	             ];
	var proxy = new Ext.data.MemoryProxy(cities);
	var city = new Ext.data.Record.create([
	     {name:"cid",type:"int",mapping:0},
	     {name:"cname",type:"string",mapping:1}
	]);
	//var reader = new Ext.data.ArrayReader({},city);
	var reader = new Ext.data.ArrayReader({},[
	       {name:"cid",type:"int",mapping:0},
	       {name:"cname",type:"string",mapping:1}
	    ]);
	var store = new Ext.data.Store({
		proxy: proxy,
		reader: reader,
		autoLoad: true //即时加载数据
	});
	//store.load();
	var combobox = new Ext.form.ComboBox({
		renderTo: Ext.getBody(),
		triggerAction: "all",
		store: store,
		displayField: "cname",
		valueField: "cid",
		mode:"local",
		emptyText:"请选择湖南城市"
	});
	
	var btn = new Ext.Button({
		text: "列表框的值",
		renderTo: Ext.getBody(),
		handler: function(){
			Ext.Msg.alert("值","实际值:" + combobox.getValue() + ": 显示值:" + combobox.getRawValue());
		}
	});
});
/**
 * 备注:
 *  triggerAction: 是否开启自动查询的功能,为all表示不开启,为query表示开启,默认为query
 *  store: 数据源
 *  displayField: 关联Record的某一个逻辑列名作为显示值
 *  valueField:关联Record的某一个逻辑列名作为实际值
 *  mode:可选值有local和remote,如果数据来自本地,用local,如果数据来自远程服务器,必须用remote,默认为remote
 *  emptyText:没有选择任何选项的情况文本框的默认文字
 *  getValue(),用于返回实际值,getRawValue()用于返回显示值
 *  
 *  
 */
 
分享到:
评论

相关推荐

    EXT 项目下拉列表多选框 使用示例 含源代码

    在Java EXT项目中,下拉列表多选框(LovCombo)是一种常见的用户界面元素,它允许用户在下拉菜单中选择一个或多个选项。EXT框架是Sencha公司开发的一个JavaScript库,专门用于构建富客户端Web应用程序,其组件丰富,...

    EXT2_combobox_form.rar_combobox ext_ext

    Combobox,或下拉列表框,是EXT2中的一个控件,它结合了文本输入框和下拉列表的功能。用户可以手动输入值,也可以从预定义的选项列表中选择。EXT2的combobox具有以下特性: 1. 动态加载:可以配置为从服务器异步...

    Ext combobox 下拉多选框带搜索功能

    7. **自定义样式**:为了增强用户体验,可能还需要自定义ComboBox的样式,例如搜索框的外观、下拉列表的样式等。 在提供的链接中,可能会详细介绍如何配置和实现这样一个功能组件。`MultiComboSearch_5.TXT`可能是...

    Ext下拉树、下拉表格

    在Ext中,下拉树是将传统的下拉列表与树形控件相结合的一种方式,用户可以点击输入框打开一个包含树结构的下拉菜单。这种组件常用于需要层次结构选择的场景,例如组织架构、文件目录等。创建下拉树通常涉及以下步骤...

    ext 动态,匹配,下拉单

    在EXT框架中,下拉单(ComboBox)是一种常用的组件,用于提供可选的下拉列表供用户选择。EXT的动态匹配下拉单功能允许用户输入文本时实时过滤并显示匹配的选项,极大地提升了用户体验。 在EXT中,动态匹配下拉单...

    ext 下拉树 ext2

    下拉树是UI设计中一个实用的元素,它将传统下拉列表与树形结构相结合,用户在下拉框中可以看到层次化的选项,这在需要展示多级分类或者有层级关系的数据时非常有用。例如,在选择国家/地区、组织架构或产品分类等...

    ext 下拉树demo

    7. **模板(Template)**:对于下拉树的展示,可能需要自定义模板来决定节点在下拉列表中的显示方式。 8. **API调用**:EXT JS提供了丰富的API接口,如expandAll()用于展开所有节点,collapseAll()用于折叠所有节点...

    ext学习资料ext学习资料

    它可以包含各种输入控件,如文本字段、复选框、下拉列表等。表单数据可以方便地提交到服务器,或者与数据存储进行双向绑定。下面是一个创建简单表单的例子: ```javascript var form = new Ext.form.FormPanel({ ...

    ext简明教程_掏钱学ext

    - **控件概述**:介绍了ext框架中各种控件的基本用法,如按钮、下拉列表等。 - **布局管理器**:解释了如何使用不同的布局管理器(如卡片布局、网格布局)来组织页面元素。 2. **高级特性详解** - **数据绑定**...

    ext学习之路

    ### ext学习之路:深入解析ExtJS 4.20的核心组件与应用 #### 构建与源码(build & source) 在深入探索ExtJS 4.20之前,理解其构建方式与源码结构至关重要。ExtJS的构建过程通常涉及将源代码编译成适合生产环境的...

    ExtJs之带图片的下拉列表框插件

    在这个框架中,ExtJs提供了一系列可扩展的控件,其中就包括了下拉列表框ComboBox。这种控件在用户界面设计中非常常见,它能够让用户从下拉列表中选择一项或多项数据。 在ExtJs的官方资源中,曾出现过一个带图片的...

    ext4.2学习之路

    ### ext4.2学习之路:深入理解Ext JS 4.2框架 #### 一、Ext JS 4.2概述 Ext JS是一款强大的企业级富客户端Web应用程序开发框架,基于JavaScript和HTML5技术,用于构建高性能的桌面和移动Web应用程序。Ext JS 4.2...

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

    它提供了一套完整的组件模型,包括各种UI控件,如表格、面板、菜单等,其中Combobox(组合框)是常用于创建下拉列表的选择框。在本案例中,“用Ext 2_0 combobox 做的省份和城市联动选择框”是一种交互式UI设计,常...

    EXT_JS实例,官方实例

    6. **表单组件**:EXT JS提供了一系列表单组件,如文本框(TextField)、下拉列表(ComboBox)、复选框(Checkbox)、单选按钮(RadioButton)等。这些组件可以轻松创建复杂的表单并实现数据验证。 7. **Ajax通信**...

    Ext控件大全,适合新手学习

    在Ext JS中,控件是指用来构建用户界面的基本元素,包括按钮、文本框、下拉列表等。了解并熟练掌握这些控件对于开发高质量的Web应用至关重要。通过合理组合各种控件,可以创建出功能丰富且用户友好的界面。 ### 二...

    下拉列表 learning extjs 中文

    在EXTJS这个强大的JavaScript框架中,下拉列表(ComboBox)是一种常见的UI组件,它用于创建交互式的下拉选择框。EXTJS的下拉列表不仅提供了基本的选项选择功能,还支持自定义渲染、远程数据加载等多种高级特性。本文...

    ext下拉多选组件multicombo

    EXTJS的ComboBox通常是一个单选下拉列表,用户只能从预定义的选项中选择一个。然而,"multicombo"组件则允许用户选择多个选项,这在数据输入或者筛选场景中非常实用,比如在表单中选择多个分类或者标签。 "源码...

    Ext designer

    6. **Combobox**:在Ext JS中,Combobox是一个下拉列表框组件,结合了输入框和下拉菜单的功能。用户可以在输入框中手动输入,也可以从下拉列表中选择,常用于搜索、选择项等场景。 7. **xds_preview.air**:这个...

    Ext-JS框架中文文档

    - **ComboBox**: 下拉列表框组件,常用于提供用户选择项。 9. **Ajax与ComboBox** - **Ext.Ajax类**: 实现了与服务器异步通信的功能。 - **Ajax文件上传**: 使用ExtJS进行文件上传操作。 10. **分页与ComboBox*...

Global site tag (gtag.js) - Google Analytics