1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    36
    Vote Rating
    0
    romerve is on a distinguished road

      0  

    Default Chart listener: beforerender

    Chart listener: beforerender


    Hello,

    i am trying to change the bottom axis title to show information that resides in the the chart data store.

    So i decided to have a beforerender listener to change it, however, i am getting a bit confused with the store. See the relevant code bellow:
    Code:
    listeners: {
                    beforerender: {
                        fn: function(chart){
                            var ds = Ext.getStore(chart.store.storeId);
                            var totalIn, totalOut = null;
                            
                            console.log(ds.data.length);
                            
                            console.log(chart.axes.get('bottom').title);
                            
                        }
                    }
                }
    If i do: "console.log(ds)" i see the entire data store with all of the data in it, but if i do: "console.log(ds.data)", or as above: "console.log(ds.data.length)"; it shows nothing, it's like if the store was never created.

    Why is this? The code above is set on the initConfig() using Ext.apply(this, {....})

  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    71
    Vote Rating
    2
    softwarezman is on a distinguished road

      0  

    Default


    Why not just set the title on initComponent? That's what I'm doing for my chart. I do pretty much the same thing, get the store, loop through it and get the titles I want, then populate the array the chart uses with the appropriate data. Doing it on initComponent works.

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    36
    Vote Rating
    0
    romerve is on a distinguished road

      0  

    Default


    Well i tried that and it did the same thing that it is happening in with the listener.

    I did: "console.log(this)" and i can see the store->data->items, etc. But if i do: "console.log(this.store.data)", it just logs undefined...

    chart js
    Code:
    Ext.define('Analytics.view.charts.AssemInOut', {
        extend: 'Ext.chart.Chart',
        alias: 'widget.asio',
        id: 'asio',
        width: 800,
        height: 500,
        renderTo: Ext.getBody(),
        store: 'dsAssemInOut',
        
        initComponent: function() {
            
            Ext.apply(this, {
                legend: {
                    position: 'right'
                },
                axes: [
                    {
                        title: '',
                        type: 'Numeric',
                        position: 'left',
                        fields: ['qtyin', 'qtyout'],
                        minimum: 0
                    },
                    {
                        title: 'Work Center:',
                        type: 'Category',
                        position: 'bottom',
                        fields: ['date'],
                        label: {
                            rotate: {
                                degrees: -40
                            }
                        }
                    }
                ],
                series: [
                    {
                        type: 'column',
                        axis: 'left',
                        tips: 
                            {
                               trackMouse: true,
                               width: 150,
                               autoHeight: true,
                               renderer: function (storeItem, item) {
                                   this.setTitle(
                                        'In: ' + storeItem.get('qtyin') + 
                                        ' --- Out: ' + storeItem.get('qtyout')
                                   );
                               }
                            },
                        xField: 'date',
                        yField: ['qtyin', 'qtyout'],
                        title: ['In', 'Out']
                    }
                ]
            });
            
            console.log(this.store.data);
            
            this.callParent(arguments);
            
        }
    });
    controller:
    Code:
    Ext.define('Analytics.controller.Reporter', {
        extend: 'Ext.app.Controller',
        views: ['charts.AssemInOut'] ,
        stores: ['dsAssemInOut'],
        models: ['AssemInOut'],
        
        init: function() {
            
            new Ext.LoadMask(Ext.getBody(), {
                msg: "Please wait while loading data...",
                store: 'dsAssemInOut'
            });
            
            // The params to pass to the back end are based on the URL
            // we take it and split it up onto different vars
            var url = document.URL;
            var params = url.substring(url.indexOf('+', url.indexOf('+') + 1) + 1).split('+');
            
            var paramsPkg = {
                rpt: params[0],
                wc: params[1],
                time: params[2].split('-')[0],
                timeUnit: params[2].split('-')[1]
            };
            
            // Apply the params to the store so the request is properly configured
            Ext.apply(
                Ext.getStore('dsAssemInOut').getProxy().extraParams, 
                paramsPkg
            );
            
            // Create and show chart
            var asioChart = Ext.widget('asio');
            
        }
    });
    I dont know if it's because i am applying the extraParam via Ext.apply in the controller, but if that was the case when i do: "console.log(this)" in the initConfig() i would see the complete data store...

    I dont know why that's happening...

  4. #4
    Sencha User
    Join Date
    Feb 2011
    Posts
    36
    Vote Rating
    0
    romerve is on a distinguished road

      0  

    Default


    Ok, i am having trouble understanding why i seem not to be able to use the store in the "initConfig()"

    Code:
    Ext.define('Analytics.view.charts.AssemInOut', {
        extend: 'Ext.chart.Chart',
        alias: 'widget.asio',
        id: 'asio',
        width: 800,
        height: 500,
        renderTo: Ext.getBody(),
        store: 'dsAssemInOut',
        
        initComponent: function() {
            
            Ext.apply(this, {
                legend: {
                    position: 'right'
                },
                 ....................................
                series: [
                    {
                        type: 'column',
                        axis: 'left',
                        tips: 
                            {
                               trackMouse: true,
                               width: 150,
                               autoHeight: true,
                               renderer: function (storeItem, item) {
                                   this.setTitle(
                                        'In: ' + storeItem.get('qtyin') + 
                                        ' --- Out: ' + storeItem.get('qtyout')
                                   );
                               }
                            },
                        xField: 'date',
                        yField: ['qtyin', 'qtyout'],
                        title: ['In', 'Out']
                    }
                ]
            });
            
    #1        console.log();
            
            this.callParent(arguments);
            
        }
    });
    Looking at the code above and if i was to put "this" in the console.log, i get:
    Code:
    Ext.Class.newClass
    additionalCls: Array[1]
    axes: Ext.Class.newClass
    chartBBox: Object
    componentCls: "x-surface"
    componentLayout: Ext.Class.newClass
    componentLayoutCounter: 1
    container: Ext.Element.Ext.core.Element
    curHeight: 500
    curWidth: 800
    ....
    originalStore: "dsAssemInOut"
    preLayoutSize: Object
    ......
    stateId: undefined
    stateTask: Ext.util.DelayedTask
    store: Ext.Class.newClass
    data: Ext.Class.newClass events: Object eventsSuspended: false filters: Ext.Class.newClass groupers: Ext.Class.newClass loading: false model: function () { modelDefaults: Object proxy: Ext.Class.newClass removed: Array[0] sorters: Ext.Class.newClass storeId: "dsAssemInOut" totalCount: 8
    But if i do it with "this.store" i just get the storeID, so i used Ext.getStore(this.store) and i get:
    Code:
    AssemInOut.js:63
    Ext.Class.newClass
    data: Ext.Class.newClass
    allowFunctions: false events: Object getKey: function (record) { items: Array[8] keys: Array[8] length: 8 map: Object sorters: Ext.Class.newClass __proto__: Class.registerPreprocessor.prototype
    events: Object filters: Ext.Class.newClass groupers: Ext.Class.newClass loading: true model: function () { modelDefaults: Object proxy: Ext.Class.newClass removed: Array[0] sorters: Ext.Class.newClass storeId: "dsAssemInOut" __proto__: Class.registerPreprocessor.prototype
    Good!

    But then when i try to assign that to a var and access data, it just goes blank:
    Code:
    .....
    var ds = Ext.getStore(this.store);
    console.log(ds.data);
    ....
    I get:
    Code:
    Ext.Class.newClass
    
    
    allowFunctions: false
    events: Object
    getKey: function (record) {
    items: Array[0]
    keys: Array[0]
    length: 0
    map: Object
    sorters: Ext.Class.newClass
    __proto__: Class.registerPreprocessor.prototype

    This is from within the view and the same thing happens if i do it from the controller.

    On ExtJS 3 i was just able to loop through datastore.data.items[x].data.field , but it seems it cant be done like that anymore. What would be the recommended way of doing so...??

    Thanks

  5. #5
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    71
    Vote Rating
    2
    softwarezman is on a distinguished road

      0  

    Default


    Maybe instead of this.store you should do
    Code:
    var yourStore = Ext.getStore('NAMESPACE.store.StoreName');
    I get the feeling that even though you are getting things when you call this.store it actually isn't initialized. If you get your store by its namespace name instead of this.store you should be getting the initialized one. At that point you could just do
    Code:
    yourStore.each(function: (record) { do.stuff()});
    or whatever the syntax is (at home right now) ExtJS 4 has the store.each function which will pass individual records in their associated model so you could call
    Code:
    record.get('YourColumnName');
    and it'd return the records value instead of looping through the data.items stuff. Much cleaner. Hope this helps.

    If anybody else wants to chime in if I'm wrong feel free... I'd hate giving bad advice.

  6. #6
    Sencha User
    Join Date
    Feb 2011
    Posts
    36
    Vote Rating
    0
    romerve is on a distinguished road

      0  

    Default


    Yeah, that didnt work either.

    I managed to do it by doing this:
    Code:
            
            var ds = Ext.getStore(this.store);
            ds.on('load', function(store, records){
                ds.each(function(record){
                    record.fields.each(function(field){
                        console.log(field);
                    });
                });
            });
    Thanks for the help.

  7. #7
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    @romerve --

    A 'named' store is not converted into an instance until the superclass's initComponent method is called.

    console.log it after that happens:

    Code:
                      
    
      store  : 'someStore',
      initComponent : function() {
       .......
        this.callParent(arguments);
        console.log(this.store.data);
    }
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  8. #8
    Sencha User
    Join Date
    Feb 2011
    Posts
    36
    Vote Rating
    0
    romerve is on a distinguished road

      0  

    Default


    That didnt work either. It's weird the store shows records in store.data, but anytime i try to access store.data.items[] the records are no longer there, like if somehow the store hasnt been initialized.

    So i decided to add the on.('load'....) and got it working that way.

    I m posting the code just in case someone else runs into the same difficulty.

    Code:
    initComponent: function (){
    .......
    .......
            var ds = Ext.getStore(this.store);
            
            ds.on('load', function(store, records){
                
                var ioChartBottom = Ext.getCmp('asio').axes.get('bottom');
                var pkg = {
                    totalIn: 0,
                    totalOut: 0,
                    workCenter:''
                };
                
                
                for ( var i = 0; i <= store.data.length - 1; i++ )
                {
                    pkg.totalIn += parseInt(store.data.items[i].data.qtyin);
                    pkg.totalOut += parseInt(store.data.items[i].data.qtyout);
                }
                
                pkg.workCenter = store.data.items[0].data.sequence_name;
                ioChartBottom.setTitle('Work Center: ' + pkg.workCenter + ' -- total in: ' + pkg.totalIn + '. total out: ' + pkg.totalOut + '.')
            });
            
            this.callParent(arguments);
            
        }
    });

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi