Results 1 to 3 of 3

Thread: Problems Addressing a Text Item in BBar

  1. #1

    Default Problems Addressing a Text Item in BBar

    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:
    Code:
    /**
     * 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

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    try accessing yourObj.bbar.items.items[1] in firebug. explore it, and you'll find your answer.

  3. #3

    Default Thanks!

    I did look at the Firebug code, and found my answer (though not to this question). The solution I used is as follows:

    Code:
    /**
     * 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.


    Very Respectfully,

    Michael Stahle

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •