//小记录
// 从后台加载籍贯信息,动态加载 显示到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();
}
}
分享到:
相关推荐
3. **数据源**:ComboBox的数据源可以是静态数组,也可以是动态加载的数据,如通过Ajax请求获取。数据项通常包含一个字段用于显示(例如,`text`),另一个用于存储(例如,`value`)。 4. **模板**:为了显示多选...
Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择部门', store: Ext.create('Ext.data.TreeStore', { model: 'Department', root: { text: '所有部门', expanded: true, children: [ /* ... *...
因此,可能需要使用分页或其他优化策略来避免一次性加载所有数据。 通过以上步骤,我们可以成功地在ExtJS的MultiComboBox中实现全选功能。在实际项目中,这个功能通常结合其他业务逻辑,例如配合服务器端进行数据...
在EXTJS4中,下拉菜单树(ComboBox+Tree)是一种高级UI组件,它结合了ComboBox的下拉选择框和TreePanel的树形结构,提供了一种用户友好的交互方式,用于展示层次化的数据。这种组件特别适用于需要从多个选项中进行...
var comboBox = Ext.create('Ext.form.ComboBox', { ... listeners: { expand: function(comboBox) { var grid = Ext.create('Ext.grid.Panel', { store: yourStore, // 需要预先创建的Store columns: [{...
- 动态加载:在`queryMode`为"remote"时,可以通过API动态加载数据。 5. **源码解析** - 在创建Combobox时,会涉及到ExtJS的组件体系、数据绑定和渲染机制。理解这些核心概念有助于更好地定制和优化Combobox。 -...
var combo = Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择', store: store, displayField: 'name', // 显示的字段 valueField: 'id', // 值字段 queryMode: 'remote', // 远程查询模式 ...
- **数据加载**: 从服务器加载数据并显示在表格中。 #### 20. 行模型与Grid视图 - **行选择模型**: 控制如何选择表格中的行。 - **Grid视图**: 负责渲染表格数据。 #### 21. GridPanel分页 - **分页工具栏**: 提供...
2. **动态加载**:数据通常从服务器异步加载,根据用户的输入过滤结果,这样可以减少页面的加载时间,并提供更好的用户体验。 3. **自定义模板**:可以定制显示模板,决定如何在下拉列表和组合框中展示每个选项。 ...
ComboBoxTree是ExtJS4中的一个自定义组件,它结合了ComboBox(下拉框)和TreePanel(树形面板)的功能。ComboBox通常用于提供一个下拉列表供用户选择,而TreePanel则用于展示层次结构的数据。ComboBoxTree将这两者...
2. **创建数据存储**:为每个ComboBox创建相应的store,加载数据。省份store应包含所有省份数据,城市store初始为空,但在一级选择变化时会被填充。 ```javascript var provincesStore = Ext.create('Ext.data.Store...
ExtJS的Combobox组件是一种...综上所述,实现ExtJS的Combobox二级联动主要是通过监听事件、动态更新数据以及合理的数据模型设计来完成的。在实际开发中,可以根据项目需求进行调整和优化,以提高用户体验和系统性能。
一个典型的结合了ExtJS和Catalyst的应用可能包括一个使用ExtJS创建的动态数据网格,该网格通过Ajax请求从Catalyst的控制器获取数据。控制器处理请求,查询数据库,并返回格式化的数据。数据网格接收这些数据,根据...
在这个场景中,我们关注的是在EXTJS的Combobox(下拉框)组件中实现分页和动态加载数据的功能。Combobox通常用于展示有限数量的选项,但在大数据集的情况下,一次性加载所有数据可能导致页面性能下降。因此,引入...
4. **联动逻辑**:在实际应用中,可能需要处理更复杂的联动逻辑,例如多级联动,这时需要根据业务需求编写适当的函数,动态计算和设置第二个ComboBox的数据。 5. **源码分析**:EXTJS的源码提供了丰富的API和实现...
- 考虑性能,当数据量很大时,可以使用远程查询(`queryMode: 'remote'`),只加载可视区域内的数据。 - 要注意处理 `GridComboBox` 的大小和宽度,确保下拉列表可以完全显示内容。 - 自定义事件处理和样式设置是...
EXTJS的下拉列表通常由`Ext.form.field.ComboBox`类创建。全选和去全选功能通常与多选下拉列表关联,EXTJS通过设置`multiSelect: true`属性来启用这个功能。要实现全选和去全选,我们需要自定义一些方法并绑定到相应...
4. **动态加载(Dynamic Loading)**:为了优化性能,级联ComboBox通常只在需要时加载下级数据。这可以通过配置Store的`autoLoad`属性以及在事件处理函数中调用`load`方法来实现。 5. **联动逻辑**:在事件处理函数...
- `Ext.form.field.ComboBox`:下拉列表框,可以是静态或动态加载的。 - `Ext.form.field.Time`:时间选择器。 - `Ext.form.field.Date`:日期选择器。 - `Ext.form.field.Hidden`:隐藏字段。 - `Ext.form....
EXTJS还提供了丰富的API和事件处理机制,允许你对下拉框进行更复杂的操作,比如监听用户的选择变化、动态加载数据等。例如,你可以监听`select`事件来响应用户的选择: ```javascript listeners: { select: ...