Page 1 of 3 123 LastLast
Results 1 to 10 of 27

Thread: Layout Question

  1. #1
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default Layout Question

    I spent several hours over the weekend trying to get a specific layout to work, but couldn't.

    I have a viewport with north/south/east/west/center. The center is a card layout. In the card layout, I wanted to implement something (exactly) like viewing a thread on this message board.

    So I figure I want a panel to put in the center/card layout. The bbar is a paging toolbar. The store is 1 to 20 posts/comments.

    Look at any thread on this site. It seems like each post would be a panel (see attachment). The title would be the blue bar with the post date/time. The panel itself would be border layout (others might work), with west region being the user bit (avatar, user name, user group title, # posts, etc.) and the center region being the post content. The bbar would be the "add reputation," "report post", "reply," "reply with quote" buttons.

    In my store's onload handler, I implemented code that removed all items from the "thread" panel and then added a series of new panels to it, one per post. (It was horribly slow, ExtJS 3.2.1 BTW).

    The issues I faced were the post panels wouldn't render with any height. All that was visible were the title and bbar. The default/component layout docs say that the child items are NOT resized, which makes sense. Some permutations of config options I tried giving a fixed height: did work. I tried form layout, vbox layout, anchor layout, and just about every other layout that made sense, and none of those autoHeight sized the post panels.

    Other issues I had were getting scrollbars on the panel - if there were enough posts that the center region of the card layout needed to vertical scroll. In almost every permutation of config options I tried, and nesting panels and so on, I could only get a vertical scrollbar with a horizontal scrollbar as well that scrolled right about 20 pixels. Or posts initially rendered and visible (e.g. don't need to scroll to make them visible) would be too wide (the scrollbar obscured the right side of the posts) but the ones I scrolled down to see were rendered proper width.

    I ended up with a working solution that was based upon pure HTML. I used <div class="x-panel-title" (or whatever the class is) to make the title bar look proper. I used a table to simulate the post content/user bit. I added a div with an id determined by the post # and added Ext.Toolbar with renderTo or applyTo to those divs to get the bbar effect. I keep track of the toolbars in an array so I can call destroy() on them when the panel is destroyed or the store reloaded.

    Am I missing something?
    Capture.PNG

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    The panel inside the card layout should be layout:'anchor' and the individual post panels should be anchor:'-'+Ext.getScrollBarWidth().

    ps. Also have a look at my ComponentDataView user extension.

  3. #3
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default

    One more thing...

    If you do:
    var n = node.removeChild(someNode, false);
    node.insertBefore(n, node.firstChild);

    I'm not seeing the node displayed anymore.

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    A tree knows how to move nodes; you don't need to remove a node first.

  5. #5
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default

    Ah, but I do.

    The tree in question is something like a history display. I want the most recently selected node moved to the top.

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    I mean, you just insert a node that is already in the tree somewhere else. The tree will automatically move the node in that case.

    So you only need:
    Code:
    node.insertBefore(someNode, node.firstChild);

  7. #7
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default

    Thanks Condor, I'll try it.

    This raises a good question, I think. What's the point in having the remove() function's 2nd parameter?

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Good question. I don't see it used anywhere...

  9. #9
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default

    One more point to raise, and it may be a bug. Feel free to split this post off into a thread and move it accordingly.

    With a panel and preventBodyReset to true, the following code does not work as expected in chrome:
    Code:
    <table border="0" cellspacing="0" cellpadding="0">
    <tr><td style="border: 1px solid">...</td><td style="border: 1px solid">...</td>...</tr>
    </table>
    You don't get cellspacing of 0, it's actually 2 because of a browser specific attribute that isn't being reset. -webkit-border-horizontal-spacing and -webkit-border-vertical-spacing should be 0 but are 2.

    A plain HTML page with the above HTML renders properly in Chrome. Those webkit attributes are 0 by default. I mean, in the panel, you see two bordered cells with a gap of 4 px between them, but in the plain HTML page, there is no gap.

    Cheers

  10. #10
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Yes, that's a bug.

    ps. Could you repost it? I haven't figured out yet how to split off a single post from a thread into a new thread.

Page 1 of 3 123 LastLast

Similar Threads

  1. Layout question
    By hiinsu in forum Ext GWT: Discussion
    Replies: 3
    Last Post: 25 Jun 2010, 9:14 AM
  2. Layout Question (Column Layout in Window)
    By ikk0 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 5 Apr 2008, 10:19 AM
  3. Layout Question
    By larlib in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 30 Jan 2008, 9:10 AM
  4. Question about Layout
    By tjshin in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 14 Jun 2007, 8:08 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •