View Full Version : Problem Loading JSON Store
GTCulbreth
19 Feb 2008, 3:12 PM
Hi All,
I am trying to load a data store from json data and get an error "this.proxy has no properties"
I am getting the data from the server it just won't load the store.
This is my Ajax code and the data is retrieved from the server.
//=====================================================
Ext.Ajax.request(
{
url: '/TOA/GetDisasterDataListAction.do',
success: function(result, request) {
da = result.responseText;
alert("Success: "+da);
alert("da: "+da);
var json = Ext.decode(da);
toadata.loadDisasterData(json);
disasterGrid.syncSize();
},
failure: function(result, request) {
alert("Failure: "+result.responseText)
},
headers:
{
'my-header': 'Data Transfer'
}
//params: { ?: '?' }
});
//=====================================================
The data looks like this:
{"d":[
{"inc_epd":"10/01/2007","dstr_id":2,"prj_o":"","inc_spd":"09/14/2007","tsk_m":"BUTCH, DAVID ","dstr_dcs":"","isc":"HIGGS, BILLY ","dec_dt":"09/16/2007","prj_h":"TOYER, BILL ","dstr_n":"DISASTER","spc_con":"","aff_reg":"7","cotr":"","cont_o":"","st":"KANSAS","dstr_fy":2007},
{"inc_epd":"10/25/2007","dstr_id":3,"prj_o":"","inc_spd":"10/09/2007","tsk_m":"TOYER, BILL ","dstr_dcs":"","isc":"COPE, BARBARA ","dec_dt":"10/11/2007","prj_h":"HICKMAN, DAVID ","dstr_n":"DISASTER","spc_con":"","aff_reg":"7","cotr":"","cont_o":"","st":"MISSOURI","dstr_fy":2007},
{"inc_epd":"09/30/2007","dstr_id":4,"prj_o":"","inc_spd":"09/10/2007","tsk_m":"TOYER, BILL ","dstr_dcs":"","isc":"LONG, JACOB ","dec_dt":"09/18/2007","prj_h":"TOYER, BILL ","dstr_n":"DISASTER","spc_con":"","aff_reg":"7","cotr":"","cont_o":"","st":"NEBRASKA","dstr_fy":2007},
{"inc_epd":"09/30/2007","dstr_id":5,"prj_o":"","inc_spd":"09/10/2007","tsk_m":"TOYER, BILL ","dstr_dcs":"","isc":"LONG, JACOB ","dec_dt":"09/18/2007","prj_h":"TOYER, BILL ","dstr_n":"DISASTER","spc_con":"","aff_reg":"","cotr":"","cont_o":"","st":"","dstr_fy":2007}
],
"totalCount":4}
And here is my data store set-up:
var jDisasterReader = new Ext.data.JsonReader(
{
totalProperty: 'totalCount',
root:'d',
id: 'dr.disaster_id'
},
disasterListRec
);
var disasterListRec = new Ext.data.Record.create([
{name: 'dr.disaster_id', mapping: 'dstr_id', type: 'int'}
,{name: 'dr.disaster_number', mapping: 'dstr_n', type: 'string'}
,{name: 'dr.project_head', mapping: 'prj_h', type: 'string'}
,{name: 'dr.project_officer', mapping: 'prj_o', type: 'string'}
,{name: 'dr.cotr', mapping: 'cotr', type: 'string'}
,{name: 'dr.contracting_officer', mapping: 'cont_o', type: 'string'}
,{name: 'dr.task_monitor', mapping: 'tsk_m', type: 'string'}
,{name: 'dr.inspection_services_coordinator', mapping: 'isc', type: 'string'}
,{name: 'dr.incident_period_start', mapping: 'inc_spd', type: 'string'}
,{name: 'dr.incident_period_end', mapping: 'inc_epd', type: 'string'}
,{name: 'dr.declaration_date', mapping: 'dec_dt', type: 'date', dateFormat: 'm/d/Y'}
,{name: 'dr.state', mapping: 'st', type: 'string'}
,{name: 'dr.disaster_fiscal_year', mapping: 'dstr_fy', type: 'int'}
,{name: 'dr.disaster_description', mapping: 'dstr_dsc', type: 'string'}
,{name: 'dr.affected_region', mapping: 'aff_reg', type: 'string'}
,{name: 'dr.special_conditions', mapping: 'spc_con', type: 'string'}
]);
var disasterReader = new Ext.data.ArrayReader({}, disasterListRec);
var disasterColumnModel = new Ext.grid.ColumnModel(
[
new Ext.grid.RowNumberer(),
{id:'dr.disaster_key', header: "Disaster Key", width: 20, sortable: true, dataIndex: 'dr.disaster_key' ,hidden: true}
,{header: 'Disaster Number' ,width: 40, sortable: true, dataIndex: 'dr.disaster_number' }
,{header: 'Project Head' ,width: 20, sortable: true, dataIndex: 'dr.project_head' }
,{header: 'Project Officer' ,width: 20, sortable: true, dataIndex: 'dr.project_officer' }
,{header: 'COTR' ,width: 20, sortable: true, dataIndex: 'dr.cotr' }
,{header: 'Contracting Officer' ,width: 20, sortable: true, dataIndex: 'dr.ontracting_officer' }
,{header: 'Task Monitor' ,width: 20, sortable: true, dataIndex: 'dr.task_monitor' }
,{header: 'Insp. Srvc. Coord.' ,width: 20, sortable: true, dataIndex: 'dr.inspection_services_coordinator'}
,{header: 'Incident Period Start',width: 20, sortable: true, dataIndex: 'dr.incident_period_start' }
,{header: 'Incident Period End' ,width: 20, sortable: true, dataIndex: 'dr.incident_period_end' }
,{header: 'Declr. Date' ,width: 15, sortable: true, dataIndex: 'dr.declaration_date' ,renderer: Ext.util.Format.dateRenderer('m/d/Y')}
,{header: 'State' ,width: 20, sortable: true, dataIndex: 'dr.state' }
,{header: 'Dstr FY' ,width: 10, sortable: true, dataIndex: 'dr.disaster_fiscal_year' }
,{header: 'Disaster Description' ,width: 50, sortable: false, dataIndex:'dr.disaster_description' ,hidden: true}
,{header: 'Affected Regions' ,width: 50, sortable: true, dataIndex: 'dr.affected_region' ,hidden: true}
,{header: 'Special Conditions' ,width: 50, sortable: true, dataIndex: 'dr.special_conditions' ,hidden: true}
]);
var disasterStore = new Ext.data.Store(
{
reader: jDisasterReader,
//reader: disasterReader,
listeners: {
loadexception: function(proxy, store, response, e) {
alert(e.message);
}
}
});
/*---- DISASTER DATA METHODS----------------------------------------------*/
this.loadDisasterData = function (data) {
alert("loadDiasaterData: "+ data);
disasterStore.load(data);
alert("loadDiasaterData: "+ disasterStore.getById("disasterNumber"));
}
Can anyone please help.
TC
cerad
19 Feb 2008, 4:28 PM
Why are you using a Request object? I'd suggest just using a JsonStore object. Documentation has a good example.
It looks like you are trying to pass the json data to the store.load method. Thats not going to do what you want.
GTCulbreth
19 Feb 2008, 5:52 PM
Hi cerad,
You are correct I was originally using loadData to load the data. I used the store to load a grid and it was working with hard coded data but when I changed to use the server data thing did not go so well. I am fairly handicapped because I am new to Ext, JSON, and Ajax. I used an example that was posted elsewhere on this site. Could you provide a few examples or point me to some. I did checkout your site and hope it will help.
Thanks
cerad
20 Feb 2008, 7:15 AM
http://extjs.com/deploy/dev/docs/?class=Ext.data.JsonStore
GTCulbreth
21 Feb 2008, 7:00 AM
I have tried using the JSON example and I still get no data being loaded. Here is my code now and it is using the JsonStore to get the data.
I thank you for taking the time to look at this as my deadline is growing near. Thanks.
The Grid at the bottom of the code uses the jsonStore
//Ext.onReady(function(){
var Toa = {
Application: function () {},
Data: function () {},
data: function () {},
Disaster: function () {}
};
Toa.Application = new function()
{
var logger = Core.Logger.getLogger('TOA');
logger.debug('[toajs]: in the onReady');
//============================================================================
// When looking at the code start with the grid at the bottom
//
//
//============================================================================
//-------TAB START -------------------------------------------------------------
//==========================================================================
// Disaster Tab Panel
//==========================================================================
this.init = function () {
var mainTabs = new Ext.TabPanel(
{
id: 'toa-tabs',
region: 'center',
deferredRender:false,
activeTab:0,
items:[{
id: 'disaster-tab',
item: Toa.Disaster.grid(),
title: 'Disaster List',
closable:false,
autoScroll:true,
listeners: {
'activate': fireActivate
},
isLoaded: false
},{
id: '40-1-tab',
html: 'fortyDashOneGrid',
title: ' 40-1 ',
autoScroll:true,
listeners: {
'activate': fireActivate
},
isLoaded: false
},{
id: 'task-order-tab',
html:'<b>center2</b>',
title: 'Task Orders',
autoScroll:true,
listeners: {
'activate': fireActivate
},
isLoaded: false
},{
id: 'invioces-tab',
html:'<b>center3</b>',
title: 'Invoices',
autoScroll:true
},{
id: 'funding-summary-tab',
html:'<b>center4</b>',
title: 'Funding Summary',
autoScroll:true
}],
tbar: Toa.Data.tabActions(),
viewConfig: {
//forceFit:true // forces the columns to fit the window
autoFill:true
},
//autoWidth: true,
renderTo: 'main-display',
height:500
});
function fireActivate (p)
{
//disasterGrid.syncSize();
if (p.id == '40-1-tab') {
//fortyDashOneGrid.syncSize();
}
if (!p.isLoaded)
{
//alert ('loading panel: ' + p.id);
p.isLoaded = true;
if (p.id == '40-1-tab') {
mainTabs.getItem('disaster-tab').isLoaded = false;
}
}
};
};
//-------TAB END ---------------------------------------------------------------
};
Toa.Data = new function() {
this.tabActions = function() {
// Define Actions
var newAction = new Ext.Action ({
id:'new-rec',
text: '<b>New</b>',
handler: function () {alert("NEW");},
scope: this
});
var editAction = new Ext.Action ({
id:'edit-rec',
text: '<b>Edit</b>',
handler: function () {alert("EDIT");},
scope: this
});
var refreshAction = new Ext.Action({
id:'refresh-rec',
text: '<b>Refresh</b>',
handler: function () {alert("REFRESH");},
scope: this
});
var tabButtons = [];
tabButtons.push (new Ext.Button (newAction));
tabButtons.push (new Ext.Button (editAction));
tabButtons.push (new Ext.Button (refreshAction));
return tabButtons;
};
};
Toa.Disaster = new function() {
this.init = function () {
alert("in Toa.Disaster");
return 'DDIISSAASSTTEERR';
};
var disasterListRec = new Ext.data.Record.create([
{name: 'dr.disaster_id', mapping: 'dstr_id', type: 'int'}
,{name: 'dr.disaster_number', mapping: 'dstr_n', type: 'string'}
,{name: 'dr.project_head', mapping: 'prj_h', type: 'string'}
,{name: 'dr.project_officer', mapping: 'prj_o', type: 'string'}
,{name: 'dr.cotr', mapping: 'cotr', type: 'string'}
,{name: 'dr.contracting_officer', mapping: 'cont_o', type: 'string'}
,{name: 'dr.task_monitor', mapping: 'tsk_m', type: 'string'}
,{name: 'dr.inspection_services_coordinator', mapping: 'isc', type: 'string'}
,{name: 'dr.incident_period_start', mapping: 'inc_spd', type: 'string'}
,{name: 'dr.incident_period_end', mapping: 'inc_epd', type: 'string'}
,{name: 'dr.declaration_date', mapping: 'dec_dt', type: 'date', dateFormat: 'm/d/Y'}
,{name: 'dr.state', mapping: 'st', type: 'string'}
,{name: 'dr.disaster_fiscal_year', mapping: 'dstr_fy', type: 'int'}
,{name: 'dr.disaster_description', mapping: 'dstr_dsc', type: 'string'}
,{name: 'dr.affected_region', mapping: 'aff_reg', type: 'string'}
,{name: 'dr.special_conditions', mapping: 'spc_con', type: 'string'}
]);
var disasterColumnModel = new Ext.grid.ColumnModel(
[
new Ext.grid.RowNumberer(),
{id:'dr.disaster_key', header: "Disaster Key", width: 20, sortable: true, dataIndex: 'dr.disaster_key' ,hidden: true}
,{header: 'Disaster Number' ,width: 40, sortable: true, dataIndex: 'dr.disaster_number' }
,{header: 'Project Head' ,width: 20, sortable: true, dataIndex: 'dr.project_head' }
,{header: 'Project Officer' ,width: 20, sortable: true, dataIndex: 'dr.project_officer' }
,{header: 'COTR' ,width: 20, sortable: true, dataIndex: 'dr.cotr' }
,{header: 'Contracting Officer' ,width: 20, sortable: true, dataIndex: 'dr.ontracting_officer' }
,{header: 'Task Monitor' ,width: 20, sortable: true, dataIndex: 'dr.task_monitor' }
,{header: 'Insp. Srvc. Coord.' ,width: 20, sortable: true, dataIndex: 'dr.inspection_services_coordinator'}
,{header: 'Incident Period Start',width: 20, sortable: true, dataIndex: 'dr.incident_period_start' }
,{header: 'Incident Period End' ,width: 20, sortable: true, dataIndex: 'dr.incident_period_end' }
,{header: 'Declr. Date' ,width: 15, sortable: true, dataIndex: 'dr.declaration_date' ,renderer: Ext.util.Format.dateRenderer('m/d/Y')}
,{header: 'State' ,width: 20, sortable: true, dataIndex: 'dr.state' }
,{header: 'Dstr FY' ,width: 10, sortable: true, dataIndex: 'dr.disaster_fiscal_year' }
,{header: 'Disaster Description' ,width: 50, sortable: false, dataIndex:'dr.disaster_description' ,hidden: true}
,{header: 'Affected Regions' ,width: 50, sortable: true, dataIndex: 'dr.affected_region' ,hidden: true}
,{header: 'Special Conditions' ,width: 50, sortable: true, dataIndex: 'dr.special_conditions' ,hidden: true}
]);
var jReader = new Ext.data.JsonReader(
{
totalProperty: 'numRows',
root:'rows'
},
disasterListRec
);
var jStore = new Ext.data.JsonStore({
url: '/TOA/GetDisasterDataListAction.do',
reader: jReader,
autoLoad: true
});
//=========================================================================
// This is the grid panel that is to be displayed on the first tab panel
// the jStore uses the store directly above.
//=========================================================================
this.grid = function() {
alert("in Toa.Disaster.grid");
this.rowSm = new Ext.grid.RowSelectionModel(
{
singleSelect:true,
listeners: {
'rowselect': function(sm, row, rec) {
alert("Row Number: "+row);
}
}
});
alert("F");
var dstrGrid = new Ext.grid.GridPanel(
{
store: jStore,
column: disasterColumnModel,
sm: this.rowSM,
viewConfig: {
//forceFit:true // forces the columns to fit the window
autoFill:true
},
autoWidth: true,
height:300,
//autoHeight:true,
//renderTo: 'main-display',
iconCls:'icon-grid',
listeners:
{
render: function(g) {
g.getSelectionModel().selectRow(0);
}
//delay: 10 // Allow rows to be rendered.
}
});
dstrGrid.on('rowclick', function(grid, rowIndex, e) {
//var record = grid.getStore().getAt(rowIndex);
//alert(rowIndex);
});
alert("dstrGrid="+ dstrGrid);
dstrGrid.syncSize;
return dstrGrid;
};
};
The data look like:
{"numRows":4,"rows":[{"inc_epd":"10/01/2007","dstr_id":2,"prj_o":"","inc_spd":"09/14/2007","tsk_m":"RITCHIE, DAVID","dstr_dcs":"","isc":"HIGGS, HAROLD","dec_dt":"09/16/2007","prj_h":"BOYER, BILL","dstr_n":"DISASTER","spc_con":"","aff_reg":"7","cotr":"","cont_o":"","st":"KANSAS","dstr_fy":2007},{"inc_epd":"10/25/2007","dstr_id":3,"prj_o":"","inc_spd":"10/09/2007","tsk_m":"BOYER, BILL","dstr_dcs":"","isc":"COPELAND, BARBARA","dec_dt":"10/11/2007","prj_h":"HOCKMAN, MICHAEL","dstr_n":"DISASTER","spc_con":"","aff_reg":"7","cotr":"","cont_o":"","st":"MISSOURI","dstr_fy":2007},{"inc_epd":"09/30/2007","dstr_id":4,"prj_o":"","inc_spd":"09/10/2007","tsk_m":"BOYER, BILL","dstr_dcs":"","isc":"VICKERS, JACOB","dec_dt":"09/18/2007","prj_h":"BOYER, BILL","dstr_n":"DISASTER","spc_con":"","aff_reg":"7","cotr":"","cont_o":"","st":"NEBRASKA","dstr_fy":2007},{"inc_epd":"09/30/2007","dstr_id":5,"prj_o":"","inc_spd":"09/10/2007","tsk_m":"BOYER, BILL","dstr_dcs":"","isc":"VICKERS, JACOB","dec_dt":"09/18/2007","prj_h":"BOYER, BILL","dstr_n":"DISASTER","spc_con":"","aff_reg":"","cotr":"","cont_o":"","st":"","dstr_fy":2007}]}
I cannot see anything wrong with the data and I am too new to Ext and Json to know if something is wrong in the code.
cerad
21 Feb 2008, 9:14 AM
Not seeing anything obviously wrong. I usually just use the fields config option and skip the json reader. I suppose it's possible that the dr. names are causing an issue.
Focus on getting the store loaded. Here is one of my examples.
var logGridStore = new Ext.data.JsonStore({
url: app.buildUrl('service/logistics/search'),
root: 'data',
fields: [
'RIN', 'Location', 'PRID', 'HSC', 'Nomenclature', 'FunctionalDesc', 'SerialNum',
'APL_AEL', 'CAGE', 'WorkCenter', 'ESD', 'QTY', 'Compartment'
]
});
Add in a store.on('load',function
Set a break point and see if the store is loaded. Cut everything else out until you can get the store loaded.
hendricd
21 Feb 2008, 9:18 AM
store.on('loadexception'... might be enlightening as well. ;)
GTCulbreth
22 Feb 2008, 6:56 AM
I have added a loadException listener and now get this message:
"A has no properties"
I think this is due to proxy being passed in the loadException function. When I remove the proxy from the arguments the error is
hendricd
22 Feb 2008, 7:10 AM
@GT -- At this stage in your development effort, you should be loading ext-all-debug.js and using a good debugging tool.
'A has no properties' tells me you are not using the debug version.
If you don't have Firebug on Firefox, get it ! If you can't for some reason, use ext-all-debug and:
Ext.dump(e)
You JSON response looks good, except you have some dates (incident dates) in there that aren't declared as dates in you record def or column Model.
cerad
22 Feb 2008, 7:14 AM
And JsonReader does not have a fields config property. You don't need an explicit JsonReader anyways. Just use a JsonStore and check the example in the documentation.
And absolutely install Firebug and Firefox.
GTCulbreth
22 Feb 2008, 8:06 AM
Thanks for the debuging tips. I have installed firebug amd ext-all-debug.js
And for the sake of just getting the data to the store I now only use the store. I will, I think, have to the the reader because that is what associates the records to the grid.
Here is the code I am using now. I get no errors and I cay see no day is loaded, but I can see the data in firebug. Thanks again
It does not seem I am getting a loadException now.
var dgStore = new Ext.data.JsonStore({
url: '/TOA/GetDisasterDataListAction.do',
totalProperty: 'numrows',
root:'rows',
fields:
[
'inc_epd', 'dstr_id', 'prj_o', 'inc_spd', 'tsk_m', 'dstr_dcs', 'isc', 'dec_dt', 'prj_h',
'dstr_n', 'spc_con', 'aff_reg', 'cotr', 'cont_o', 'st', 'dstr_fy'
],
listeners: {
loadexception: function(proxy, store, response, e) {
alert("Response Text?"+response.responseText);
alert("dgStore Message \n"+proxy+"\n"+store+"\n"+response+"\n"+e.message);
}
}
});
dgStore.load();
GTCulbreth
22 Feb 2008, 10:47 AM
Hi,
Firebug is really neat. It turns out the I am getting data. I found this out as I was stepping through the js. The data load was not finished before everything else was loaded. The stepping slowed that down.
Now it seems I need to somehow wait for the data to come back before continuing, though this does not seem right.
Thank you so much for you help, I
If you look at the docs you'll see that the load() (http://extjs.com/deploy/ext/docs/output/Ext.data.Store.html#load) method is asynchronous. You need to add a 'load' (http://extjs.com/deploy/ext/docs/output/Ext.data.Store.html#event-load) event handler to do your required processing when the data is available.
Just spotted that you're using 2.0 - the same applies to it.
GTCulbreth
22 Feb 2008, 11:28 AM
Thanks fay,
I have added a callback function but don't know exactly how to use it. My data is to be loaded to a grid so I think I would do something like grid.syncSize() or grid.hide() and grid.show()
but for now I'm getting a cm (columnCount) has no properties.
mjlecomte
22 Feb 2008, 2:54 PM
What I've found enlightening is to add listeners to the store, proxy, and ajax requests. In the various events, report some message with
console.log('some message here')
You can watch the console tab of Firebug and see when events get triggered, etc.
A grid monitors the associated store's LOAD event. The grid doesn't fill itself with data until after that event fires. You'll see the grid get rendered (presuming you call grid render before store.load() ) and then after the store loads, the data gets put into the html of the grid.
cerad
22 Feb 2008, 4:21 PM
GTCulbreth,
The grid automatically registers itself as a onLoad listener to the store. You don't need to do anything special. Whenever the store finishes loading the grid will update itself.
Something else is going on. You might want to take one of the examples and work from there just until you get a working grid.
GTCulbreth
25 Feb 2008, 6:34 AM
Hi All, I am moving on to my next problem. The grid does not seem to have a columnModel, but that will be a different post.
After I get my code cleaned up I am going to post the json code as an example for other like me who want to use Ext but are not great at javascript, Json, or Ext.
Thanks for your help and see you next time. I hope.
GTCulbreth
4 Mar 2008, 5:18 AM
Thanks all who helped.
GTCulbreth
5 Mar 2008, 4:02 AM
Here is my code. I changed the names of some fields but it should work
I choose to separate the components as it makes it easier for me
This is the grid and record definition
//This is the column model for the grid
var dColumnModel =
new Ext.grid.ColumnModel(
[
new Ext.grid.RowNumberer()
,{id:'dr_feild_id', header: "Feild id", width: 20, sortable: true, dataIndex: 'dr_feild_id' ,hidden: true}
,{header: 'Feild Name' ,width: 40, sortable: true, dataIndex: 'dr_feild_name' }
,{header: 'Feild Type' ,width: 40, sortable: true, dataIndex: 'dr_feild_type_name' ,hidden: true}
,{header: 'Project Head' ,width: 20, sortable: true, dataIndex: 'dr_project_head' }
,{header: 'Project Officer' ,width: 20, sortable: true, dataIndex: 'dr_project_officer' }
]);
// this is the record layout of the JSON data and maps to the columnModel
var listRec =
new Ext.data.Record.create([
{name: 'dr_feild_id', mapping: 'fld_id', type: 'int'}
,{name: 'dr_feild_name', mapping: 'fld_n', type: 'string'}
,{name: 'dr_feild_type_name', mapping: 'fld_t_n', type: 'string'}
,{name: 'dr_project_head', mapping: 'prj_h', type: 'string'}
,{name: 'dr_project_officer', mapping: 'prj_o', type: 'string'}
]);
Next is the reader and Store definition:
// Json reader (array) that parses the incoming data
var dReader = new Ext.data.JsonReader(
{
totalProperty: 'numrows',
root:'rows',
id: 'dr_disaster_id'
},
listRec
);
// Store to get the data from the server
var dStore = new Ext.data.Store({
url: '/TOA/GetDisasterDataListAction.do',
reader: dReader,
listeners: {
loadexception: function(proxy, store, response, e) {
alert("The data did not load. \n"+proxy+"\n"+store+"\n"+response+"\n"+e.message);
}
}
});
// Load dStore Start ------------------------------------------------------
//I used this to reload data after the initial load.
dStore.load({
waitTitle: 'Please Wait',
waitMsg: 'Loading...',
callback: function (records, options, success) {
logger.trace("STORE:LOAD:callback");
if (success) {
}
else {
logger.trace("XLoad failed");
Ext.MessageBox.show ({
msg: 'No Disaster records are available',
icon: Ext.MessageBox.WARNING,
buttons: Ext.MessageBox.OK
});
}
//Core.MessageHandler.display (reader);
}
});
// Load dStore End ---------------------------------------------------------
Here is the grid definition that uses the components
// Grid --------------------------------------------------------
Here is the rowSelectModel for the grid.
var dSelectionModel = new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners: {
'rowselect': function(sm, row, rec) {
}
}
});
// And finally the GridPanel itself.
this.dGrid = new Ext.grid.GridPanel ({
id: 'dgrid',
collapsible: false,
collapsed: false,
store: dStore,
cm: dColumnModel,
selModel: dSelectionModel,
viewConfig: {
forceFit: true,
autoFit:true
},
monitorResize: true,
doLayout: function() { //IF YOU WANT THE GRID TO LOOK CORRECT IN IE, DO THIS.
this.setSize(Ext.get(this.getEl().dom.parentNode).getSize(true));
Ext.grid.GridPanel.prototype.doLayout.call(this);
},
tbar: dButtons,
listeners: {
activate: function(g) {
if (editType = 'saved') {
g.getStore().load();
};
},
render: function(g) {
g.getSelectionModel().selectRow(2);
}
}
Also, the Json data looks like: (json: is my identifyer)
json:{"numrows":1,"rows":[{"fld_id":2,"fld_n":"DR41579-KS","fld_t_n":"DISASTER","prj_o":"","prj_h":"BACK, BILL"},
{"fld_id":3,"fld_n":"DR41579-VA","fld_t_n":"DISASTER","prj_o":"KIM","prj_h":"BACK, BILL"}]}
Powered by vBulletin® Version 4.1.5 Copyright © 2012 vBulletin Solutions, Inc. All rights reserved.