Code:
//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:
Code:
{"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.
Problem Loading JSON Store
Reply With Quote
