Search code examples
extjssencha-touch-2sencha-architect

Dataview List and items

I am looking at a different way of doing my application.

Actually It's kind of static. My Projects have Categories. Each Category has Subcategories. Categories are containers and Subcategories are element which have values that can be edited.

After analysis of the data , we saw that it was not enough general for it. We are now looking at a Tree Structure. Doing so, we would have Projects filled with Folders/Categories) and those Folders would be filled with other Category/Folders or with SubCategories/Items/Files. That way we can go has deep has we want in complexity.

That is doable, I know it. What I need to know is how hard it will be to implement it in the app.views...

Is it possible to have a single Ext.DataView.dataview display different Ext.DataView.component.DataItem side by side.

Exemple : Having a row in my List that shows a slider and update itself according to it, but that on the 2nd row it is an arrow that on click would open the next level of my Tree.

Visual:

DataView_List

Small Car---------------------------Label------------------------SLIDER

Fuel----------------------------------Label------------------------------ >

SUV----------------------------------Label------------------------TxtField

Small Car and SUV are leaves with different template and Fuel is a category/folder that need to open on click.

So I already have 3 differents templates that would need to show in the same dataview list.

How should I proceed to achieve such results? Is Dataview List the way to good or should I implement my own kind of list inside a container?

Solution

  • If you want to present different kinds of data inside one list or dataview - you can achieve by following strategy:

    • You still need to use one store to keep it all
    • In the model class include something like 'record_type' field indicating what kind of data you have
    • Combine all data you need into one model
    • Create a template that based on the 'record_type' would render different content

    Here is how your template would look like:

    <tpl switch="record_type">
    <tpl case="car">
      <div>CAR + SLIDER</div>
    <tpl case="fuel">
      <div>FUEL + LABEL</div>
    <tpl default">
</tpl>

    This is screenshot from my list which contains multiple record types and uses this approach:enter image description here