PDA

View Full Version : Dataview inside accordion panels - dynamically populating but itemSelector issue



rtirbany
23 Apr 2013, 8:14 PM
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:


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:

'panel[itemId=pnlFacets] > panel > dataview': {
itemclick: me.facetSelect
}


and here's code from my xtemplate/dataview attempt:

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!

rtirbany
24 Apr 2013, 3:24 PM
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?

slemmon
25 Apr 2013, 10:44 AM
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?

rtirbany
26 Apr 2013, 5:16 AM
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! :)

slemmon
26 Apr 2013, 12:54 PM
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:


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. :)

rtirbany
26 Apr 2013, 5:09 PM
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!

slemmon
27 Apr 2013, 10:45 PM
For each store instance you can pass in other instance configs, too. So, for store A you can do



store: {
type: 'mystore',
filters: [] // .... your filter configs/instances for this store
}


Then you can do the same thing for store B, C, etc.