Results 1 to 6 of 6

Thread: Binding viewModel with comboboxes

  1. #1
    Sencha User
    Join Date
    Jun 2014
    Posts
    15
    Answers
    2

    Default Binding viewModel with comboboxes

    Hi,
    I have 4 comboboxes, each of them have its own store in ViewModel. Everything works fine. I want to bind filters in each of this store.
    When i select record in 1st combobox - all of comboboxes except this one should have new filter with value i selected.
    When i select record in 2nd combobox, two others should have updated filters vith value from this 2nd combobox.
    When i select record in 3rd combobox, 4th one should update its filters with value from 3rd combobox.

    How to do this with binding?

    ViewModel:
    Code:
    Ext.define('Bug.view.parcellist.ViewModel',{	extend: 'Ext.app.ViewModel',
    	alias: 'viewmodel.parcellist',
    	requires: ['Bug.view.parcellist.ModelCommunity',
    	           'Bug.view.parcellist.ModelCounty',
    	           'Bug.view.parcellist.ModelDistrict',
    	           'Bug.view.parcellist.ModelMunicipality'],
    	stores:{
    		communities:{
    			model: 'Bug.view.parcellist.ModelCommunity',
    			autoload: true,
    		},
    		counties:{
    			model: 'Bug.view.parcellist.ModelCounty',
    			autoload: true
    		},
    		districts:{
    			model: 'Bug.view.parcellist.ModelDistrict',
    			autoload: true,
    			filters:{
    				property: 'county_cd',
    				bind:{
    					value: '{currentCounty}'
    				}
    			}
    		},
    		municipalities:{
    			model: 'Bug.view.parcellist.ModelMunicipality',
    			autoload: true
    		}
    	},
    	
    	data:{
    		currentCounty: null,
    		currentDistrict: null,
    		currentCommunity: null,
    		currentMunicipality: null
    	}
    	
    });
    And my view:
    Code:
    Ext.define('Bug.view.parcellist.View', {	extend : 'Ext.panel.Panel',
    	xtype : 'parcellist',
    	requires : [ 'Ext.form.field.ComboBox', 'Ext.grid.Panel','Ext.data.proxy.Rest',
    			'Bug.view.parcellist.ViewController', 
    			'Bug.view.parcellist.StoreGrid',
    			'Bug.view.parcellist.ViewModel' ],			
    	controller : 'parcellist',
    	
    	viewModel : {
    		type : 'parcellist'
    	},
    	
    	layout : {
    		type : 'border',
    		align: 'stretch'
    	},
    	
    	config:{
    		currentCounty: null
    	},
    	
    	items:[{
    		region: 'north',
    		xtype: 'toolbar',
    		height: 70,
    		items: [{
    			xtype: 'combo',
    			fieldLabel: 'Wojewdztwo',
    			labelAlign: 'top',
    			editable: false,
    			bind:{
    				store:'{counties}',
    			},
    			displayField: 'county_name',
    			valueField: 'county_cd',
    //			listeners: {
    //				select: 'onCountySelect'
    //			},
    			reference: 'currentCounty',
    			publishes:[]
    		}, 
    		{
    			xtype : 'combo',
    			fieldLabel : 'Powiat',
    			labelAlign : 'top',
    			bind:{
    				store:'{districts}'
    			},
    			displayField : 'district_name',
    			valueField : 'district_cd',
    //			listeners : {
    //				'select' : 'onDistrictSelect'
    //			}, 
    			reference: 'currentDistrict'
    		}, {
    			xtype : 'combo',
    			fieldLabel : 'Gmina',
    			labelAlign : 'top',
    			bind:{
    				store:'{municipalities}'
    			},
    			displayField : 'municipality_name',
    			valueField : 'municipality_cd',
    //			listeners : {
    //				'select' : 'onMunicipalitySelect'
    //			}, 
    			reference: 'currentMunicipality'
    		}, {
    			xtype : 'combo',
    			fieldLabel : 'Obr?b',
    			labelAlign : 'top',
    			bind:{
    				store:'{communities}'
    			},
    			displayField : 'community_name',
    			valueField : 'community_cd',
    //			listeners : {
    //				'select' : 'onCommunitySelect'
    //			}, 
    			reference: 'currentCommunity'
    		} ]
    	},
    	{
    		region: 'center',
    		xtype : 'grid',
    		autoScroll: true,
    		forceFit: true,
    		reference: 'gridParcels',
    		store : Ext.create('Bug.view.parcellist.StoreGrid'),
    		columns : [ {
    			text : 'Woj.',
    			dataIndex : 'county_cd'
    		}, {
    			text : 'Powiat',
    			dataIndex : 'district_cd'
    		} , {
    			text : 'Gmina',
    			dataIndex : 'municipality_cd'
    		}, {
    			text : 'Obr?b',
    			dataIndex : 'community_cd'
    		}, {
    			text : 'Nazwa obr?bu',
    			dataIndex : 'community_name'
    		}, {
    			text : 'Dzia?ka',
    			dataIndex : 'parcel_nr'
    		}, {
    			text : 'Powierzchnia',
    			dataIndex : 'parcel_area'
    		}],
    		listeners:{
    			'rowdblclick' : 'onRowDoubleClick'
    		}
    	} ]
    });

  2. #2
    Sencha Premium User
    Join Date
    Jun 2009
    Posts
    319
    Answers
    3

    Default

    +1, how to do that?

  3. #3
    Sencha User
    Join Date
    Jun 2014
    Posts
    15
    Answers
    2

    Default

    Hi, i think i found answer. I will post solution when i test it.

  4. #4
    Sencha User
    Join Date
    Apr 2011
    Posts
    42
    Answers
    2

    Default

    Did you find a solution?

  5. #5
    Sencha User
    Join Date
    Apr 2013
    Posts
    36

    Default

    Did you find the answer for this??

  6. #6
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    261
    Answers
    1

    Default

    Oh great.. no solution...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •