我的第一个Extjsnbsp;combo联动下…

2023-11-21 22:10
文章标签 第一个 联动 combo extjsnbsp

本文主要是介绍我的第一个Extjsnbsp;combo联动下…，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

联动下拉框

1. 后台代码

 

public void getXBValue() {

System.out.println("我擦。333。");

try {

PrintWriter out = getResponse().getWriter();

//json格式： id， name

out.write("[[1, '计算机科学系'], [2, '外语系'], [3, '经济系'], " +

"[4, '电子信息工程系'], [5, '工商管理系'], [6, '数理系'], " +

"[7, '法律与公共管理系'], [8, '艺术系'], [9, '教师教育系'], [10, '中文系']]");

out.close();

} catch (IOException e) {

}

 

return;

}

 

 

public void getZYSelectValueByXBid() {

String XBid = getRequest().getParameter("XBid");

System.out.println("XBid" + XBid);

try {

PrintWriter out = getResponse().getWriter();

out.flush();

//json格式： id， name

if (null != XBid && "1".equals(XBid)) {

out.write("[[1,'网络方向'],[2,'软件工程'],[3,'信息安全'],[4,'嵌入式']]");

}

if (null != XBid && "2".equals(XBid)) {

out.write("[[1,'222'],[2,'2323'],[3,'2424'],[4,'2525']]");

}

if (null != XBid && "3".equals(XBid)) {

out.write("[[1,'33'],[2,'33件工程'],[3,'33信息安全'],[4,'嵌入式']]");

}

out.close();

} catch (IOException e) {

}

 

return;

}

 

 

2. 前端代码

Ext.onReady(function() {

 

 

 

 

var storeXB = new Ext.data.Store({

    proxy:new Ext.data.HttpProxy({

     url :  __ctxPath + '/stuBaseInfo/StuBaseInfo/getXBValue.do' 

//         url :  __ctxPath + '/testProject/SelectBox/getSelectValue3.do' 

    }),

    reader : new Ext.data.ArrayReader( { }, 

    Ext.data.Record.create([ {

name : 'XBId'

}, {

name : 'XBName'

}]))

//, autoLoad: true  //自动加载数据

});

 

var comboXB = new Ext.form.ComboBox({

store: storeXB , //数据集

listeners : {

 

select : function(combo, record, index) {

//在此处设置联动(关联)

//var oneComboValue = Ext.get("comboProvincesId").dom.value;

//1. 把第一个下拉框的值传到后台，

var oneComboValue =record.data.XBId;

comboZY.reset();

storezhuanye.removeAll();

storezhuanye.proxy= new Ext.data.HttpProxy({

//2. 后台根据获取的的第一个下拉框的值取得其对应的数据

    url: __ctxPath + '/stuBaseInfo/StuBaseInfo/getZYSelectValueByXBid.do?XBid=' + oneComboValue

});   

//3. 把从后台得到的数据设置到第二个下拉框

            storezhuanye.load(); 

 

}

},

valueField : "XBId",

displayField : "XBName",

mode : 'remote',  //记得如果是加载后台的数据一定要设置remote

forceSelection : true,

allowBlank: false,  //false则不能为空，默认为true  

blankText : '专业不能为空',

emptyText : '请选择系别',

id: 'stuXi6',

name: 'stuXi6',

hiddenName : 'XBId',

editable : false,  //不可输入

triggerAction : 'all',

fieldLabel : '系别',

width : 120

});

 

var storezhuanye =  new Ext.data.Store({

    proxy:new Ext.data.HttpProxy({

     //url :  __ctxPath + '/stuBaseInfo/StuBaseInfo/getXBSelectValue.do' 

    }),

    reader : new Ext.data.ArrayReader( { }, 

    Ext.data.Record.create([ {

name : 'ZYId'

}, {

name : 'ZYName'

}]))

//, autoLoad: true  //自动加载数据

});

 

var comboZY = new Ext.form.ComboBox({

store: storezhuanye,  //数据集

valueField : "ZYId",

displayField : "ZYName",  

mode : 'remote',

forceSelection : true,

emptyText : '选择专业',

hiddenName : 'ZYId',

editable : false,

triggerAction : 'all', 

allowBlank: false,  //false则不能为空，默认为true  

blankText : '专业不能为空',

fieldLabel : '专业',

name : 'stuZy4',

id: 'stuZy4',

width : 120,

//添加监听事件

listeners: {

//给select事件添加监听

 

select: function (combo, record, index) {  //field是本下拉框

//处理下拉框的值

}

}

});

});


最后的效果图：

我的第一个Extjs <wbr>combo联动下拉框。

 

这篇关于我的第一个Extjsnbsp;combo联动下…的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/405433。

相关文章

好题——hdu2522（小数问题：求1/n的第一个循环节）

