ExtJS How to count the total amount of a variable that was pulled by the script

Question

Basically I have website designed by someone else and I really dont understand ExtJS. I was wondering if anyone can help me.

Basically what I need to do is to put the total amount of "Names" pulled by the script and place it next to the "Name" column header.

I have tried the .getCount () and other various functions in the code but nothing seems to work.

Can anyone help me plz?

Thank you!

    MNWG.grid.Charities = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        id: 'mnwg-grid-charities'
        ,url: MNWG.connectorURL
        ,baseParams: { action: 'charities/getList' }
        ,fields: ['id','Created','Name','RegNo','Contact','Address','Postcode','Phone','Fax','Website','Email','Info','Notes','Tags',{name: 'FinancialAid',type:'boolean'}]
        ,paging: true
        ,remoteSort: true
        ,anchor: '97%'
        ,autoExpandColumn: 'name'
        ,columns: [{
            header: 'Name'

            ,dataIndex: 'Name'
            ,sortable: true
            ,width: 400
            ,editor: { xtype: 'textfield' }
        },{
            header: 'Contact'
            ,dataIndex: 'Contact'
            ,sortable: false
        },{
            header: 'Post code'
            ,dataIndex: 'Postcode'
            ,sortable: false
        },{
            header: 'Phone'
            ,dataIndex: 'Phone'
            ,sortable: false
            ,renderer: MNWG.renderers.phoneFax
        },{
            header: 'Website'
            ,dataIndex: 'Website'
            ,sortable: false
            ,renderer: MNWG.renderers.websiteLink
         },{
            header: 'Email'
            ,dataIndex: 'Email'
            ,sortable: false
            ,renderer: MNWG.renderers.emailLink
        }]
        ,tbar:[{
            xtype: 'textfield'
            ,id: 'mnwg-charities-search-filter'
            ,emptyText: 'Search...'
            ,listeners: {
                'change': {fn:this.search,scope:this}
                ,'render': {fn: function(cmp) {
                    new Ext.KeyMap(cmp.getEl(), {
                        key: Ext.EventObject.ENTER
                        ,fn: function() {
                            this.fireEvent('change',this);
                            this.blur();
                            return true;
                        }
                        ,scope: cmp
                    });
                },scope:this}
            }
        },{
            xtype: 'tbfill'
        },{
            xtype: 'button'
            ,text: 'Add new Charity'
            ,handler: {
                xtype: 'mnwg-window-createcharity'
                ,blankValues: true
            }
        }]

    });
    MNWG.grid.Charities.superclass.constructor.call(this,config)
};
Ext.extend(MNWG.grid.Charities,MODx.grid.Grid,{
    search: function(tf,nv,ov) {
        var s = this.getStore();
        s.baseParams.query = tf.getValue();
        this.getBottomToolbar().changePage(1);
        this.refresh();
    }
    ,getMenu: function(a,b,c) {
        var items = Array();

        // Check for a web url
        URL = a.menu.record.Website;
        if(URL != '' && URL != '/'){
            items.push({
                text: 'Visit Website'
                ,handler: this.visitWebsite
            });
        };

        // Check for an email address
        Email = a.menu.record.Email;
        if(Email!=''){
            items.push({
                text: 'Send Email'
                ,handler: this.sendEmail
            });
        };

        // Add update / delete buttons
        items.push({
            text: 'Update Details'
            ,handler: this.updateCharity
        },'-',{
            text: 'Remove Charity'
            ,handler: this.removeCharity
        });
        return items;
    }
    ,visitWebsite: function(a,b){
        var url = a.parentMenu.record.Website
        // Make sure URL is preceded by http://
        var patt= /^http/;
        if( ! patt.test(url)){
          url = 'http://'+url;
        };
        window.open(url);
    }
    ,sendEmail: function(a,b){
        var Email = a.parentMenu.record.Email
        window.open('mailto:'+Email);
    }
    ,removeCharity: function() {
        MODx.msg.confirm({
            title: 'Delete Charity'
            ,text: 'Are you sure you want to delete this charity? This cannot be reversed!'
            ,url: this.config.url
            ,params: {
                action: 'charities/remove'
                ,id: this.menu.record.id
            }
            ,listeners: {
                'success': {fn:this.refresh,scope:this}
                ,'failure': {fn: function(){ alert('fail'); },scope:this}
            }
        });
    }
    ,updateCharity: function(btn,e) {
        if (!this.updateCharityWindow) {
            this.updateCharityWindow = MODx.load({
                xtype: 'mnwg-window-updatecharity'
                ,record: this.menu.record
                ,listeners: {
                    'success': {fn:this.refresh,scope:this}
                }
            });
        }
        this.updateCharityWindow.setValues(this.menu.record);
        this.updateCharityWindow.show(e.target);
    }
});
Ext.reg('mnwg-grid-charities',MNWG.grid.Charities);



