1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    7
    Vote Rating
    0
    slgatff is on a distinguished road

      0  

    Default Unanswered: Layout choice for text header and grid

    Unanswered: Layout choice for text header and grid


    Hi,

    I'm new to Ext JS 4 and was wondering if anyone can give me some advice on the layout to use when creating a panel that contains a text header followed by a grid (or possibly a chart). As the panel is resized, I want the text to use as much space as it needs to display without using a scrollbar, pushing the grid/chart down to make room. I have tried using the vbox layout, but with the flex sizing, it is difficult to control the amount of space between the text field and the grid, i.e., the larger the size of the panel, the greater the amount of space between the text field and the grid. Since the text is a description of the grid contents, I want the vertical space between the two components to be constant.

    Thanks for your time and advice,

    Steve

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    323
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    I have tried using the vbox layout, but with the flex sizing, it is difficult to control the amount of space between the text field and the grid.
    Could you post a code example of this? Controlling the space between items in a vbox should be straightforward. You could either use margins:

    http://docs.sencha.com/ext-js/4-0/#!...defaultMargins

    or add in a spacer component with a fixed height:

    Code:
    Ext.create('Ext.Component', {height: 12})

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    7
    Vote Rating
    0
    slgatff is on a distinguished road

      0  

    Default


    Skirtle,

    Thanks for taking the time to respond. Below is some test code. Note that when the page is initially rendered, the spacing between the text and the grid is exactly how I want it to be. As you make the panel larger, the spacing between the text and the grid increases. Likewise, if you shrink the window, the text will eventually add a vertical scrollbar. The behavior that I would like to see if the text area resizing so that it is always visible and the grid moving to maintain a constant vertical distance from the text.

    Thanks,

    Steve

    Code:
            
    Ext.create( 'Ext.panel.Panel',
            {
                title: 'Test',
                width: 500,
                height: 600,
                resizable: true,
                autoScroll: true,
                layout:
                {
                    type: 'vbox',
                    align: 'stretch',
                    padding: '15 5 15 5'
                },
                items:
                [
                    {
                        border: 0,
                        flex: 0,
                        autoScroll: true,
                        html: 'This is a text header describing the information in the grid below. This is a text header describing the information in the grid below. This is a text header describing the information in the grid below. This is a text header describing the information in the grid below. This is a text header describing the information in the grid below. This is a text header describing the information in the grid below. This is a text header describing the information in the grid below. This is a text header describing the information in the grid below. This is a text header describing the information in the grid below. This is a text header describing the information in the grid below. '
                    },
                    {
                        xtype: 'grid',
                        flex: 1,
                        border: 0,
                        title: '',
                        columnLines: true,
                        autoScroll: true,
                        store: Ext.create( 'Ext.data.JsonStore', 
                        {
                            fields: [ 'col1', 'col2', 'col3' ],
                            data: 
                            [
                                { 'col1': false,  'col2': 'string1',  'col3': 1 },
                                { 'col1': true,  'col2': 'string2',  'col3': 2 },
                                { 'col1': false,  'col2': 'string3',  'col3': 3 },
                                { 'col1': true,  'col2': 'string4',  'col3': 4 },
                                { 'col1': false,  'col2': 'string5',  'col3': 5 },
                                { 'col1': true,  'col2': 'string6',  'col3': 6 },
                                { 'col1': false,  'col2': 'string7',  'col3': 7 },
                                { 'col1': true,  'col2': 'string8',  'col3': 8 },
                                { 'col1': false,  'col2': 'string9',  'col3': 9 },
                                { 'col1': true,  'col2': 'string10',  'col3': 10 },
                                { 'col1': false,  'col2': 'string11',  'col3': 11 },
                                { 'col1': true,  'col2': 'string12',  'col3': 12 },
                                { 'col1': false,  'col2': 'string13',  'col3': 13 },
                                { 'col1': true,  'col2': 'string14',  'col3': 14 },
                            ],
                        }),
                        columns:
                        [
                            { header: 'Column 1', dataIndex: 'col1' },
                            { header: 'Column 2', dataIndex: 'col2', flex: 1 },
                            { header: 'Column 3', dataIndex: 'col3' }
                        ]
                    }
                ],
                renderTo: Ext.getBody()
            });

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    323
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    OK, I've had to resort to using TextMetrics to get this to work.

    Code:
    Ext.create( 'Ext.panel.Panel', {
        ...
        listeners: {
            resize: function(panel) {
                var textPanel = panel.down('[flag]');
                var el = textPanel.getTargetEl();
                var width = el.getWidth();
    
                var targetHeight = Ext.util.TextMetrics.measure(el.dom, el.dom.innerHTML, width).height;
    
                textPanel.setHeight(targetHeight);
            }
        },
        items: [
            {
                ...
                flag: true,
                html: 'This is a text ...'
            }, {
                xtype: 'grid',
                flex: 1,
                ...
            }
        ]
    });
    A few thoughts.

    Get rid of the flex: 0.

    The border config option is a boolean, true or false, not a number.

    I've added a flag property to the first panel. This is just so that I can grab it using a component query in my listener, there is nothing special about the word flag. I would advise finding a more elegant way to get a reference to that first child (at the very least I'd suggest not calling it flag). There are many ways to do this, I just picked the one that I could hack in fastest.

  5. #5
    Sencha User
    Join Date
    Sep 2011
    Posts
    7
    Vote Rating
    0
    slgatff is on a distinguished road

      0  

    Default


    Skirtle,

    Thanks again for your effort. I tested your solution and it works like a charm. The only thing I've noticed is that if I make the panel collapsible, the text is not rendered correctly if I change the size of the panel and then collapse and expand it (if I collapse/expand the panel without resizing, it renders correctly). I've stepped through the code in the chrome debugger and the resize event is triggered when the panel is expanded so I'm a little baffled. I added the same code to an 'expand' listener (which fired as expected), but it didn't help...

    Any ideas?

    Thanks,

    Steve

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    323
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Seems to be a bug in 4.0.2, the stretch isn't being applied correctly so the text ends up the wrong width. Works fine in 4.0.6. If you have a support contract I'd suggest upgrading.

    Otherwise, if you can wait for 4.1 then that'll be the easiest fix. There's supposed to be a blog post sometime this week giving an update on 4.1 progress.

    I couldn't find a simple way to fix it using 4.0.2 but I see no reason why you couldn't manually set the width of the text panel in the resize handler based on the width of the parent panel.

  7. #7
    Sencha User
    Join Date
    Sep 2011
    Posts
    7
    Vote Rating
    0
    slgatff is on a distinguished road

      0  

    Default


    Skirtle,

    Since we are still evaluating the product, I can't upgrade to 4.0.6. I'm wondering if a lot of the other issues I'm having are related to bugs in 4.0.2 that have been fixed. For example, I'm having all kinds of issues making my test apps stateful; when using a tab panel, selecting any tab except the first doesn't display the contents of the tab, just a blank screen. If I manually select another tab and then return to the tab that was saved with the state, the components display. However, if the elements of the tab use a border layout, the sizes of regions are generally broken on all of the tabs except the selected one after a refresh. I've made sure that all the components I've defined have a stateId, and added getState configuration for the tab panels (like I've seen in all the examples). If I turn off the initialization of the state manager, the panels display as expected.

    Another thing that doesn't seem to work is displaying an "empty text" message in a grid with no data; seems like it should be a single line addition to the grid configuration, but I can't get it to display the message.

    Do you know if these issues exist in 4.0.2 and if I should expect they'll be fixed in 4.1? I went through the README file and didn't see many bugs related to saving state or any issues with the grid "emptyText" configuration in releases after 4.0.2.

    I could create other threads with examples of these behaviors, but I'm wondering if it's worth the effort, or if I should just wait to download/evaluate v4.1.

    Thanks,

    Steve

  8. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    323
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    There have been lots of fixes since 4.0.2 but I really couldn't tell you whether they're for those particular issues. If I were you I'd have a search on the bugs forum. If they're straightforward bugs in common functionality then someone else is bound to have reported them by now. If you can't find them then chances are it's a bug in your code.

Thread Participants: 1