1. #11
    Ext User
    Join Date
    Mar 2008
    Posts
    5
    Vote Rating
    0
    kowsalya is on a distinguished road

      0  

    Default


    Hi Condor,

    Thanks for the reply. I am trying to flaten the data . In the mean time, i am trying with having one different store for combo box and another main store for grid. But i am not able to access the combo box data.

    Here is the grid's store and combo box store and grip implementation.

    Code:
    Ext.namespace('Ext.exampledata');
    	
    	Ext.exampledata.floorplan = [
    	        ['0', 'UR-08/31/2007 26660-1'],
    	        ['2', 'UR-08/31/2007 26660-2'],
    	        ['3', 'UR-08/31/2007 26660-3'],
    	        ['4', 'UR-08/31/2007 26660-4'],
    	        ['5', 'UR-08/31/2007 26660-5']
            ];
    
    	var fpStore = new Ext.data.SimpleStore({
    		fields: ['fpid', 'floorplan'],
    		data : Ext.exampledata.floorplan // from floorplandata.js
    		})
    		
    	var myData = {		
    		"results":[
    			{"acct":2564,"acctName":"aab},				                          {"acct":25,"acctName":"CVSa" }
    			]
    	};	 
     
    	var ds = new Ext.data.Store({
    		proxy: new Ext.data.MemoryProxy(myData),		
    		reader: new Ext.data.JsonReader({
    		            root: 'results'		            
    		        }, 
    		[			
    			{name: 'acct', type: 'int',mapping: 'acct'},
    			{name: 'acctName',mapping: 'acctName'}			               ])
    	});		
    	ds.load();	
     	var colModel = new Ext.grid.ColumnModel([ 	
    		{
    			id:'acct',
    			header: 'Acct#', 
    			width: 60,
    			sortable: true,
    			resizable: true, 			
    			dataIndex: 'acct'			
    		},
    		{
    			header: 'Acct Name', 
    			width: 160, 
    			sortable: true, 
    			resizable: true, 
    			dataIndex: 'acctName',
    			hideable: false
    		},
    		{
    			header: 'Store#',
    			width: 80,
    			sortable: true,
    			resizable: true,	
    			align : 'right',
    			editor: new Ext.form.ComboBox({
    			            store:fpStore,        
    			           displayField: 'fpid',
    			           valueField: 'fplan',  
    			mode:'local',  		
                		   typeAhead: true,
                		   displayField: 'fpAvailable',
                		   valueField:'fpid',
                		   triggerAction: 'all',
                		   applyTo: 'test_combo'
                		   lazyRender:true,
                		   listClass: 'x-combo-list-small'
                		}),            		
                		renderer:function(data){				
    			return data+"<img src='../images/combo_arrow.jpg'/>"				}
    		}
    	]);			
    	
    	
    	});
    Here is the html code:
    <div>
    <input type="text" id="test_combo">
    </div>

    Pls help me with the possible solution to handle the situation

  2. #12
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      1  

    Default


    I woudn't use applyTo (so remove the HTML) and use:

    Code:
    Ext.namespace('Ext.exampledata');
    Ext.exampledata.floorplan = [
    	['0', 'UR-08/31/2007 26660-1'],
    	['2', 'UR-08/31/2007 26660-2'],
    	['3', 'UR-08/31/2007 26660-3'],
    	['4', 'UR-08/31/2007 26660-4'],
    	['5', 'UR-08/31/2007 26660-5']
    ];
    var fpStore = new Ext.data.SimpleStore({
    	id: 0, // <- needed for the renderer
    	fields: ['fpid', 'floorplan'],
    	data: Ext.exampledata.floorplan
    });
    var myData = {
    	'results': [
    		{'acct': 2564, 'acctName': 'aab},
    		{'acct': 25, 'acctName': 'CVSa'}
    	]
    };
    var ds = new Ext.data.Store({
    	proxy: new Ext.data.MemoryProxy(myData),
    	reader: new Ext.data.JsonReader({
    		root: 'results'
    	}, [
    		{name: 'acct', type: 'int'},
    		{name: 'acctName', mapping: 'acctName'},
    		{name: 'fpid', type: 'int', defaultValue: null}, // <- you need an extra field
    	])
    });
    ds.load();
    var colModel = new Ext.grid.ColumnModel([{
    	id: 'acct',
    	header: 'Acct#',
    	width: 60,
    	sortable: true,
    	resizable: true,
    	dataIndex: 'acct'
    },{
    	header: 'Acct Name',
    	width: 160,
    	sortable: true,
    	resizable: true,
    	dataIndex: 'acctName',
    	hideable: false
    },{
    	header: 'Store#',
    	width: 80,
    	sortable: true,
    	resizable: true,
    	align: 'right',
    	dataIndex: 'fpid', // <- added
    	editor: new Ext.form.ComboBox({
    		store: fpStore,
    		displayField: 'floorplan', // <- use displayField/valueField from fpStore
    		valueField: 'fpid',
    		mode: 'local',
    		typeAhead: true,
    		triggerAction: 'all',
    		lazyRender: true,
    		listClass: 'x-combo-list-small'
    	}),
    	renderer: function(value, meta) {
    		meta.css = 'some-class'; // <- use class with background image of arrow
    		var rec = fpStore.getById(value); // <- find floorplan by id
    		return rec ? rec.get('floorplan') : '';
    	}
    }]);

  3. #13
    Ext User
    Join Date
    Mar 2008
    Posts
    5
    Vote Rating
    0
    kowsalya is on a distinguished road

      0  

    Default


    Hi Condor,
    Its working fine.... thanks a lot. I have started to analyse teh ways to process the hierarchial data in grid. You have already suggested me to flatten the data or to use TreeSelector . I want to know 2 things on that front:
    1) Can we use the Treeselector along with the grid
    2)If so how to implement the tree selector in editor grid

    And also I am not getting any clue, in the forum, for how to flatten out the data....Can you pls help me out to solve the problem in any of the 2 ways.

    My json response is
    [{"storeNum":639,"systemToken":null,"accountNum":101,"storeAddress":"",
    "accountName":"CVS #639 ","accountType":0,
    "availableFloorPlan":[
    {
    "fpVersionName":"",
    "fpPhysicalPath":"",
    "fpVersionStatus":"6",
    "fpVersionID":326109
    },

    {"fpVersionName":"",
    "fpPhysicalPath":"",
    "fpVersionStatus":"6",
    "fpVersionID":326096
    },

    {"fpVersionName":"",
    "fpPhysicalPath":"",
    "fpVersionStatus":"6",
    "fpVersionID":326095
    }
    ]
    }]

    My javascript code is

    ds = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(gridData),
    reader: new Ext.data.JsonReader(
    {
    root: 'AccountSearchDetails'
    },
    [
    {name: 'acct', type: 'int',mapping:'accountNumber'},
    {name: 'acctName',mapping: 'accountName'}
    ])
    });

    var colModel = new Ext.grid.ColumnModel([{
    id: 'acct',
    header: 'Acct#',
    width: 60,
    sortable: true,
    resizable: true,
    dataIndex: 'acct'
    },{
    header: 'Acct Name',
    width: 160,
    sortable: true,
    resizable: true,
    dataIndex: 'acctName',
    hideable: false
    },{
    header: 'Store#',
    width: 80,
    sortable: true,
    resizable: true,
    align: 'right',
    dataIndex: 'fpVersionID', // <- added
    editor: new Ext.form.ComboBox({
    displayField: 'fpVersionStatus',
    valueField: 'fpVersionID',
    typeAhead: true,
    triggerAction: 'all',
    lazyRender: true,
    listClass: 'x-combo-list-small'
    }),
    renderer: function(value, meta) {
    meta.css = 'some-class'; // <- use class with background image of arrow
    var rec = ds .getById(value);
    return rec ? rec.get('fpVersionStatus') : '';
    }
    }]);

  4. #14
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You'll have to override the readRecords method of the JsonStore.

    I'm not quite sure on how to read your JSON data:
    Do you want a store with fields storeNum, systemToken, accountNum, storeAddress, accountName, accountType, fpVersionName, fpPhysicalPath, fpVersionStatus and fpVersionID?

  5. #15
    Ext User
    Join Date
    Mar 2008
    Posts
    5
    Vote Rating
    0
    kowsalya is on a distinguished road

      0  

    Default


    yes but i need fpVersionName, fpPhysicalPath, fpVersionStatus and fpVersionID for my combo box.

    My complete json data for the grid with 3 rows :
    [{"storeNum":039,"systemToken":null,"accountNum":001,"storeAddress":"",
    "accountName":"kkk #639 ","accountType":0,
    "availableFloorPlan":[{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"7","fpVers
    ionID":326085},{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6","fp
    VersionID":326084},{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6"
    ,"fpVersionID":326083}]},
    {"storeNum":040,"systemToken":null,"accountNum":021,"storeAddress":"",
    "accountName":"bbb #639 ","accountType":0,
    "availableFloorPlan":[{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"7","fpVers
    ionID":326085},{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6","fp
    VersionID":326084},{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6"
    ,"fpVersionID":326083}]},
    {"storeNum":041,"systemToken":null,"accountNum":022,"storeAddress":"",
    "accountName":"bbb #639 ","accountType":0,
    "availableFloorPlan":[{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"7","fpVers
    ionID":326085},{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6","fp
    VersionID":326084},{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6"
    ,"fpVersionID":326083}]}
    ]

  6. #16
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    So you want your record to hold storeNum, systemToken, accountNum, storeAddress, accountName and accountType (and availableFloorPlan for use in combobox).

    And for which field do you need the availableFloorPlan? Shouldn't there be a selectedFloorplan field?

    ps. This isn't hierarchical data after all. Your JSON just has an field that holds an object instead of a simple type.

  7. #17
    Ext User
    Join Date
    Mar 2008
    Posts
    5
    Vote Rating
    0
    kowsalya is on a distinguished road

      0  

    Default


    oh really i am relieved on hearing that its not a hierrachial data. How do i get the individual fields from the object. Actually at the start, even before trying anything to flatten out the data, i tried to retrieve the fpversionid from the availableFloorPlan object by the following code:

    ds = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(gridData),
    reader: new Ext.data.JsonReader(
    {
    root: 'AccountSearchDetails'
    },
    [
    {name: 'acct', type: 'int',mapping:'accountNumber'},
    {name: 'acctName',mapping: 'accountName'},
    {name: 'fpAvailable', mapping: 'fpAvailable'}
    ])
    });

    var colModel = new Ext.grid.ColumnModel([{
    id: 'acct',
    header: 'Acct#',
    width: 60,
    sortable: true,
    resizable: true,
    dataIndex: 'acct'
    },{
    header: 'Acct Name',
    width: 160,
    sortable: true,
    resizable: true,
    dataIndex: 'acctName',
    hideable: false
    },{
    header: 'Floor Plans Available',
    width: 180,
    sortable: false,
    resizable: true,
    align: 'right',
    dataIndex: 'fpAvailable',
    editor: new Ext.form.ComboBox({
    displayField: 'fpVersionStatus',
    valueField: 'fpVersionID',
    typeAhead: true,
    triggerAction: 'all',
    lazyRender: true,
    listClass: 'x-combo-list-small'
    }),
    renderer: function(value, meta) {
    meta.css = 'some-class'; // <- use class with background image of arrow
    var rec = ds .getById(value);
    return rec ? rec.get('fpVersionStatus') : '';
    }
    }]);


    My complete json data for the grid with 3 rows :
    [{"storeNum":039,"systemToken":null,"accountNum":001,"storeAddress":"",
    "accountName":"kkk #639 ","accountType":0,
    "availableFloorPlan":[{"fpVersionName":"","fpPhysicalPath":"","fpVersion Status":"7","fpVers
    ionID":326085},{"fpVersionName":"","fpPhysicalPath ":"","fpVersionStatus":"6","fp
    VersionID":326084},{"fpVersionName":"","fpPhysical Path":"","fpVersionStatus":"6"
    ,"fpVersionID":326083}]},
    {"storeNum":040,"systemToken":null,"accountNum":02 1,"storeAddress":"",
    "accountName":"bbb #639 ","accountType":0,
    "availableFloorPlan":[{"fpVersionName":"","fpPhysicalPath":"","fpVersion Status":"7","fpVers
    ionID":326085},{"fpVersionName":"","fpPhysicalPath ":"","fpVersionStatus":"6","fp
    VersionID":326084},{"fpVersionName":"","fpPhysical Path":"","fpVersionStatus":"6"
    ,"fpVersionID":326083}]},
    {"storeNum":041,"systemToken":null,"accountNum":02 2,"storeAddress":"",
    "accountName":"bbb #639 ","accountType":0,
    "availableFloorPlan":[{"fpVersionName":"","fpPhysicalPath":"","fpVersion Status":"7","fpVers
    ionID":326085},{"fpVersionName":"","fpPhysicalPath ":"","fpVersionStatus":"6","fp
    VersionID":326084},{"fpVersionName":"","fpPhysical Path":"","fpVersionStatus":"6"
    ,"fpVersionID":326083}]}
    ]

  8. #18
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    I think you want something like this:

    Code:
    var gridData = {"AccountSearchDetails": [
    	{"storeNum":039,"systemToken":null,"accountNum":001,"storeAddress":"","accountName":"kkk #639","accountType":0,"availableFloorPlan":[
    		{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"7","fpVersionID":326085},
    		{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6","fpVersionID":326084},
    		{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6","fpVersionID":326083}]},
    	{"storeNum":040,"systemToken":null,"accountNum":021,"storeAddress":"","accountName":"bbb #639","accountType":0,"availableFloorPlan":[
    		{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"7","fpVersionID":326085},
    		{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6","fpVersionID":326084},
    		{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6","fpVersionID":326083}]},
    	{"storeNum":041,"systemToken":null,"accountNum":022,"storeAddress":"","accountName":"bbb #639","accountType":0,"availableFloorPlan":[
    		{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"7","fpVersionID":326085},
    		{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6","fpVersionID":326084},
    		{"fpVersionName":"","fpPhysicalPath":"","fpVersionStatus":"6","fpVersionID":326083}]}
    ]};
    
    var ds = new Ext.data.JsonStore({
    	data: gridData,
    	root: 'AccountSearchDetails',
    	fields: [
    		{name: 'acct', type: 'int', mapping: 'accountNum'},
    		{name: 'acctName', mapping: 'accountName'},
    		{name: 'fpVersionID', defaultValue: null}, // <- need field to hold current floorplan
    		{name: 'fpAvailable', mapping: 'availableFloorPlan'}
    	]
    });
    
    var comboStore = new Ext.data.JsonStore({
    	id: 'fpVersionID',
    	data: [],
    	fields: ['fpVersionStatus', 'fpVersionID']
    });
    
    var colModel = new Ext.grid.ColumnModel([{
    	id: 'acct',
    	header: 'Acct#',
    	width: 60,
    	sortable: true,
    	resizable: true,
    	dataIndex: 'acct'
    },{
    	header: 'Acct Name',
    	width: 160,
    	sortable: true,
    	resizable: true,
    	dataIndex: 'acctName',
    	hideable: false
    },{
    	header: 'Floor Plans Available',
    	width: 180,
    	sortable: false,
    	resizable: true,
    	align: 'right',
    	dataIndex: 'fpVersionID',
    	editor: new Ext.grid.GridEditor(new Ext.form.ComboBox({
    		store: comboStore,
    		mode: 'local',
    		displayField: 'fpVersionStatus',
    		valueField: 'fpVersionID',
    		typeAhead: true,
    		triggerAction: 'all',
    		lazyRender: true,
    		listClass: 'x-combo-list-small'
    	}), {
    		listeners: {
    			beforestartedit: function(editor) {
    				editor.field.store.loadData(editor.record.get('fpAvailable'));
    			}
    		}
    	}),
    	renderer: function(value) {
    		var record = comboStore.getById(value);
    		return record ? record.get('fpVersionStatus') : '';
    	}
    }]);