Results 1 to 2 of 2

Thread: Component's Height

  1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    11
    Vote Rating
    0
      0  

    Default Component's Height

    Hi,
    I have a long list of items defined using a simple div structure and put them into a component, which has been configured to scroll vertically, like so...
    Code:
    var listHtml = "<div>item 1</div><div>item 2</div><div>item 3</div><div>item 4</div>...<div>item 50</div>"
    
        var listPanel = new Ext.Component(
                {
                    layout: { type: 'vbox' },
                    scroll: 'vertical',
                    html: listHtml,
                    title: 'title'
                });
    The component itself is on a tabbed panel.

    If I don't set a height on the Component, then I only can only scroll to get the first say 10 items. On setting a height I can scroll to the bottom of the list.

    The problem I've got is that if I set the height to be suitable for an iPhone, then the list is too long/short for other devices. Equally if i change the orientation, the height is wrong.

    On the tabbed panel there is a property that can be set "fullscreen: true" which forces it to fill the available height. Is there a similar property that I can set on the component to achieve this?

    Or do i need to write some code to look at the device's screen size and orientation in order to figure out how big to make the component's height?

    Thanks,
    Darren.

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,211
    Vote Rating
    1005
      0  

    Default

    By putting an item inside a tab panel, the card is automatically sized to the height of the tab panel:

    Code:
    Ext.setup({
        onReady: function(){
            var main = new Ext.TabPanel({
                fullscreen: true,
                items: [{
                    title: 'Foo',
                    html: 'Foo'
                }]
            });
            
            setTimeout(function(){
                console.log(main.items.first().getSize());
            }, 1000);
        }
    });
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

Similar Threads

  1. Auto height for the last component in Layout
    By VadimV1144 in forum Ext GWT: Discussion
    Replies: 4
    Last Post: 12 May 2010, 1:16 AM
  2. How to make child component's height fit to parent?
    By aladdinwang in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 9 May 2010, 3:30 AM
  3. [2.0.1] Height of component with scrollbar
    By klausg in forum Ext GWT: Discussion
    Replies: 4
    Last Post: 30 Sep 2009, 8:26 AM
  4. Any way to have a component take 100% height of a Panel?
    By tdondich in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 25 Nov 2007, 1:10 AM

Posting Permissions

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