PDA

View Full Version : Problems Addressing a Text Item in BBar



greyknght1
13 May 2008, 5:52 AM
Everyone,

I have put together a UX grid file and it is working fine. The problem is that I would like to add a Sum/Average/Count status bar like box on the paging bar. My function in the store section sums properly, but I can't seem to make the textItem update with that value. My code is listed below:



/**
* ux.Sme.Grid.js
*
* @author Michael Stahle
* @copyright (c) 2008, by Brandaris, USAF
* @date 12. May 2008
* @version 1
*
*
*/

/*global ux object MICAP Current Month Niin Totals*/


/**
* @class Ext.ux.MicapCurrentMonthNiinTotalsGrid
* @extends Ext.grid.GridPanel
*/

Ext.ux.MicapCurrentMonthNiinTotalsGrid = Ext.extend(Ext.grid.GridPanel, {
// Init the Component

initComponent:function() {
// applyIf so we can extent this new class in the future
Ext.applyIf(this, {
// Data Store (Built In but overridable)
store: new Ext.data.Store({
scope: this,
listeners: {
'load':{
fn: function(store, records, options){
// Loop through the total MTD MICAP Hrs
var mtdMicapTotal = 0;
for( var i = 0; i < store.getCount(); i++ ) {
var record = store.getAt(i);
mtdMicapTotal += record.get('MTD_MICAP_Hrs');
}
// Add Summary to bottom paging bar
alert(mtdMicapTotal);
},
scope: this
}
},
proxy: new Ext.data.HttpProxy({url: 'xml/universal_xml_generator.asp'}),
baseParams: {table: 'view_mot_micap_current_month_niin_totals'},
remoteSort: true,
//sortInfo:{field: 'Product_Line', direction: "ASC"},
//groupField:'Product_Line',
reader: new Ext.data.XmlReader({
record: 'item',
totalRecords: 'total',

id: 'id'
}, [
{name: 'Total_Hours', mapping: 'Total_Hours', type: 'float'},
{name: 'MTD_MICAP_Hrs', mapping: 'MTD_MICAP_Hrs', type: 'float'},
{name: 'FSC', mapping: 'FSC', type: 'string'},
{name: 'NIIN', mapping: 'NIIN', type: 'string'},
{name: 'NOUN', mapping: 'NOUN', type: 'string'},
{name: 'MDS', mapping: 'MDS', type: 'string'},
{name: 'MMAC', mapping: 'MMAC', type: 'string'},
{name: 'SGM NIIN', mapping: 'SGM NIIN', type: 'string'},
{name: 'ALC', mapping: 'ALC', type: 'string'},
{name: 'IM_Code', mapping: 'IM_Code', type: 'string'},
{name: 'ERRC_Code', mapping: 'ERRC_Code', type: 'string'},
{name: 'M', mapping: 'M', type: 'string'},
{name: 'Y', mapping: 'Y', type: 'string'},
{name: 'ws', mapping: 'ws', type: 'string'},
{name: 'Budget Code', mapping: 'Budget Code', type: 'string'},
{name: 'Transactions', mapping: 'Transactions', type: 'string'},
{name: 'Div Code', mapping: 'Div Code', type: 'string'},
{name: 'scm', mapping: 'scm', type: 'string'},
{name: 'product_line', mapping: 'product_line', type: 'string'}

]

)
}),
// Column Model, uses the smeExpander template for displaying additional information hidden in the data store
columns:[
{header: "FSC", width: 50, sortable: true, dataIndex: 'FSC'},
{header: "NIIN", width: 80, sortable: true, dataIndex: 'NIIN'},
{header: "MMAC", width: 50, sortable: true, dataIndex: 'MMAC'},
{header: "Month", width: 90, sortable: true, dataIndex: 'M'},
{header: "Year", width: 50, sortable: true, dataIndex: 'Y'},
{header: "MTD MICAP Hrs", width: 120, sortable: true, dataIndex: 'MTD_MICAP_Hrs'},
{header: "Total MICAP Hrs", width: 120, sortable: true, dataIndex: 'Total_Hours'},
{header: "Transactions", width: 120, sortable: true, dataIndex: 'Transactions'},
{header: "SCM", width: 120, sortable: true, dataIndex: 'scm'},
{header: "WS", width: 50, sortable: true, dataIndex: 'ws'},
{header: "Product Line", width: 120, sortable: true, dataIndex: 'product_line'},
{header: "ERRC", width: 50, sortable: true, dataIndex: 'ERRC_Code', hidden: true},
{header: "IMC", width: 50, sortable: true, dataIndex: 'IM_Code', hidden: true},
{header: "MDS", width: 60, sortable: true, dataIndex: 'MDS', hidden: true},
{header: "NOUN", width: 150, sortable: true, dataIndex: 'NOUN', hidden: true}

],
// Plugins: None Currently Used
plugins: new Ext.grid.GridFilters({
filters:[
{type: 'string', dataIndex: 'FSC'},
{type: 'string', dataIndex: 'NIIN'},
{type: 'string', dataIndex: 'MMAC'},
{type: 'string', dataIndex: 'Y'},
{type: 'numeric', dataIndex: 'MTD_MICAP_Hrs'},
{type: 'numeric', dataIndex: 'Total_Hours'},
{type: 'numeric', dataIndex: 'Transactions'},
{
type: 'list',
dataIndex: 'M',
options: ['January','February','March','April','May','June','July','August','September','October','November','December']
},
{type: 'string', dataIndex: 'scm'},
{type: 'string', dataIndex: 'ws'},
{type: 'string', dataIndex: 'product_line'},
{type: 'string', dataIndex: 'ERRC_Code'},
{type: 'string', dataIndex: 'IM_Code'},
{type: 'string', dataIndex: 'MDS'}
]}),
// Grouping View
//view: new Ext.grid.GroupingView({
// forceFit:true,
// showGroupName: false,
// enableGroupingMenu: true,
// enableNoGroups:false, // REQUIRED!
// hideGroupedColumn: true
//}),
viewConfig:{forceFit:false},
loadMask: true
});




this.bbar = new Ext.PagingToolbar({
pageSize: 30,
store: this.store,
displayInfo: true,
displayMsg: 'Records {0} - {1} of {2}',
emptyMsg: "No Records",
items: ['-',' ', new Ext.Toolbar.TextItem('MTD MICAP SUM: 0')]
});

Ext.ux.MicapCurrentMonthNiinTotalsGrid.superclass.initComponent.apply(this, arguments);
}, // eo function initComponent

onRender:function() {
this.store.load({params:{start:0, limit:30}});

Ext.ux.MicapCurrentMonthNiinTotalsGrid.superclass.onRender.apply(this, arguments);
} // eo function onRender
});

