Results 1 to 5 of 5

Thread: Problems loading List Into Existing Container

  1. #1
    Ext User
    Join Date
    Dec 2010
    Posts
    3
    Vote Rating
    0
      0  

    Post Problems loading List Into Existing Container

    Hi,
    I am new to using Sencha, and I'm really excited to learn more about its capabilities.

    Unfortunately, I have run into a problem that I have been trying to fix for hours.

    My first page loads with an image, and a top/bottom docked menu.
    I would like the list to load under the Main intro image, and scroll within itself without going under the docked toolbars.

    First, list will not show unless it force it to fullscreen mode.
    Second, if the list loads, a section of it is hidden under the toolbars, so you end up not seeing the first and the last item in the list.

    Is there a workaround for this? Or am I doing something wrong with my code?

    I'm sure that this is a very simple fix, but I have no clue what I am doing yet.

    I've also attached two images of what the outcome is if I allow the list to go fullscreen vs not.

    [ATTACH]Image 1[/ATTACH]
    [ATTACH]Image 2[/ATTACH]

    Any help would be great!

    Thanks


    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function() {
        
            var buttonsSpecTop = [
            //    { ui: 'back', text: 'Back' },
                { xtype: 'spacer' },
            //    { ui: 'forward', text: 'Forward' }
            ]
        
            var buttonsSpecBottom = [
                { ui: 'normal', text: 'Normal' },
                { ui: 'confirm', text: 'Confirm' }
            ]
        
            
            var tapHandler = function (btn, evt) {
                alert("Button '" + btn.text + "' tapped.");
            }
            
            
            var red = {
                style: "background-color:red",
                title: "Red", html: "I would like the list to load under the Main intro image, and scroll within itself without going under the docked toolbars"
            }
            
            var dockedItems = [{
                xtype: 'toolbar',
                title: 'Test App',
                ui: 'dark',
                dock: 'top',
                items: buttonsSpecTop,
                defaults: { handler: tapHandler }
            },
            {
                xtype: 'toolbar',
                ui: 'dark',
                dock: 'bottom',
                items: buttonsSpecBottom,
                defaults: { handler: tapHandler }
            }
            
            ]
        
            
            new Ext.Panel ({
                id: 'buttonsPanel',
                fullscreen: true, 
                layout: {
                    type: "vbox",
                    align: "stretch"
                },
                items: [
                    { html: '<div class="home_img"><img src="http://images.apple.com/v20101213150339/startpage/images/promo_beatles20101122.jpg"></div>'},
                    red
                    ],
                dockedItems: dockedItems
            });
            
            
            
            Ext.regModel('Contact', {
                fields: ['firstName', 'lastName']
            });
    
            var store = new Ext.data.JsonStore({
                model  : 'Contact',
                sorters: 'lastName',
    
                getGroupString : function(record) {
                    return record.get('lastName')[0];
                },
    
                data: [
                    {firstName: 'Tommy',   lastName: 'Maintz'},
                    {firstName: 'Rob',     lastName: 'Dougan'},
                    {firstName: 'Ed',      lastName: 'Spencer'},
                    {firstName: 'Aaron',   lastName: 'Conran'},
                    {firstName: 'Dave',    lastName: 'Kaneda'}
                ]
            });
    
            var list = new Ext.List({
               // fullscreen: true,
    
                itemTpl : '{firstName} {lastName}',
                grouped : true,
                indexBar: true,
    
                store: store
            });
    Attached Images Attached Images
    Last edited by diggidydaz; 19 Dec 2010 at 2:37 PM. Reason: Updated Image

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

    Default

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function(){
        
            var dockedItems = [{
                xtype: 'toolbar',
                title: 'Test App',
                ui: 'dark',
                dock: 'top',
                items: [{
                    xtype: 'spacer'
                }]
            }, {
                xtype: 'toolbar',
                ui: 'dark',
                dock: 'bottom',
                items: [{
                    ui: 'normal',
                    text: 'Normal'
                }, {
                    ui: 'confirm',
                    text: 'Confirm'
                }],
            }];
            
            Ext.regModel('Contact', {
                fields: ['firstName', 'lastName']
            });
            
            var store = new Ext.data.JsonStore({
                model: 'Contact',
                sorters: 'lastName',
                
                getGroupString: function(record){
                    return record.get('lastName')[0];
                },
                
                data: [{
                    firstName: 'Tommy',
                    lastName: 'Maintz'
                }, {
                    firstName: 'Rob',
                    lastName: 'Dougan'
                }, {
                    firstName: 'Ed',
                    lastName: 'Spencer'
                }, {
                    firstName: 'Aaron',
                    lastName: 'Conran'
                }, {
                    firstName: 'Dave',
                    lastName: 'Kaneda'
                }]
            });
            
            var list = new Ext.List({
                itemTpl: '{firstName} {lastName}',
                grouped: true,
                indexBar: true,
                flex: 1,
                store: store
            });
            
            
            new Ext.Panel({
                id: 'buttonsPanel',
                fullscreen: true,
                layout: {
                    type: "vbox",
                    align: "stretch"
                },
                items: [{
                    height: 155,
                    html: '<div class="home_img"><img src="http://images.apple.com/v20101213150339/startpage/images/promo_beatles20101122.jpg"></div>'
                }, list],
                dockedItems: dockedItems
            });
        }
    });
    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.

  3. #3
    Ext User
    Join Date
    Dec 2010
    Posts
    3
    Vote Rating
    0
      0  

    Default

    It works.
    Thank you for your help!

  4. #4
    Sencha User
    Join Date
    Dec 2010
    Location
    HKSAR
    Posts
    17
    Vote Rating
    0
      0  

    Default

    Hi
    I am also new here.
    I edited your code as follows:
    1. I removed the bottom toolbar.
    2. I modified the line
    items: [
    list, {
    height: 155,
    html: '<div id = "footer">last update on 22nd December 2010</div>'
    }],
    in your Ext.Panel config object.

    But it does not work!
    Is there any way to add a footer area, instead of the image, and let the list scroll between the toolbar and the footer?
    Last edited by agentyikes; 21 Dec 2010 at 8:20 PM. Reason: modified for more information

  5. #5
    Sencha User
    Join Date
    Dec 2010
    Location
    HKSAR
    Posts
    17
    Vote Rating
    0
      0  

    Default

    Fixed!

Similar Threads

  1. insert list inside existing htlm
    By Michou in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 9 Sep 2010, 5:23 AM
  2. Add image to existing List
    By newbie1 in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 19 Aug 2010, 6:31 PM
  3. Adding existing panel to a new container like tabpanel
    By Wolfgang in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 24 Jan 2008, 1:54 AM
  4. Rendering a Panel to an Existing Container
    By dayres in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 3 Dec 2007, 12:49 PM
  5. Replies: 3
    Last Post: 4 Jul 2007, 8:54 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
  •