好题——hdu2522（小数问题：求1/n的第一个循环节）

好喜欢这题，第一次做小数问题，一开始真心没思路，然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数，不能写作两整数之比*****************************（一开始没想到，小学没学好） 此题1/n肯定是一个有限循环小数，了解这些后就能做此题了。 按照除法的机制，用一个函数表示出来就可以了，代码如下
阅读更多...
Spring Roo 实站（ 一 ）部署安装 第一个示例程序

Spring Roo 实站（ 一 ）部署安装 第一个示例程序

转自：http://blog.csdn.net/jun55xiu/article/details/9380213 一：安装 注：可以参与官网spring-roo： static.springsource.org/spring-roo/reference/html/intro.html#intro-exploring-sampleROO_OPTS http://stati
阅读更多...
使用gradle做第一个java项目

使用gradle做第一个java项目

涉及到的任务如下： assemble任务会编译程序中的源代码，并打包生成Jar文件，这个任务不执行单元测试。 Total time: 5.581 secs E:\workspace\Test>gradle assemble :compileJava :processResources UP-TO-DATE :classes :findMainClass :jar :b
阅读更多...
vue2实践：第一个非正规的自定义组件-动态表单对话框

vue2实践：第一个非正规的自定义组件-动态表单对话框

前言 vue一个很重要的概念就是组件，作为一个没有经历过前几代前端开发的我来说，不太能理解它所带来的“进步”，但是，将它与后端c++、java类比，我感觉，组件就像是这些语言中的类和对象的概念，通过封装好的组件（类），可以通过挂载的方式，非常方便的调用其提供的功能，而不必重新写一遍实现逻辑。 我们常用的element UI就是由饿了么所提供的组件库，但是在项目开发中，我们可能还需要额外地定义一
阅读更多...
SpringMVC的第一个案例 Helloword 步骤

SpringMVC的第一个案例 Helloword 步骤

第一步：web.xml配置 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocati
阅读更多...
我的第一次份实习工作－iOS实习生－第一个月

我的第一次份实习工作－iOS实习生－第一个月

实习时间：2015-08-20 到 2015-12-25  实习公司；福建天棣互联有限公司 实习岗位：iOS开发实习生 第一个月： 第一天来公司，前台报道后，人资带我去我工作的地方。到了那，就由一个组长带我，当时还没有我的办公桌，组长在第三排给我找了一个位置，擦了下桌子，把旁边的准备的电脑帮我装了下，因为学的是iOS，实习生就只能用黑苹果了，这是我实习用的电脑。 帮我装了一下电脑后，开机
阅读更多...
从零开始：打造你的第一个餐厅点餐小程序

从零开始：打造你的第一个餐厅点餐小程序

目录 1 为什么选择点餐小程序2 会有哪些功能2.1 顾客端2.2 服务员端2.3 后厨端2.4 收银端2.5 管理员（老板）端 3 开发工具选择4 你将获得什么让我们开始吧 最近，有不少粉丝咨询，有没有系统的低代码学习教程呀？为啥你的教程有的刚看的提起兴趣，怎么突然就中断了。有没有系统的视频学习教程呀，你是不是还有压箱底的好宝贝，没开放给我们看呀。 还真不是，压箱底的好宝贝已
阅读更多...
[含视频和源码]CRUD的最佳实践，联动前后端，包含微信小程序，API，HTML等(三)

[含视频和源码]CRUD的最佳实践，联动前后端，包含微信小程序，API，HTML等(三)

关说不练假把式，在上一，二篇中介绍了我心目中的CRUD的样子 基于之前的理念，我开发了一个命名为PasteTemplate的项目，这个项目呢后续会转化成项目模板，转化成项目模板后，后续需要开发新的项目就可以基于这个模板创建，这样就不要copy一个旧的项目，然后删删删，改改改，重命名等操作了 强迫症，一个项目的名字就得统一，心里才舒服 那么本次作者就带来了实物，本次主要介绍管理端的内容，我们一起
阅读更多...
启动第一个docker容器

启动第一个docker容器

1 、 docker pull ubuntu:20.04    下载镜像 2、 docker image ls 查看镜像 3、 docker run --name=test -itd 9df6d6105df2  创建并运行一个容器 4、 查看容器 docker ps -a 5、 登录容器 docker exec -it test /bin/bash 6 退出容器 exit
阅读更多...
java复习第四课，第一个程序HelloWord

java复习第四课，第一个程序HelloWord

在任何程序开发的时候，目录不能有中文出现，全部使用英文目录 新建一个java文件，编辑内容，固定写法，不可缺少 public class Welcome{public static void main(String[] args){System.out.println("第一个java的程序");}} 然后打开DOS窗口，通过命令找到存储文件的目录，输入dir，查看文件夹里的所有文件
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2