Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    15
    Answers
    1
    Vote Rating
    0
    JeaffreyGilbert is on a distinguished road

      0  

    Question Answered: Advance List Layout

    Answered: Advance List Layout


    Design:

    list.jpg

    Requirements:
    - It has docked top toolbar, and docked top other panel (will use it as search panel)
    - List A, as selected list
    - List B, as unselected list
    - Gradient grey bar is a header of each list
    - Except toolbar and search panel are scrollable.
    - Clicking green button moves selected row to list A
    - Clicking red button moves selected row to list B
    - List B must anchor to bottom (fill the rest area)

    What I'd like to ask is how to layout both list A and B? I'm lost, please help. Thanks.

    Code:
    var list1 = new Ext.List({
        fullscreen: ??,
        layout: ??
    });
    
    var list2 = new Ext.List({
        fullscreen: ??,
        layout: ??
    });
    
    var pnlList = new Ext.Panel({
        fullscreen: ??,
        layout: ??,
        items:[list1, list2]
    });
    
    new Ext.Application({
        launch: function() {
            new Ext.Panel({
                fullscreen: true,
                layout: 'fit',
                dockedItems: [toolbar, pnlSearch],
                items: [pnlList]
            });
        }
    });

  2. Jeaffrey,
    why don't you use a single grouped list?
    You could add to your Store Model a new field called, for istance, "selected".
    Then in your list template config, you can set a different template for selected / deselected items, and, the last thing, you will handle the items disclose / tap event to check if the selected item is selected or not, update the "selected" field on that item and that's all.

    I think that would be a better solution.
    However, it's not good to have a single scroller for two list, it doesn't have too much sense

    Hope this helps.

  3. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Hi Jeaffrey.
    To set your application layout as you request, you can simply code it in the following way:

    Code:
    var list1 = new Ext.List({
        flex: 1
     });
    
    var list2 = new Ext.List({
        flex: 2
    });
                
    var viewport = new Ext.Panel({
        fullscreen: true,
        layout: {
            type: 'vbox',
            align: 'stretch'
         },
         dockedItems: [toolbar, pnlSearch],
         items: [list1, list2]
    });
    Setting the viewport layout type to 'vbox' you are asking to arranges items vertically down the Panel, and, setting the layout align to 'stretch' you want that the list will cover all the available width of the container viewport.

    The Lists 'flex' properties will allow you the specify the height ratio that each list have to cover of the available container viewport height.

    To see more information about VBoxLayout, take a look at it's official doc.
    http://dev.sencha.com/deploy/touch/d...out.VBoxLayout

    PS: Remember to set your list templates and stores.

    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  4. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    15
    Answers
    1
    Vote Rating
    0
    JeaffreyGilbert is on a distinguished road

      0  

    Default


    @andreacammarata
    Thanks! It works but it's little bit different with the design. Can we make only one scroller? I think the list1's height should be dynamic and if we scroll down, it will scroll both the list1 and list2.

  5. #4
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by JeaffreyGilbert View Post
    @andreacammarata
    Thanks! It works but it's little bit different with the design. Can we make only one scroller? I think the list1's height should be dynamic and if we scroll down, it will scroll both the list1 and list2.
    Sure!
    Just add a listener to your first list like follows

    Code:
    list1.scroller.on('scroll', syncScrollers);
    then define your "syncScrollers" function in the same scope of your list components that will handle the two list scrolling sync.
    (For istance)

    Code:
    var syncScrollers = function(scroller, offsets){
        list2.scroller.scrollTo(offsets);
    }
    As you can see that's pretty simple

    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  6. #5
    Sencha User
    Join Date
    Nov 2010
    Posts
    15
    Answers
    1
    Vote Rating
    0
    JeaffreyGilbert is on a distinguished road

      0  

    Default


    Sorry, still doesn't meet the requirement..

    Left is yours, the right image is what I mean:

    list2.jpg

  7. #6
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Wait...just think about it:
    If you have only one scroller to scroll both list, what happens if your second list have more items then the first one? You would be never able to see all the second list items.
    Don't you agree?
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  8. #7
    Sencha User
    Join Date
    Nov 2010
    Posts
    15
    Answers
    1
    Vote Rating
    0
    JeaffreyGilbert is on a distinguished road

      0  

    Default


    On page load, the list1 is empty (also hide its gray header) , we only see list2. We add one by one from list2 to list1 (first adding, show gray header), so list1 will push list2 down. List2 may be unseen and we have to scroll down to see list2. So does if we remove item from list1 one by one, list2 will move up.

  9. #8
    Sencha User
    Join Date
    Nov 2010
    Posts
    15
    Answers
    1
    Vote Rating
    0
    JeaffreyGilbert is on a distinguished road

      0  

    Default


    Aah.. am I talking about the way grouped list is working?? I don't know if I need only one list actually.

    Please advice.

  10. #9
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Jeaffrey,
    why don't you use a single grouped list?
    You could add to your Store Model a new field called, for istance, "selected".
    Then in your list template config, you can set a different template for selected / deselected items, and, the last thing, you will handle the items disclose / tap event to check if the selected item is selected or not, update the "selected" field on that item and that's all.

    I think that would be a better solution.
    However, it's not good to have a single scroller for two list, it doesn't have too much sense

    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  11. #10
    Sencha User
    Join Date
    Sep 2011
    Posts
    13
    Answers
    1
    Vote Rating
    1
    hugesuccess is on a distinguished road

      0  

    Default I am stuck on this too :-(

    I am stuck on this too :-(


    I would like to add multiple lists, stacked on top of each other. I want my mobile app to look like {huffington post, espn, la times, etx.}. Ideally it would have one list with fancy pictures, then directly under it would have another list with text links. They should all scroll as one. So you would see list one {nice big images or something cool, ie: featured content}, then scroll down to list two{text links, ie: navigation}, then list 3 etx. They all have different models, so using the same list seems creepster. Is this at all possible?