1. #1
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default Unanswered: Dataview inside accordion panels - dynamically populating but itemSelector issue

    Unanswered: Dataview inside accordion panels - dynamically populating but itemSelector issue


    hey everyone, I need up insert/add child panels to an accordion. Each of these child panels should have it's title using 'field' value in the data (see below), and the contents of each child should be (labels or a displayfield or ??) as long as it's clickable. The json data from the server is as below:

    Code:
    data: [
             {'field':'cities',
               'values':[
                   {'value':'DC', 'count':5 },
                   {'value':'SF', 'count':2 },
                   {'value':'NYC', 'count':4 },
                   {'value':'Nashville', 'count':4 } 
                ]
               },
               {'field':'beaches',
                 'values':[
                     {'value':'obx','count':1},
                     {'value':'ocean city','count':2},
                     {'value':'myrtle','count':4}
                 ]
                },
                {'field':'planets',
                  'values':[
                      {'value':'mercury','count':1},
                      {'value':'venus','count':2},
                      {'value':'earth','count':4},
                      {'value':'mars','count':1},
                      {'value':'jupiter','count':2},
                      {'value':'uranus','count':4},
                      {'value':'neptune','count':1}
                  ]
                 }
    ]
    Rendering works fine for me, but there's no way for me to get a working click event Ultimately, the click listener needs to give me access to the value selected + the 'field' value. (for example, 'planets', 'jupiter').This should be easy but I can't to get it working. At first I tried nested for loops and creating the components on the fly, but could not add a working click handler (perhaps b/c I'm doing the work within a store load handler function?). I also tried a dataview within the childpanels (and tried passing in 'data' & 'store' properties), either way, the itemSelector doesn't work. I've tried 'div.facet', 'div.facet_item', (and a few others etc) based on the tpl code, but no luck - it may have been b/c I didn't know how to select them in the this.control() of my controller:
    Code:
    'panel[itemId=pnlFacets] > panel > dataview': {
                    itemclick: me.facetSelect
    }
    and here's code from my xtemplate/dataview attempt:
    Code:
    var tplFacet = new Ext.XTemplate(
         '<tpl for=".">', 
               '<div class="facet">',
                //ignore - (this is handled in title of panel) '<label class="facet_field">{facetName}</label>',   
                   '<tpl for="facetEntries">',
                    '<div class="facet_item">{value}&nbsp;&nbsp;({count})</div>',
                   '</tpl></div>',
              '</tpl>'  
    );
    I wanted to see if anyone has successfully done this before/has any tips/advice. It sounds like it should be straightforward but I'm having more difficulty than I thought. Thanks in advance!
    Attached Images
    Last edited by rtirbany; 24 Apr 2013 at 7:48 AM. Reason: cleanup

  2. #2
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default


    ok, so I've gone back to the nested looping..and now have a dataview w/ a click event handler function to the dataview items. It's still in store load handler of the controller...I'd like to have all of them reference a single function written in the controller or anywhere other than inline.

    Also, since I have multiple dataviews, and the same store which holds all the data, is there a good way to filter the data for each w/o creating a whole new store? I searched on the web and couldn't find a clear approach...any thoughts?

  3. #3
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,082
    Answers
    398
    Vote Rating
    186
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Just clarifying: the three dataviews are sharing the same store instance today, but ultimately you're wanting to be able to filter the store of a dataview and not have it affect its peer dataview/dataviews, correct?

  4. #4
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default


    hi, and thanks. Yes that is the intention/hope.
    I thought applying a filter for each dataview would work, but after thinking it through I think I can begin to understand why. What I'm doing now is applying a filter and creating a new store by setting it's data to the filter results. This is done each time I need a dataview store. I was hoping there'd be a more efficient way to do all of this.

    Also, is a dataview.refresh() required after the store changes? I thought this would take place automagically (w/o my code doing any kind of polling, etc).

    update (for everyone else): I also have my click event listener working - turns out I had the wrong selector syntax. I removed the listener property from the declaration and the controller now picks it up!

  5. #5
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,082
    Answers
    398
    Vote Rating
    186
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    What you might do is share a store 'type' across components, but not the instance. That will let you filter distinctly.

    When you define your store do something like:
    Code:
    Ext.define('MyStore', {
        extend: 'Ext.data.Store',
        alias: 'store.mystore'
    });
    Then when you instantiate your dataviews you'll config them like:
    store: { type: 'mystore' }

    That will allow each store to use the same structure from your defined class, but the datasets will be distinct. -- really helps with filtering.

  6. #6
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default


    man, that's really sweet, but let me make sure we're both on the same page....

    I have a store populated w/ instances of a model. This (single) store contains all of my model instances - which I need to have displayed/manipulated (just removed really) from one of several dataviews. This would be possible b/c of a property of in model which differentiates which (one) dataview it is to be rendered in and me employing a filter within each dataview's store definition.
    Since I can't have a filter in each dataview extracting only the model instances I need, I won''t be able to use this approach. Otherwise I can can I create multiple mini-stores (with subsets of the store data)...but am concerned doing this isn't efficient (nor elegant)

    What you're saying is that I can use a 'type' definition instead? I'm not sure where/how filtering gets applied here...this would be really awesome if it does the job!

  7. #7
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,082
    Answers
    398
    Vote Rating
    186
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    For each store instance you can pass in other instance configs, too. So, for store A you can do

    Code:
    store: {
        type: 'mystore',
        filters: [] // .... your filter configs/instances for this store
    }
    Then you can do the same thing for store B, C, etc.

Thread Participants: 1

Tags for this Thread