DWRProxy既然可以用在Ext.data.Store中,那么它也可以为ComboBox服务,如代码清单10-8所示。
代码清单10-8 DWRProxy与ComboBox整合
var info = Ext.data.Record.create([
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]);
var store = new Ext.data.Store({
proxy: new Ext.data.DWRProxy(infoManager.getItems, true),
reader: new Ext.data.ListRangeReader({
totalProperty: 'totalSize',
root: 'data',
id: 'id'
}, info)
});
var combo = new Ext.form.ComboBox({
store: store,
displayField: 'name',
valueField: 'id',
triggerAction: 'all',
typeAhead: true,
mode: 'remote',
emptyText: '请选择',
selectOnFocus: true
});
combo.render('combo');
我们既可以用mode:'remote'和triggerAction:'all'在第一次选择时读取数据,也可以设置mode:'local',然后手工操作store.load()并读取数据。
DWR要比Json-lib方便得多,而且DWR返回的数据可以直接作为JSON使用,使用Json-lib时还要面对无休无止的循环引用。
这次的示例稍微复杂一些,因为包括依赖jar包、class、XML和JSP,所以示例单独放在10.store/dwr2/下,请将它们复制到tomcat的webapps下,然后再使用浏览器访问。
分享到:
相关推荐
本示例探讨如何利用Ext JS中的`Ext.form.field.ComboBox`组件,结合Java后端和JSON数据格式,来创建这样一个功能。 `Ext.form.field.ComboBox`是Ext JS框架中一个强大的组件,它提供了下拉列表的功能,可以用于创建...
**Ext.form.ComboBox** 是一个下拉列表框组件,用于提供可选列表供用户选择。 - **allQuery**: 类型为 `String`,当用户在组合框中输入时,此属性定义所有匹配的项都将显示在列表中。 - **autoCreate**: 类型为 `...
在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...
3. `combo`:`Ext.form.ComboBox`是下拉列表框组件,允许用户在预设的选项中进行选择,同时可以提供搜索功能以便快速定位选项。 4. `datefield`:`Ext.form.DateField`是日期选择组件,用户可以通过日历控件选择...
8. **组合框模式**:`Ext.form.TextField`还可以扩展为`Ext.form.ComboBox`,实现下拉选择功能,这在需要用户从预定义选项中选择时非常有用。 在压缩包中的`Ext.form.TextField`文件夹,很可能是包含了一个或者多个...
在Ext.js中,`Ext.Store`是用来管理数据的类,它通常与各种UI组件(如Grid、ComboBox等)关联,用于存储和检索数据。然而,获取`Ext.Store`的方式并不像获取其他Ext组件那样直接,因为Store并不是一个具有可视界面的...
用EXT来实现下拉框ComboBox 下拉框可以实现分页
"ext多选下拉列表的全选功能实现"这个主题聚焦于一个特定的UI组件——ExtJS库中的MultiComboBox,这是一种允许用户多选的下拉列表控件。在实际应用中,全选功能常常被用来快速选择所有选项,极大地提高了用户的操作...
var comboBox = Ext.create('Ext.form.ComboBox', { fieldLabel: '选择项', store: ['选项1', '选项2', '选项3'], displayField: 'text', valueField: 'text', }); ``` 2. **添加或删除选项**: 当需要添加...
1. 数据绑定:EditorGridPanel通过Store获取数据,Store可以与服务器端进行数据交换。 2. 编辑模式:当用户点击单元格时,对应的编辑器会显示出来,用户可以在编辑器中输入新值。 3. 提交更改:编辑完成后,...
**2.18 ComboBox (Ext.form.ComboBox)** - **xtype**: `combo` - **功能描述**:ComboBox 是一个下拉列表框,用户可以从列表中选择一个值。 - **主要用途**:适用于需要用户从预定义的选项中选择的场景。 **2.19 ...
EXT2_combobox_form.rar_combobox ext_ext 这个标题暗示我们关注的是一个与EXT2相关的项目,其中包含了关于form表单和combobox的示例。EXT是一个流行的JavaScript库,主要用于构建富客户端应用,特别是Web应用的用户...
当省份ComboBox的`select`事件触发时,我们可以获取选中的省份ID,然后清空城市ComboBox的Store,并通过省份ID从服务器获取对应的城市数据。更新城市Store后,城市ComboBox会自动显示新的城市列表。 4. **城市...
53、Ext.form.DateField类 ………… 45 54、Ext.form.ComboBox类 ……………… 46 55、Ext.form.TimeField类 ………… 47 56、Ext.menu.Menu类 ………………… 50 57、Ext.menu.BaseItem类 …………… 50 58、Ext....
comboBox.setValue(comboBox.getStore().getValues()); } }); var deselectAllBtn = Ext.create('Ext.button.Button', { text: '全不选', handler: function() { comboBox.getStore().each(function(record) {...
editor: new Ext.form.ComboBox({ id: "combo_process", store: store_process, valueField: "process_id", displayField: "process_name", forceSelection: true, typeAhead: true, triggerAction: 'all', ...
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: [ /* ... *...
【Ext 3.x + Ext 2.x 下拉树 Ext.ux.ComboBoxTree】是基于ExtJS框架的一个组件,它结合了下拉框(ComboBox)和树形控件(TreePanel)的功能,提供了一种用户友好的选择界面。在网页应用中,这种控件常用于展示层级...
1. **创建一个新的类**:定义一个继承自Ext.form.ComboBox的新类,添加必要的配置和方法来支持多选。 2. **配置store**:设置一个数据存储(Store)来保存可选项,确保每个记录都有一个表示选中状态的字段,如`...