1. 程式人生 > >ExtJs二級聯動

ExtJs二級聯動

tex request ajax 不能 要求 contex 數據源 property pat

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二級聯動