// Register your new class
Ext.reg('micapcurrentmonthniintotalsgrid', Ext.ux.MicapCurrentMonthNiinTotalsGrid);


Does any of you have any idea how I can make this work? I am afraid I will run into problems with a static ID, for I will be using this object over and over again, so that static id will show up more than once and I might over write the wrong one when the data load from the store.

Very Respectfully,

Michael Stahle

13 May 2008, 6:18 PM
try accessing yourObj.bbar.items.items[1] in firebug. explore it, and you'll find your answer.

greyknght1
14 May 2008, 6:02 AM
I did look at the Firebug code, and found my answer (though not to this question). The solution I used is as follows:





/**
* ux.MICAP.CurrentMonth.Niin.Totals..grid.js
*
* @author Michael Stahle
* @copyright (c) 2008, by Brandaris, USAF
* @date 12. May 2008
* @version 1
*
*
*/

/*global ux object MICAP Current Month Niin Totals*/


/**
* @class Ext.ux.MicapCurrentMonthNiinTotalsGrid
* @extends Ext.grid.GridPanel
*/

Ext.ux.MicapCurrentMonthNiinTotalsGrid = Ext.extend(Ext.grid.GridPanel, {
// Init the Component

initComponent:function() {

var niinSum = new Ext.Toolbar.TextItem('MTD MICAP Hrs: 0');

// applyIf so we can extent this new class in the future
Ext.applyIf(this, {
// Data Store (Built In but overridable)
store: new Ext.data.Store({
scope: this,
listeners: {
'load':{
fn: function(store, records, options){
// Loop through the total MTD MICAP Hrs
var mtdMicapTotal = 0;
var transCount = 0;
for( var i = 0; i < store.getCount(); i++ ) {
var record = store.getAt(i);
mtdMicapTotal += record.get('MTD_MICAP_Hrs');
transCount += record.get('Transactions');
}
// Add Summary to bottom paging bar

Ext.fly(niinSum.getEl()).update('Visible MTD MICAP Hrs: '+ mtdMicapTotal + ' | Transaction Count: ' + transCount);
},
scope: this
}
},
proxy: new Ext.data.HttpProxy({url: 'xml/universal_xml_generator.asp'}),
baseParams: {table: 'view_mot_micap_current_month_niin_totals'},
remoteSort: true,
//sortInfo:{field: 'Product_Line', direction: "ASC"},
//groupField:'Product_Line',
reader: new Ext.data.XmlReader({
record: 'item',
totalRecords: 'total',

id: 'id'
}, [
{name: 'Total_Hours', mapping: 'Total_Hours', type: 'float'},
{name: 'MTD_MICAP_Hrs', mapping: 'MTD_MICAP_Hrs', type: 'float'},
{name: 'FSC', mapping: 'FSC', type: 'string'},
{name: 'NIIN', mapping: 'NIIN', type: 'string'},
{name: 'NOUN', mapping: 'NOUN', type: 'string'},
{name: 'MMAC', mapping: 'MMAC', type: 'string'},
{name: 'SGM NIIN', mapping: 'SGM NIIN', type: 'string'},
{name: 'ALC', mapping: 'ALC', type: 'string'},
{name: 'IM_Code', mapping: 'IM_Code', type: 'string'},
{name: 'ERRC_Code', mapping: 'ERRC_Code', type: 'string'},
{name: 'M', mapping: 'M', type: 'string'},
{name: 'Y', mapping: 'Y', type: 'string'},
{name: 'ws', mapping: 'ws', type: 'string'},
{name: 'Budget Code', mapping: 'Budget Code', type: 'string'},
{name: 'Transactions', mapping: 'Transactions', type: 'int'},
{name: 'Div Code', mapping: 'Div Code', type: 'string'},
{name: 'scm', mapping: 'scm', type: 'string'},
{name: 'product_line', mapping: 'product_line', type: 'string'}

]

)
}),
// Column Model, uses the smeExpander template for displaying additional information hidden in the data store
columns:[
{header: "FSC", width: 50, sortable: true, dataIndex: 'FSC'},
{header: "NIIN", width: 80, sortable: true, dataIndex: 'NIIN'},
{header: "MMAC", width: 50, sortable: true, dataIndex: 'MMAC'},
{header: "Month", width: 90, sortable: true, dataIndex: 'M'},
{header: "Year", width: 50, sortable: true, dataIndex: 'Y'},
{header: "MTD MICAP Hrs", width: 120, sortable: true, dataIndex: 'MTD_MICAP_Hrs'},
{header: "Total MICAP Hrs", width: 120, sortable: true, dataIndex: 'Total_Hours'},
{header: "Transactions", width: 120, sortable: true, dataIndex: 'Transactions'},
{header: "SCM", width: 120, sortable: true, dataIndex: 'scm'},
{header: "WS", width: 50, sortable: true, dataIndex: 'ws'},
{header: "Product Line", width: 120, sortable: true, dataIndex: 'product_line'},
{header: "ERRC", width: 50, sortable: true, dataIndex: 'ERRC_Code', hidden: true},
{header: "IMC", width: 50, sortable: true, dataIndex: 'IM_Code', hidden: true},
{header: "NOUN", width: 150, sortable: true, dataIndex: 'NOUN', hidden: true}

],
// Plugins: None Currently Used
plugins: new Ext.grid.GridFilters({
filters:[
{type: 'string', dataIndex: 'FSC'},
{type: 'string', dataIndex: 'NIIN'},
{type: 'string', dataIndex: 'MMAC'},
{type: 'string', dataIndex: 'Y'},
{type: 'numeric', dataIndex: 'MTD_MICAP_Hrs'},
{type: 'numeric', dataIndex: 'Total_Hours'},
{type: 'numeric', dataIndex: 'Transactions'},
{
type: 'list',
dataIndex: 'M',
options: ['January','February','March','April','May','June','July','August','September','October','November','December']
},
{type: 'string', dataIndex: 'scm'},
{type: 'string', dataIndex: 'ws'},
{type: 'string', dataIndex: 'product_line'},
{type: 'string', dataIndex: 'ERRC_Code'},
{type: 'string', dataIndex: 'IM_Code'}
]}),
// Grouping View
//view: new Ext.grid.GroupingView({
// forceFit:true,
// showGroupName: false,
// enableGroupingMenu: true,
// enableNoGroups:false, // REQUIRED!
// hideGroupedColumn: true
//}),
viewConfig:{forceFit:false},
loadMask: true
});




this.bbar = new Ext.PagingToolbar({
pageSize: 30,
store: this.store,
displayInfo: true,
displayMsg: 'Records {0} - {1} of {2}',
emptyMsg: "No Records",
items: ['-',' ', niinSum]
});

Ext.ux.MicapCurrentMonthNiinTotalsGrid.superclass.initComponent.apply(this, arguments);
}, // eo function initComponent

onRender:function() {
this.store.load({params:{start:0, limit:30}});


Ext.ux.MicapCurrentMonthNiinTotalsGrid.superclass.onRender.apply(this, arguments);
} // eo function onRender
});

// Register your new class
Ext.reg('micapcurrentmonthniintotalsgrid', Ext.ux.MicapCurrentMonthNiinTotalsGrid);


Once again, jgarcia you rock! I used your hint to solve another problem with addressing items in a menu that were not explicitly declared.
=D>=D>=D>=D>=D>=D>

Very Respectfully,

Michael Stahle