分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

ExtJs二级联动

发布时间:2023-09-06 01:20责任编辑:顾先生关键词:暂无标签

2.二级联动

通过前一个选的数据,约束后面所选的数据

1.通过向后台取数据的方式

1)定义一级,和二级的数据源

//品牌store  一开始就获得数据
var brankStore = Ext.create(‘Ext.data.Store‘,{
???fields:[‘brank_id‘,‘brank_name‘]
???proxy:{
    type:‘ajax‘,
    url : ‘${request.contextPath}/eap/scripts/run-script/pbc-brank-gson.gson‘,

//解析方式
    reader:{
        type:‘json‘,
        rootProperty:‘brank‘
    }
???},
???autoload: true
    }
)

//一开始不需要获得数据

var libraryStore = Ext.create(‘Ext.data.Store‘,{
    fields:[‘lib_id‘,‘lib_name‘,‘lib_address‘,‘lib_phone‘,‘lib_size‘,‘lib_created‘,‘lib_brank‘]
???},

proxy:{
  type :‘ajax‘,
  url : ‘${request.contextPath}/eap/scripts/run-script/pbc-library-gson.gson‘,
  reader:{
???    type:‘json‘,
???    rootProperty:‘library‘
  },

  //参数
  extraParams:{
???    brank: "all"
  }
???},

????  autoload: true,
  }
)

2)form表单中的combo

{
xtype: ‘combo‘,
fieldLabel: ‘品牌‘,
name: ‘brank‘,
id: ‘brank‘,
emptyText: "请选择品牌",
mode: ‘local‘,
autoLoad: true,
editable: false,
blankText:"不能为空",
triggerAction: ‘all‘,
valueField: ‘brank_id‘,// 实际值
displayField: ‘brank_brank‘,// 显示值
store: brankStore,// 数据源
listeners: {// select监听函数

//combo所选择的

???  select : function(combo, record, index){

    //刷新library 
    Ext.getCmp(‘library‘).reset();

    //修改所要的参数 重新读取
    libraryStore.proxy.extraParams = {};
    libraryStore.proxy.extraParams[‘brank‘] = combo.value;
    libraryStore.load({
         url: ‘${request.contextPath}/eap/scripts/run-script/pbc-library-gson.gson‘
    });
???  }
  }
???}

{
xtype: ‘combo‘,
name: ‘book_library‘,
fieldLabel: ‘图书馆‘,
triggerAction: ‘all‘,
store: libraryStore,// 数据源
displayField:‘lib_name‘,// 显示值
valueField:‘lib_id‘,// 实际值
id: ‘library‘,
query: ‘local‘, ????//本地模式 ?远程模式 : remote
forceSelection: true, ?//要求输入值必须在 列表中存在
typeAhead: true,
allowBlank: false
???}

ExtJs二级联动

原文地址:http://www.cnblogs.com/nost/p/7735730.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved