1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    25
    Vote Rating
    0
    Steve_Terry is on a distinguished road

      0  

    Default Answered: Store Auto-Load & Store Iterator with Grid

    Answered: Store Auto-Load & Store Iterator with Grid


    Hi there,

    I have a store which uses ajax.request which after the request is sent, the response is returned to the ajax.request in a JSON formatted string (which is working correctly).

    This store is also linked to a grid which contains an activityColumn.

    The store will of course be loaded based upon the response received from the ajax.request, however in the JSON formatted string response, I have a field name called "activity" which is identical to the field name of the activityColumn of the grid.

    Although this field in the JSON formatted string response can only contain a 0 or 1 so...

    what I am looking to accomplish is that when the store loads, check the "activity" field value of the formatted string response so that for each record in the response with a 0 for the "activity" field, set the grid's activityColumn row field to an icon, if a 1 than set a different icon (this is instead of loading the grid with a 0 or 1).

    What I guess I'm actually wondering some assistance on is 2 things...

    1) How to iterate through the store upon loading since the store is being auto-loaded on launch.
    • I have searched around (even looked at the api doc) and noticed that there is an "each" method of the store but I'm a bit confused how to actually use this method since I didn't see any example.
    2) Since the store is being auto-loaded at launch, is it maybe possible to have the above performed in the callback() method of the ajax.request?
    • Otherwise I would assume this would have to be performed in the init() of the panel which is where the grid component resides.
    So essentially I want to accomplish the following in pseudo-code...

    Code:
    while(the store is auto-loading the records)
    {
          for(int i = 0; i < storeTotalCount; i++)
          {
                if(storeRecord[i].activity == 0)
                {
                    gridRowActivityColumnField[i].items[0].icon = 'testIcon1'
                }
                else
                    gridRowActivityColumnField[i].items[0].icon = 'testIcon2'
          }
    }
    Hopefully that makes a bit sense!

  2. @Steve_Sterry,

    I made a mistake. renderer must be defined at the column level, not inside its items.
    Code:
    xtype: 'actioncolumn',
    // id: 'ActionCol',  <- use itemId instead
    itemId: 'ActionCol',
    dataIndex: 'Activity',
    renderer: function(value) {
    	var items = this.down('#ActionCol').items;
    	if(value == '0') {
    		items[0].icon = 'testIcon1';
    		items[0].tooltip = 'testTooltip1';
    	} else {     
    		items[0].icon = 'testIcon2';
    		items[0].tooltip = 'testTooltip2';
    	}
    },
    items: [{
    }]

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,812
    Answers
    3467
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Is the activity value returned from when the store is loaded?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    25
    Vote Rating
    0
    Steve_Terry is on a distinguished road

      0  

    Default


    Hi mitchellsimeons,

    Well I got it to almost work correctly by using the getClass property for the actioncolumn however, when the grid is displayed, it is loading all the correct data from the store however the icon and tooltip for the 1st row is not displayed.

    I essentially converted the pseudo-code in my earlier post into the below...

    Code:
    xtype: 'actioncolumn',
    id: 'ActionCol',
    dataIndex: 'Activity',
    items: [{
                getClass: function(v, meta, rec)
                {    
                       if(rec.get('Activity') == '0')
                        {
                              this.items[0].icon = 'testIcon1';
                              this.items[0].tooltip = 'testTooltip1';
                         }
                         else
                          {     
                               this.items[0].icon = 'testIcon2';
                               this.items[0].tooltip = 'testTooltip2';
                           }
                   }
               }]
    I have checked the response being sent to the ajax request and it looks good, no issues there.

    When I take a closer look, I noticed that the icons are being displayed starting at the 2nd row which means the 1st row was completely skipped...

    however the tooltips are not skipping the 1st row although no tooltip is displayed in the 1st row because I believe it requires an icon though?

    So I get the following below as an example...

    Code:
    row 1: activityValue = 0, icon = blank, tooltip=notdisplayed 
    row 2: activityValue = 1, icon = testIcon1, tooltip=testTooltip2 (note: icon should be testIcon2)
    row 3: activityValue = 0, icon = testIcon2, tooltip=testTooltip1 (note: icon should be testIcon1)
    row 4: activityValue = 1, icon = testIcon1, tooltip=testTooltip2 (note: icon should be testIcon2)
    row 5: activityValue = 0, icon = testIcon2, tooltip=testTooltip1 (note: icon should be testIcon1)
    so the issue appears to be the icon that is not displayed in the 1st row therefore placing the 1st row's icon in the 2nd row and so on which is causing the confliction.

    Any ideas?

  5. #4
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Try to use renderer instead of getClass. My fix is in red color below:
    Code:
    xtype: 'actioncolumn',
    id: 'ActionCol',
    dataIndex: 'Activity',
    items: [{
        //getClass: function(v, meta, rec) {
        renderer: function(value) {   
           //  if(rec.get('Activity') == '0') {
            if(value == '0') {
                this.items[0].icon = 'testIcon1';
                this.items[0].tooltip = 'testTooltip1';
            } else {     
                this.items[0].icon = 'testIcon2';
                this.items[0].tooltip = 'testTooltip2';
            }
        }
    }]

  6. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    25
    Vote Rating
    0
    Steve_Terry is on a distinguished road

      0  

    Default


    @vietits,

    If I use renderer instead of getClass than I get no icons and no tooltips being displayed at all for any rows.

    With getClass I was getting the icons and tooltips to display, but they weren't being displayed correctly (as according to my previous post - aka first row skipped).

    When I take a look at the API between renderer and getClass, I wonder if perhaps the data is already rendered before renderer is called?

    I don't know if that makes sense but the store is being loaded with the ajax.request response data which sets the 'Active' field of each row with a 0 or 1 which is then used inside the getClass to determine which icon and tooltip to display.

    Any ideas?

  7. #6
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    @Steve_Sterry,

    I made a mistake. renderer must be defined at the column level, not inside its items.
    Code:
    xtype: 'actioncolumn',
    // id: 'ActionCol',  <- use itemId instead
    itemId: 'ActionCol',
    dataIndex: 'Activity',
    renderer: function(value) {
    	var items = this.down('#ActionCol').items;
    	if(value == '0') {
    		items[0].icon = 'testIcon1';
    		items[0].tooltip = 'testTooltip1';
    	} else {     
    		items[0].icon = 'testIcon2';
    		items[0].tooltip = 'testTooltip2';
    	}
    },
    items: [{
    }]

  8. #7
    Sencha User
    Join Date
    Feb 2012
    Posts
    25
    Vote Rating
    0
    Steve_Terry is on a distinguished road

      0  

    Default


    @vietits,

    What can I say?? Other than that was amazing and worked perfectly! thanks!

    That was my mistake as well for realizing that the renderer should not be defined at the item itself but rather in the column level since that is what is actually being rendered (at least I hope that understanding is correct).

    Although if you don't mind I just had a quick simple question...

    Is their a major difference between using "id" versus "itemId"?

    I tried to do some quick research and couldn't pull up any info on the exact explanations of using one versus the other.

    Although I soon realized that if I use "itemId" than I cannot access the component in the other sections of the code with...

    Code:
    var actionColumn = Ext.getCmp('ActionCol');
    because firebug would present me with the following...

    Code:
    actionColumn is undefined
    so I had to adjust the initialized variable to the following...

    Code:
    //whereas grid is the parent so parent.child
    var actionColumn = grid.getComponent('ActionCol');
    and no go...

    But when I change ActionCol back to "id" instead of "itemId" it works correctly.

    Is "itemId" perhaps a necessity?

  9. #8
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    @Steve_Terry,

    About the itemId and id you can check them in Ext JS document: Ext.AbstractComponent-cfg-id & Ext.AbstractComponent-cfg-itemId.

Thread Participants: 2

Tags for this Thread