`

ExtJS中关于ComboBox加载后台数据

EXT 
阅读更多

今天忙了一天,终于解决了让我头疼的ComboBox加载后台数据,作为一个菜鸟新手,自己独立解决了一个困扰已久的问题,真是十分欣慰啊,呵呵,来不及就想拿出来和大家分享一下!

Ext.onReady(function(){
	var storeProvince = new Ext.data.JsonStore({
        autoLoad:true,
        url : "http://localhost:8080/HyitSystem/testCombo.action",
        root : "provincelist",
        fields : [{
        	name : 'id'
        }, {
            name : 'province'
        }]
    });
     var comboProvince = new Ext.form.ComboBox({
        store: storeProvince,
        name:'cName',
        fieldLabel:"选择省",
        mode: 'local',
        triggerAction: 'all',
        valueField: 'id',
        displayField: 'province',
        hiddenName:'id',
        emptyText: '请选择所在省',
        blankText: '请选择...',
        selectOnFocus: true,
        allowBlank: false,
        editable: false
    });
	var form = new Ext.form.FormPanel({
		labelAlign : 'right',
		labelWidth : 60,
		renderTo:Ext.getBody(),
		title:"级联选择",
		width:290,
		frame : true,
    	items : [{
              layout : 'form',
              items : [comboProvince]
        }]
	})
})

 后台数据输出样式如下:

{"provincelist":[{"id":1,"province":"河南省"},{"id":2,"province":"河北省"},{"id":3,"province":"山西省"},{"id":4,"province":"山东省"},{"id":5,"province":"湖南省"},{"id":6,"province":"湖北省"},{"id":7,"province":"四川省"},{"id":8,"province":"辽宁省"},{"id":9,"province":"吉林省"},{"id":10,"province":"黑龙江省"},{"id":11,"province":"广东省"},{"id":12,"province":"浙江省"},{"id":13,"province":"福建省"},{"id":14,"province":"甘肃省"},{"id":15,"province":"江西省"},{"id":16,"province":"陕西省"},{"id":17,"province":"海南省"},{"id":18,"province":"江苏省"},{"id":19,"province":"安徽省"},{"id":20,"province":"云南省"},{"id":21,"province":"贵州省"},{"id":22,"province":"天津市"},{"id":23,"province":"北京市"},{"id":24,"province":"上海市"},{"id":25,"province":"重庆市"},{"id":26,"province":"新疆维吾尔族自治区"},{"id":27,"province":"内蒙古自治区"},{"id":28,"province":"西藏自治区"},{"id":29,"province":"广西壮族自治区"},{"id":30,"province":"宁夏回族自治区"},{"id":31,"province":"香港特别行政区"},{"id":32,"province":"澳门特别行政区"}]}

 一定要保证输出格式的正确哦,不然就加载不了了。

0
8
分享到:
评论

相关推荐

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

    在这个特定的项目“Extjs4---combobox省市区三级联动+struts2”中,我们将探讨如何利用ExtJS 4的ComboBox组件实现省市区的三级联动效果,并结合Struts2框架进行数据交互。 首先,`ComboBox`是ExtJS中的一个组件,它...

    Extjs3+MySQL后台数据库实现省份城市二级联动

    3. **ExtJS前端实现**:在ExtJS中,我们可以创建两个`ComboBox`(下拉框)组件,分别代表省份和城市。省份下拉框的配置应包括加载所有省份的数据,而城市下拉框的配置则需要监听省份下拉框的`select`事件,当省份...

    ExtJs Google Suggest 动态查询效果

    在前端,ExtJs的ComboBox配置中,我们需要设置以下关键属性: 1. `store`:用于存储建议项的数据源,可以是本地数组或远程数据源(通过Ajax请求)。 2. `displayField`:定义显示在下拉列表中的字段名。 3. `...

    extjs输入框检索补全

    1. **Combobox 组件**:ExtJS 的 Combobox 是一个下拉列表框,可以与后台服务进行通信,动态加载数据。当你在输入框中键入字符时,Combobox 可以通过 AJAX 请求获取匹配的数据,然后显示在下拉列表中。配置 Combobox...

    ExtJS PropertyGrid中使用Combobox选择值问题

    通过这种方式,我们可以在PropertyGrid中正确地使用Combobox,使得用户在选择性别等选项时看到的是易于理解的文本描述,而不是后台的标识数据。这提高了用户体验,同时也保证了数据的一致性和准确性。

    extjs网页控件开发

    在ExtJS中,这通常通过组合框(ComboBox)组件和数据存储(Store)配合实现。每个级别的下拉框都有自己的Store,当上一级选择改变时,可以通过监听事件并更新Store来刷新下拉列表内容。 开发这样的控件需要掌握以下...

    extjs 写的动态加载、增删改查、拖拽Tree (java mysql数据库 已有表结构 eclipse可直接导入)(完整版)

    总的来说,这个项目涵盖了前端开发中的多个重要技术点,包括ExtJS的Tree组件、动态加载、数据操作以及与后端的交互,后端的Java服务设计,以及数据库设计和管理。如果你对这些领域感兴趣,这个项目提供了一个很好的...

    Extjs应用教程 提高篇

    ComboBox是EXTJS中一种常用的数据输入控件,它允许用户从下拉列表中选择值,也可以手动输入。静态绑定意味着ComboBox的数据是预先定义好的,不会随着应用程序的运行而改变。 第一篇教程则介绍了如何使用EXTJS 2.2、...

    Extjs中文教程

    - 数据在Extjs中不仅仅是指存储的数据,还涉及到数据的加载、处理和展示。 - 组件与数据紧密相关,许多组件都需要数据源的支持才能正常工作。 - **Ext.data.DataProxy类** - 负责从服务器加载数据,包括异步请求...

    Extjs之--带分页的lovcombo控件

    本篇我们将聚焦于ExtJS中的一个特定控件——带分页的LOV(Look Up Value)Combo,它结合了Combobox和分页功能,方便用户在大量的数据中选择值。 LOV Combo(Look Up Value ComboBox)是ExtJS中的一种复合控件,它的...

    ExtJs搜索控件、插件

    1. **搜索控件**:在ExtJS中,搜索控件通常是基于`Ext.form.field.Text`或`Ext.form.field.ComboBox`进行扩展的。它们提供了基本的文本输入,允许用户输入关键字来执行搜索操作。你可以通过添加额外的属性和方法来...

    extjs2.0 画的一个带查询条件和查询结果的页面

    将这个数组加载到数据存储中,网格会自动更新显示新的数据。 6. **布局管理**: 使用ExtJS的布局系统(如'border'或'form'布局),可以方便地将查询条件表单和查询结果网格安排在同一个页面的不同区域。 7. **...

    Extjs自定义组件-下拉树

    2. **前后台通信**:组件支持与后端进行数据交互,动态加载树结构数据。 3. **响应式设计**:组件具有良好的响应式特性,能够在不同设备上正常工作。 4. **选择控制**:提供了对非叶子节点点击的控制选项,增强数据...

    ExtJS下拉列表树控件

    `ComboBox` 的 `queryMode` 一般设为 'local',因为下拉列表树的数据通常是静态的或者在初始化时已经加载完成。如果数据量很大,也可以设置为 'remote',并实现后台过滤。 最后,可以添加一些自定义事件监听,例如...

    extJs 常用到的增,删,改,查操作代码

    在上述代码示例中,“showUserForm()”函数被用来绘制添加表单,其中用到了ExtJs的布局和组件配置。 对于删除操作,通常会提供一个列表界面,列出可操作的数据项,并为每个数据项提供一个删除按钮。当点击删除按钮...

    ExtJS对Ajax的支持

    ##### 2.1 在Grid中使用DWR获取后台数据 在ExtJS的Grid控件中,可以利用DWR技术直接从服务器获取数据并填充网格。这涉及到创建一个DWR代理,该代理暴露Java方法供JavaScript调用,然后使用这些方法加载Grid的数据源...

    Ext开发过程中的自学笔记

    下面我们将深入探讨Combobox的使用方式,包括使用数组和后台数据,以及如何实现多个Combobox共享数据源,以及如何将Combobox的valueField值回传到后台。 1. **使用数组创建Combobox**: - 首先定义一个数组,包含...

    Extjs4-学习指南

    - **通过 model 保存数据**:更新数据模型中的数据。 - **将数据保存到服务器**:使用 Ajax 技术实现客户端与服务器的交互。 ##### 3.3 布局和容器 - **容器**:用于承载 UI 组件。 - **布局**:定义容器内部组件...

Global site tag (gtag.js) - Google Analytics