1. #1
    Sencha User trasherdk's Avatar
    Join Date
    Dec 2008
    Location
    Thailand
    Posts
    42
    Vote Rating
    1
    trasherdk is on a distinguished road

      0  

    Question EditorGridPanel: What did i miss?

    EditorGridPanel: What did i miss?


    Hi all

    I'm still struggling with this tab panel, containing 2 read-only forms
    and a edit grid. (screenshot attached).

    I've been starring at this code for a couple of days, and can't figure
    out what it is i'm missing.

    So the question, what did i miss? Clues, anybody

    I don't get any errors in firebug, the load() fires, and return valid data.

    Code:
    {success: true, total: 2, results: [
    	{ "id":"1"
    	  , "ws":"1"
    	  , "prod":"3"
    	  , "ptext":"15\" Alu. f\u00e6lge"
    	  , "unit":"4"
    	  , "price":"1250.00"
    	  , "check":"0"
    	}
    	,
    	{"id":"2"
    	  , "ws":"1"
    	  , "prod":"2"
    	  , "ptext":"Udskiftning af f\u00e6lge"
    	  , "unit":"1"
    	  , "price":"250.00"
    	  , "check":"0"
    	}
    ]
    , errors: { reason: 'Data Retrieved OK'}
    }
    After the load() i try console.log(store.getTotalCount()); which
    return 0 (zero) ???

    This is the tab panel:

    Code:
    Ext.ux.WorkSheetTab = Ext.extend( Ext.Panel, {
    	
    	constructor: function(config){
    
    		Ext.ux.WorkSheetTab.superclass.constructor.call(this, Ext.apply({
    			closable:true
    			,border: false
    			,frame: false
    			,layout:'absolute'
    			,items: [
    				new Ext.ux.wsCustForm(
    				{
    					id: config.id + '-custform'
    					,rowid: config.rowid
    					,x:10
    					,y:10
    					,defaults: {width: '95%', readOnly: true}
    				})
    				
    				,new Ext.ux.wsCarForm(
    				{
    					id: config.id + '-carform'
    					,rowid: config.rowid
    					,x:320
    					,y:10
    					,defaults:{width: '95%', readOnly: true}
    				})
    				
    				,new Ext.ux.wsItemGrid(
    				{
    					id: config.id + '-detail'
    					,rowid: config.rowid
    					,datatype: config.datatype
    					,x: 10
    					,y:170
    					,width: 610
    					,height: 250
    				})
    				/**/
    			]
    		}
    		, config));
    	}
    });
    And the grid definition:

    Code:
    Ext.namespace('Ext.ux');
    
    Ext.ux.wsItemStore = Ext.extend( Ext.data.JsonStore, {
    	
    	constructor: function(config){
    		
    		Ext.ux.wsItemStore.superclass.constructor.call(this, Ext.apply({
    			url: 'php/worksheet.php'
    			,autoLoad: false
    			,baseParams: {
    				rowid: config.rowid
    				,datatype: 'worksheet'
    				,task: 'detail-list'
    			}
    			,root: 'results'
    			,totalProperty: 'total'
    			,successProperty: 'success'
    			,idProperty: 'id'
    			,fields: [
    				{name: 'id',		type:'int',			mapping: 'id'}
    				,{name: 'ws',		type:'int',			mapping: 'ws'}
    				,{name: 'prod',		type:'int',			mapping: 'product'}
    				,{name: 'ptext',	type:'string',		mapping: 'detail'}
    				,{name: 'unit',		type:'int',			mapping: 'unit'}
    				,{name: 'price',	type:'float',		mapping: 'price'}
    				,{name: 'check',	type:'checkbox',	mapping: 'check'}
    			]
    			,callback: function(){
    				Ext.Msg.show({
    					title: 'Store Load Callback',
    					msg: 'store was loaded, data available for processing',
    					modal: false,
    					icon: Ext.Msg.INFO,
    					buttons: Ext.Msg.OK
    				});
    			}
    		}, config ));
    	}
    });
    
    Ext.ux.wsCheckBoxModel = Ext.extend(Ext.grid.CheckboxSelectionModel, {
    	
    	constructor: function(config){
    		
    		Ext.ux.wsCheckBoxModel.superclass.constructor.call(this, Ext.apply({
    			header: 'Check',
    			width: 55,
    			dataIndex: 'check'
    		}, config ));
    	}
    });
    
    Ext.ux.wsItemGridModel = Ext.extend(Ext.grid.ColumnModel, {
    	
    	constructor: function(config){
    		
    		Ext.ux.wsItemGridModel.superclass.constructor.call(this, Ext.apply({
    			columns: [
    				new Ext.grid.RowNumberer(),
    				{header: 'id', width: 20, hidden: true, dataIndex: 'id'},
    				{header: 'ws', width: 20, hidden: true, dataIndex: 'ws'},
    				{header: 'Product', width: 80, dataIndex: 'product'},
    				{header: 'Detail', width: 250, dataIndex: 'detail'},
    				{header: 'Units', width: 50, dataIndex: 'unit'},
    				{header: 'Price', width: 70, dataIndex: 'price'},
    				{header: 'Total', width: 70},
    				new Ext.ux.wsCheckBoxModel()
    			]
    			,defaults: {
    				sortable: false
    				,menuDisabled: true
    			}
    		}, config ));
    	}
    });
    
    Ext.ux.wsItemGrid = Ext.extend(Ext.grid.EditorGridPanel, {
    	
    	constructor: function(config){
    		
    		Ext.ux.wsItemGrid.superclass.constructor.call(this, Ext.apply({
    			id: 'worksheet-detail'
    			,title: 'Detail'
    			,width: 610
    			,height: 350
    			,frame: true
    			,border: true
    			,iconCls: 'icon-grid'
    			,emptyText:'No rows to display'
    			,clicksToEdit: 1
    			,colModel: new Ext.ux.wsItemGridModel({
    				id: config.id + '-model'
    				,rowid: config.rowid
    				,datatype: config.datatype
    			})
    			,store: new Ext.ux.wsItemStore({
    				id: config.id + '-store'
    				,rowid: config.rowid
    				,datatype: config.datatype
    			})
    		}, config ));
    	}
    });
    Attached Images

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Looks like you're never loading your Store

  3. #3
    Sencha User trasherdk's Avatar
    Join Date
    Dec 2008
    Location
    Thailand
    Posts
    42
    Vote Rating
    1
    trasherdk is on a distinguished road

      0  

    Default


    Animal, thanks.

    I did not include that part. It's loaded from dblclick on a treenode, like this:

    Code:
    	Ext.getCmp(tabid + '-detail').getStore().load({
    		url:'php/worksheet.php'
    		,params: {
    			rowid: rowid
    			,task: 'detail-list'
    			,datatype: 'worksheet'
    		}
    	});
    I have also tried the "autoLoad: true" on the store, which also
    fires the load, but still nothing in the grid.

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    98
    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 Condor has much to be proud of

      0  

    Default


    type:'checkbox'? Don't you mean 'boolean'?

  5. #5
    Sencha User trasherdk's Avatar
    Join Date
    Dec 2008
    Location
    Thailand
    Posts
    42
    Vote Rating
    1
    trasherdk is on a distinguished road

      0  

    Thumbs up


    Thanks Condor, you are right. That did help some.

    This rises an error on the "Total" column, that was ment to be
    the result of ( unit x price ) commenting out "Total" reveal the rows.


    Code:
    			columns: [
    			new Ext.grid.RowNumberer(),
    			{header: 'id', width: 20, hidden: true, dataIndex: 'id'},
    			{header: 'ws', width: 20, hidden: true, dataIndex: 'ws'},
    			{header: 'Product', width: 80, dataIndex: 'product'},
    			{header: 'Detail', width: 250, dataIndex: 'detail'},
    			{header: 'Units', width: 50, dataIndex: 'unit'},
    			{header: 'Price', width: 70, dataIndex: 'price'},
    	//		{header: 'Total', width: 70},
    			new Ext.ux.wsCheckBoxModel()
    		]
    But as the screenshot show, the product and detail columns are empty,
    and the checkbox just look weird.
    Attached Images

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    98
    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 Condor has much to be proud of

      0  

    Default


    That is because you named the fields 'prod' and 'ptext', but you are referring to them as dataIndex 'product' and 'detail'.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Obviously Total needs to be got from somewhere.

    "an error" is not helpful.

    They mean something. And if you are developing properly with Firebug, you can see exactly what.

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    98
    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 Condor has much to be proud of

      0  

    Default


    For the 'total' field you could use my calculated fields extension.

  9. #9
    Sencha User trasherdk's Avatar
    Join Date
    Dec 2008
    Location
    Thailand
    Posts
    42
    Vote Rating
    1
    trasherdk is on a distinguished road

      0  

    Default


    Condor. Right, again

    Ok, so i got the store thing wrong. I have been searching for info
    on this. I thought left side was from the response, and right
    side was the grid. Swapping those 2 around brought the result.

    Code:
    	,fields: [
    		{name: 'id',		type:'int',		mapping: 'id'}
    		,{name: 'ws',		type:'int',		mapping: 'ws'}
    		,{name: 'product',	type:'int',		mapping: 'prod'}
    		,{name: 'detail',	type:'string',		mapping: 'ptext'}
    		,{name: 'unit',		type:'int',		mapping: 'unit'}
    		,{name: 'price',	type:'float',		mapping: 'price'}
    		,{name: 'check',	type:'boolean',		mapping: 'check'}
    	]
    What about that checkbox, any idea why it look like that?

  10. #10
    Sencha User trasherdk's Avatar
    Join Date
    Dec 2008
    Location
    Thailand
    Posts
    42
    Vote Rating
    1
    trasherdk is on a distinguished road

      0  

    Default


    Animal. "an error" is not really a clue

    The error on "Total" come, i think, from no matching column in the store,
    and i still have to define the calculated column.

    The firebug error was:

    this.ds.fields.get(i) is undefined
    This was not the focus currently, but it will be as soon as i get the checkbox
    to behave.