MNWG.renderers.websiteLink = function(val,a,record){
    // If no URL return blank
    if(val==''){return'';};

    // Make sure URL is preceded by http://
    var patt= /^http/;
    if( ! patt.test(val)){
      val = 'http://'+val;
    };

    // Create link
    return '<a href="'+val+'" target="_blank">Visit Website</a>';
};

MNWG.renderers.emailLink = function(val,a,record){
  // If no email return blank
  if( val=='' ){return '';};
  return '<a href="mailto:'+val+'">Send Email</a>';
};

MNWG.renderers.phoneFax = function(val,a,record){
    var html = '';
    if(record.data.Phone!=''){
        html+= '<img src="http://m.intertrustgroup.com/images/icon_phone.png" style="margin-right:.5em;">'+record.data.Phone+'<br />';
    };
    if(record.data.Fax!=''){    
        html+= '<img src="http://www.sliksvn.com/gfx/icon_fax.gif" style="margin-right:.5em;">'+record.data.Fax;
    };
    return html;    
};

Jamie Sutherland · Answer 1 · 2012-10-05T23:57:25.777

0

You want to listen for the datachanged event on the store that retrieves the data from the server. Then on datachanged get the column header and update it.

The following code snippet is an example of how you might achieve this by adding a listener to the store applied to the grid.

Updated code example

Change the Name column for simplicity

{
    header: 'Name'
    ,id: 'mnwg-grid-charities-name'
    ,dataIndex: 'Name'
    ,sortable: true
    ,width: 400
    ,editor: { xtype: 'textfield' }
}

Add the following code below this line MNWG.grid.Charities.superclass.constructor.call(this,config);

MNWG.grid.Charities.getStore().addListener('datachanged', function(store) {
    Ext.ComponentManager.get('mnwg-grid-charities-name').setText('Name ' + store.count());
});

edited Oct 05 '12 at 23:57

answered Oct 05 '12 at 10:55

Jamie Sutherland

2,760
18
19

The listener goes below the top `fields: [`? if it does it doesnt work :( – Jonathan Thurft Oct 05 '12 at 12:19
No. It needs to be applied to the store that feeds your grid. This configuration isn't in your code so I can't provide an exact example I'm afraid. The grid config should have a property 'store' whatever that references is where you need to add the listener. – Jamie Sutherland Oct 05 '12 at 12:41
I updated the sample of my code to include all that is included in my file. Can you see there where there is a store? becasue i searched for the word "store" in the whole site code and couldnt find anything... – Jonathan Thurft Oct 05 '12 at 14:08
Ahhh it looks like your application is using MODExt which is an extension of Ext3 not 4. I'll have a look to see how to change my example – Jamie Sutherland Oct 05 '12 at 23:32
I don't have any experience with either products. Looking at the documentation though, that should be pretty close I think. – Jamie Sutherland Oct 05 '12 at 23:59

ExtJS How to count the total amount of a variable that was pulled by the script

1 Answers1