PDA

View Full Version : Custom component data iteration



codehtmai
16 May 2012, 12:22 PM
Hello, thanks for reading. I have been working with ExtJS for about a month now and have been very impressed with its capabilities. I've been having this problem that I haven't been able to find a solution for, though..I feel like I'm missing something obvious.

What I want to do:
I want a customized list from a Store. The list needs to be able to display (stylized) some of the data from each record, and also include a Chart component.

Something like this: (the <p> isn't important)



<div class="somestyle">
<div class="row">


<p>data</p>
<p>data2</p>
<p>Gauge Chart Here</p>

</div>

<div class="row">


<p>data</p>
<p>data2</p>
<p>Gauge Chart Here</p>

</div>
...
</div>



What I have tried:
First, I tried the XTemplate. This worked very well for everything except for including the chart component. I've looked around and apparently that's just not supported in the templates.

After that, I started trying to make my own component off of Ext.Component and Ext.view.View. I'm able to pass the data values in, but then I still need to iterate the data myself. I did that with Ext.data.StoreManager.lookup('terrainWorkUnitStore').data.each(), although the result still wasn't desirable; the data is in there, but it isn't bound to the data store like a regular component would be.

I've been trying all sorts of different methods to accomplish this for about a week now. I feel like it's just my ignorance of the library getting in the way, but I have been all over the docs and forums. Any help or insights into the correct way to do this would be MUCH appreciated.

chesstrix
16 May 2012, 11:30 PM
I'd have a go at using the xTemplate method only just leave a marker for the chart.
Then programtically look for the markers and create/insert a chart for each one.

codehtmai
17 May 2012, 5:27 AM
Thanks for your reply. I originally thought about doing it that way, but I still couldn't figure out the best way to make the Gauge charts bind to the Store. When I assign the store to the Gauge, it just uses the first record. How can I tell it to use the next (or any other) record?