`
空空儿
  • 浏览: 136671 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

Extjs.form.ComboBox 动态加载数据

阅读更多
   //小记录

// 从后台加载籍贯信息,动态加载 显示到ComboBox中 

	var httpProxy = new Ext.data.HttpProxy({
				url : "employee_queryNativePlace.action"

			});
	var create = new Ext.data.Record.create([{
				name : "regionId",
				mapping : "regionId"
			}, {
				name : "regionName",
				mapping : "regionName",
				type : "string"
			}]);

	var jsonReader = new Ext.data.JsonReader({
				totalProperty : "totalProperty", // 总记录数
				root : "root" // 所有的数据(json对象数组)
			}, create)

	var nativeStore = new Ext.data.Store({
				proxy : httpProxy,
				reader : jsonReader,
				remoteSort: false 
			});
			
	nativeStore.load();   //将数据加载到本地


//comboBox

   {
												layout : "form",
												columnWidth : .3,
												items : [{
													xtype : "combo",
													fieldLabel : "籍贯",
													width : 135,
													mode:'local',   //直接从本地获得数据(已通过nativeStore.load()将数据加载到本地,不需要用 remote 再从服务器获取)
													name : "enativeplace",
												//	hiddenName : "enativeplace",   //通过隐藏着值将value的值传提交到后台
												    valueField : 'regionName',
													displayField : 'regionName',
													triggerAction : "all",  //设置下拉选择,如果没设置,选中一个之后,不能再重选其他的选项
													editable : false,
													store : nativeStore,   //加载到comboBox中
													emptyText : "请选择籍贯..."

												}]
											}


//action里面的方法 
  public void queryNativePlace() {
		try {
			//PrintWriter OutPrint = this.getResponse().getWriter();
			Integer regionType = new Integer(1);
			
			//查詢
			List arrayList = (ArrayList) employeeService.selectNativePlace(regionType);

			ArrayList<String> nameList = new ArrayList<String>();
			for (int i = 0; i < arrayList.size(); i++) {
				TRegion tregion = (TRegion)arrayList.get(i);
				
				nameList.add(tregion.getRegionName());
				System.out.println("regionName = "+tregion.getRegionName());
			}
			
			int totalCount = arrayList.size();
			System.out.println("totalCount = " + totalCount);
			String json = JsonUtil.list2json(arrayList);

			StringBuffer buf = new StringBuffer();

			buf.append("{totalProperty:"); // totalProperty: 总共记录行数
			buf.append(totalCount);
			buf.append(",root:");
			buf.append(json);
			buf.append("}");

			OutPrint.print(buf.toString());   //以json的格式輸出,这个不能忘记
			//OutPrint.print("{}");
			System.out.println("json : " + buf.toString());
			OutPrint.print(true);
		
		} catch (Exception ex) {
			ex.printStackTrace();
		}
	}
0
1
分享到:
评论
1 楼 object8888 2011-08-30  
挺有用的 谢谢分享

相关推荐

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

    3. **数据源**:ComboBox的数据源可以是静态数组,也可以是动态加载的数据,如通过Ajax请求获取。数据项通常包含一个字段用于显示(例如,`text`),另一个用于存储(例如,`value`)。 4. **模板**:为了显示多选...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择部门', store: Ext.create('Ext.data.TreeStore', { model: 'Department', root: { text: '所有部门', expanded: true, children: [ /* ... *...

    ext多选下拉列表的全选功能实现

    因此,可能需要使用分页或其他优化策略来避免一次性加载所有数据。 通过以上步骤,我们可以成功地在ExtJS的MultiComboBox中实现全选功能。在实际项目中,这个功能通常结合其他业务逻辑,例如配合服务器端进行数据...

    extjs4 下拉菜单树 combobox+tree 支持单选多选

    在EXTJS4中,下拉菜单树(ComboBox+Tree)是一种高级UI组件,它结合了ComboBox的下拉选择框和TreePanel的树形结构,提供了一种用户友好的交互方式,用于展示层次化的数据。这种组件特别适用于需要从多个选项中进行...

    extjs4 ComboBox 点击下拉框 出现grid效果

    var comboBox = Ext.create('Ext.form.ComboBox', { ... listeners: { expand: function(comboBox) { var grid = Ext.create('Ext.grid.Panel', { store: yourStore, // 需要预先创建的Store columns: [{...

    无废话ExtJs 教程十[下拉列表:Combobox]

    - 动态加载:在`queryMode`为"remote"时,可以通过API动态加载数据。 5. **源码解析** - 在创建Combobox时,会涉及到ExtJS的组件体系、数据绑定和渲染机制。理解这些核心概念有助于更好地定制和优化Combobox。 -...

    Extjs之旅-combox之远程加载数据

    var combo = Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择', store: store, displayField: 'name', // 显示的字段 valueField: 'id', // 值字段 queryMode: 'remote', // 远程查询模式 ...

    轻松搞定ExtJS.pdf

    - **数据加载**: 从服务器加载数据并显示在表格中。 #### 20. 行模型与Grid视图 - **行选择模型**: 控制如何选择表格中的行。 - **Grid视图**: 负责渲染表格数据。 #### 21. GridPanel分页 - **分页工具栏**: 提供...

    Extjs3 多选下拉框LovCombo

    2. **动态加载**:数据通常从服务器异步加载,根据用户的输入过滤结果,这样可以减少页面的加载时间,并提供更好的用户体验。 3. **自定义模板**:可以定制显示模板,决定如何在下拉列表和组合框中展示每个选项。 ...

    Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件

    ComboBoxTree是ExtJS4中的一个自定义组件,它结合了ComboBox(下拉框)和TreePanel(树形面板)的功能。ComboBox通常用于提供一个下拉列表供用户选择,而TreePanel则用于展示层次结构的数据。ComboBoxTree将这两者...

    extjs的ComboBox 2级联动

    2. **创建数据存储**:为每个ComboBox创建相应的store,加载数据。省份store应包含所有省份数据,城市store初始为空,但在一级选择变化时会被填充。 ```javascript var provincesStore = Ext.create('Ext.data.Store...

    ExtJS Combobox二级联动列子

    ExtJS的Combobox组件是一种...综上所述,实现ExtJS的Combobox二级联动主要是通过监听事件、动态更新数据以及合理的数据模型设计来完成的。在实际开发中,可以根据项目需求进行调整和优化,以提高用户体验和系统性能。

    catalyst_extjs.ppt

    一个典型的结合了ExtJS和Catalyst的应用可能包括一个使用ExtJS创建的动态数据网格,该网格通过Ajax请求从Catalyst的控制器获取数据。控制器处理请求,查询数据库,并返回格式化的数据。数据网格接收这些数据,根据...

    extjs4.2 分页combo动态条数 源码

    在这个场景中,我们关注的是在EXTJS的Combobox(下拉框)组件中实现分页和动态加载数据的功能。Combobox通常用于展示有限数量的选项,但在大数据集的情况下,一次性加载所有数据可能导致页面性能下降。因此,引入...

    Extjs学习笔记(-):ComboBox联动

    4. **联动逻辑**:在实际应用中,可能需要处理更复杂的联动逻辑,例如多级联动,这时需要根据业务需求编写适当的函数,动态计算和设置第二个ComboBox的数据。 5. **源码分析**:EXTJS的源码提供了丰富的API和实现...

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    - 考虑性能,当数据量很大时,可以使用远程查询(`queryMode: 'remote'`),只加载可视区域内的数据。 - 要注意处理 `GridComboBox` 的大小和宽度,确保下拉列表可以完全显示内容。 - 自定义事件处理和样式设置是...

    解决ext下拉列表全选和去全选功能

    EXTJS的下拉列表通常由`Ext.form.field.ComboBox`类创建。全选和去全选功能通常与多选下拉列表关联,EXTJS通过设置`multiSelect: true`属性来启用这个功能。要实现全选和去全选,我们需要自定义一些方法并绑定到相应...

    extJs ComboBox级联

    4. **动态加载(Dynamic Loading)**:为了优化性能,级联ComboBox通常只在需要时加载下级数据。这可以通过配置Store的`autoLoad`属性以及在事件处理函数中调用`load`方法来实现。 5. **联动逻辑**:在事件处理函数...

    ExtJS-3.4.0系列目录

    - `Ext.form.field.ComboBox`:下拉列表框,可以是静态或动态加载的。 - `Ext.form.field.Time`:时间选择器。 - `Ext.form.field.Date`:日期选择器。 - `Ext.form.field.Hidden`:隐藏字段。 - `Ext.form....

    EXTJS 选下拉框,并取得下拉框的值

    EXTJS还提供了丰富的API和事件处理机制,允许你对下拉框进行更复杂的操作,比如监听用户的选择变化、动态加载数据等。例如,你可以监听`select`事件来响应用户的选择: ```javascript listeners: { select: ...

Global site tag (gtag.js) - Google Analytics