`
lipengcheng0116
  • 浏览: 19310 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJs4 下拉框联动

阅读更多

 

/**
* @class Ext.app.AdSiteGrid
* @extends Ext.grid.GridPanel
* 内容项Add
*/
Ext.define('ctiWsSort', {
    extend: 'Ext.data.Model',
    fields: [
            { type: 'string', name: 'Id' },
            { type: 'string', name: 'Name' }
           ]
    });
  
            wsStore = Ext.create('Ext.data.Store', {
                model: 'ctiWsSort',
                proxy:
                 {
                     type: 'ajax',
                     url: 'Data/WebServiceComboxData.json',
                     reader: { type: 'json', root: 'data' },
                     fields: ['Id', 'Name']
                 },
                listeners:
                    {
                        'load': function (me, record, successful) {
                            if (successful) {
                                var combSort = Ext.getCmp('ctcEditTableName');
                                combSort.setValue(combSort.getValue());
                            }
                        }
                    },
                autoLoad: true
            });
                    {
                        xtype: 'combo',
                        fieldLabel: 'Web Service接口',
                        allowBlank: false,
                        blankText: "此项不能为空",
                        id: 'ctiEidtWebServie',
                        name: 'wsName',
                        typeAhead: true,
                        displayField: "text",
                        valueField: "value",
                        queryMode: 'local',
                        store: new Ext.data.SimpleStore({
                            fields: ["text", "value"],
                            data: [["热点新闻接口", "1"], ["产品库存接口", "2"], ["新闻维护接口", "3"]]
                        }),
                        listeners: {
                            "select": function (combo, record, index) {
                                alert(combo.value);
                                wsStore.proxy.url = 'Data/WebServiceComboxData2.json';
                                wsStore.load();
                            }
                        }
                    },
                    {
                        xtype: 'combo',
                        fieldLabel: "数据库表名",
                        blankText: "此项不能为空",
                        allowBlank: false,
                        id: "ctcEditTableName",
                        name: "TableName",
                        displayField: "Name",
                        valueField: "Id",
                        queryMode: 'local',
                        typeAhead: true,
                        store: wsStore
                    }
    
分享到:
评论

相关推荐

    Extjs 轻松实现下拉框联动

    最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵

    最简单的下拉框联动不刷新页面示例

    在网页开发中,下拉框联动是一种常见的交互设计,它允许用户在选择一个下拉框选项后,另一个相关的下拉框会自动更新其内容,而无需整个页面进行刷新。这种功能提高了用户体验,减少了不必要的数据传输,加快了页面...

    extJs 下拉框联动实现代码

    ExtJs 下拉框联动实现代码详解 ExtJs 是一个功能强大且灵活的 JavaScript 框架,广泛应用于 Web 应用程序开发。今天,我们将介绍如何使用 ExtJs 实现下拉框联动的功能。 ExtJs 中的下拉框控件是 Combo,它提供了...

    ExtJs学习例子:多级联动下拉菜单演示例子

    一共3个文件: ...getData.asp data.mdb 前台采用ExtJs 2.2.1编写(由于库文件比较大,考虑到大家本机都有了,所以在此没有上传,大家直接改一下路径即可),后台采用asp+access...本例子演示的4级联动菜单:州+国家+城市+地区

    Ext combo 下拉框级联

    实现级联下拉框的核心在于数据的联动和更新。这通常通过监听第一个下拉框的选中事件来完成,当用户在父级ComboBox中选择一个项时,会触发一个事件,这个事件可以用来更新子级ComboBox的数据源。在Ext JS中,可以通过...

    Extjs6 下拉列表

    这个框架提供了丰富的功能和定制性,使得下拉列表不仅能够简单地显示一组静态选项,还能与数据源进行联动,展示动态加载的数据。 1. **ExtJS6中的ComboBox** - ComboBox是ExtJS中的一个基础组件,它结合了文本...

    ExtJS4中文教程2 开发笔记 chm

    ExtJS4学习笔记(十六)---Combobox三级联动 ExtJS4学习笔记(十四)--- ComponentQuery ExtJS4学习笔记(四)---Grid的使用 Extjs4开发笔记(三)——菜单的实现 Extjs4开发笔记(二)——框架的搭建 Extjs4开发笔记(五)——...

    JSP页面下拉框三级联动

    4. **动态更新内容**:在事件监听器中,使用`loadData`方法动态更新下一级下拉框的内容。这一步骤是实现联动的关键。 5. **用户交互反馈**:为了增强用户体验,可以添加消息提示框,展示用户选择的结果,如省份、...

    extjs-Ext.ux.form.LovCombo下拉框

    在压缩包子文件的文件名称列表中提到的"extjs下拉",很可能包含了EXTJS下拉框相关的示例代码、样式文件或者配置文件。这些文件可以帮助开发者理解并应用`Ext.ux.form.LovCombo`,通过查看源码学习如何初始化、配置...

    地区选择插件——三级联动

    NULL 博文链接:https://ruohanfly.iteye.com/blog/2183068

    ssh2+extCombobox联动动态下拉框

    当我们将SSH2与ExtJS ComboBox结合使用时,可以创建动态联动的下拉框,实现数据的级联选择,提高用户交互体验。 在SSH2框架中,Struts2负责处理用户的请求和视图展示,Spring则管理应用的业务逻辑和依赖注入,...

    jsp从数据库获取数据填充下拉框实现二级联动菜单的方法

    本文将详细讲解如何使用JSP从数据库获取数据来填充下拉框,进而实现二级联动菜单。 首先,我们需要在JSP页面中创建第一个下拉框,用于展示一级菜单。这个下拉框的数据是从数据库中获取的。例如: ```jsp listKey...

    漂亮的Extjs+struts2实现联动下拉

    在本项目中,"漂亮的Extjs+struts2实现联动下拉"是一个集成这两个技术的实例,实现了在Web应用中动态更新下拉框选项的功能。 联动下拉框是一种常见的交互设计,常见于需要根据前一个选择项动态加载后一个选择项的...

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

    4. **Ajax请求与数据绑定**:在城市下拉框的`select`事件处理函数中,使用Ext.Ajax发送GET请求到服务器,传递省份ID。收到服务器返回的JSON数据后,使用`store.loadData`方法更新城市下拉框的数据。 5. **样式与...

    extjs网页控件开发

    在"extjs网页控件开发"中,我们主要关注的是使用ExtJS来创建高效的网页组件,如图表和多级联动下拉列表框。这些控件能够显著提升用户界面的交互性和用户体验。 首先,让我们深入探讨ExtJS中的图表控件。ExtJS提供了...

    ext4实现带复选框的多选下拉框

    EXTJS 4中的"lovcombo"(即“联动下拉框”或“选择器组合框”)是用于创建这种高级交互控件的一种方式。lovcombo结合了下拉框和复选框的特性,使得用户可以在一个下拉菜单中选择多个选项,每个选项前都有一个复选框...

    EXT中COMBOX联动

    "EXT中COMBOBOX联动"指的是在EXTJS应用中,两个或多个COMBOBOX之间实现数据交互和联动效果,即当一个COMBOBOX的选择项改变时,会触发其他COMBOBOX的更新,以展示与当前选择相关联的数据。 EXTJS的COMBOBOX联动通常...

    资料:包括extjs2.0源码

    5. **表单元素**:EXTJS 2.0提供了丰富的表单元素,如文本框、下拉框、复选框等,支持验证和联动效果,方便构建动态表单。 6. **图表组件**:EXTJS 2.0内置了各种图表类型,如柱状图、饼图、线图等,适用于数据可视...

    Ext二级联动完整例子

    在ExtJS中,"二级联动"通常指的是两个或多个下拉框(ComboBox)之间的联动效果,即在一个下拉框选择一个选项后,另一个下拉框会根据前者的选值动态更新其选项。这在数据筛选、地区选择、分类细化等场景中非常常见。 ...

Global site tag (gtag.js) - Google Analytics