1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    83
    Vote Rating
    4
    Answers
    2
    cydaps is on a distinguished road

      0  

    Default Answered: Complex Layout with Sencha Touch 2 - Lists or panels with tap listeners?

    Answered: Complex Layout with Sencha Touch 2 - Lists or panels with tap listeners?



    Hi!

    I'm struggling with a requirement for an app. I just can't get my head around how to handle the requirement due to several factors which hopefully I can explain below. I was wondering whether anyone could just give me a hint as to how the problem may be solved with the layout please as I'm stumped?

    Below is an example of the requirement. So this is a Panel that needs to display the following data. The first section is just html content that's fine, it's a Panel.

    The next section consists of 3 sections of data. It looks like a List would probably handle this, however whilst the data comes from the same source, the actual data itself is very different. Also, each section has to load a different Panel/Container into the Viewport. I've thought about receiving HTML from the data source and simply populating the itemTpl with the HTML received, but then I've got to somehow link each item in the List to load a different Panel/Container. I tried doing this with Panels, but obviously there's no default tap UI for Panels which makes lists appealing.

    I've also tried with List and XTemplate, creating a different template based upon the data being received. This works visually but then I'm lost as to how to load a different Panel/Container on tap.

    Then there's the last section, the list with the icons in the example below. Again this is simple, just a List, but again I then have to try and define which Panel/Container to load based upon the tap. These can be hard coded into the List using data: [] for the text and icon, so visually that's pretty easy....

    I'd hugely appreciate any thoughts on this please, it's basically the Section 1, Section 2 and Section3 that are causing me the headache...

    Thanks so much!!!



    complex layout example for sencha touch.jpg
    Attached Images

  2. Well I managed to solve this by using panels that I've made clickable.

  3. #2
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    83
    Vote Rating
    4
    Answers
    2
    cydaps is on a distinguished road

      0  

    Default Just found this....

    Just found this....


    Just found this http://www.sencha.com/forum/showthre...plex-List-View thread (typical after searching for a day and then posting!!) which goes some way to answering my questions I think, but I'd still really appreciate anyone's thoughts as to how they might handle this.

    Thanks!

  4. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    83
    Vote Rating
    4
    Answers
    2
    cydaps is on a distinguished road

      0  

    Default


    Basically a good example of what I'd like to achieve is the IMDB app, on the home screen. There are links that appear to be a list but I imagine that in Xcode there is presumably some kind of element that is like a panel but can be linked with a tap event and gives a UI change on event.

    Been experimenting as much as possible with this. Latest issue I've now found with using Lists is that the vertical scroll is on the individual list, not the entire screen, so the lists end up scrolling within their own holder. Is there a way to force the entire list to display without scrolling? I've tired height: 'auto' but this breaks the layout. I've tried vbox as the main Panel layout so that I could place the other items into the Panels. If I try layout: "fit" I end up losing other content on the page...

  5. #4
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    83
    Vote Rating
    4
    Answers
    2
    cydaps is on a distinguished road

      0  

    Default Xero Dashboard

    Xero Dashboard


    Here's another option. The Xero dashboard is pretty neat, I've tried everything I can to replicate the boxing of the items as you can see there, but not sure how it's done. I've try using Chrome to view the DOM but I have the feeling there's some customization done to get the lists with the heading. I can figure out the list, that's done I believe with XTemplate in the itemTpl, but how did they get the headers like "Bank Balances", "Invoices" and "Expenses" etc...?

    Thanks so much for any help!!

    xero dashboard.JPG

  6. #5
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    83
    Vote Rating
    4
    Answers
    2
    cydaps is on a distinguished road

      0  

    Default Solved

    Solved


    Well I managed to solve this by using panels that I've made clickable.

  7. #6
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    83
    Vote Rating
    4
    Answers
    2
    cydaps is on a distinguished road

      0  

    Default


    Sorry, still struggling with this, it was working but the moment I placed this inside a navigationView it all went to pot.... There must be a means of doing this, anyone got any ideas?