Results 1 to 8 of 8

Thread: Issue with Layout

  1. #1

    Default Issue with Layout

    Hi,

    I am newbie, trying to create simple layout for home page.

    this is my home.js
    // application main entry point
    Ext.onReady(
    function() {

    var north = new Ext.Panel({
    id:
    'north',
    region:
    'north',
    height:100,
    html:
    'North',
    border:
    false,
    title:
    'North'

    });


    var center = new Ext.Panel({
    id:
    'center',
    region:
    'center',
    height:100,
    html:
    'Center',
    border:
    false,
    title:
    'Center'

    });

    var south = new Ext.Panel({
    id:
    'south',
    region:
    'south',
    height:100,
    html:
    'South',
    border:
    false,
    title:
    'South'

    });

    ?
    var viewPort = new Ext.Viewport({
    layout:
    'border',
    border:
    false,
    items: [north, center, south]
    });

    });


    this is my topToolbar.js

    Ext.onReady(
    function(){
    Ext.QuickTips.init();

    var prizeButton = new Ext.Toolbar.SplitButton({
    text:
    'Prize',
    handler: onButtonClick,
    tooltip: {text:
    'Manage Prize'},
    iconCls:
    'blank',
    menu : {
    items: [
    {text:
    'Get All Prize', iconCls: 'blank', handler: onItemClick},
    {text:
    'Create Prize', iconCls: 'blank', handler: onItemClick}
    ]
    }
    })

    var toolbar = new Ext.Toolbar({
    region:
    'north',
    height: 30,
    items: [prizeButton]
    });

    function onButtonClick(btn){
    alert(btn.text);

    }

    function onItemClick(item){
    alert(item.text);
    }

    });

    and this is my home.html
    <
    html>

    <head>

    <linkrel="stylesheet"type="text/css"href="/iwe/js/ext-3.0.0/resources/css/ext-all.css"/>

    <scripttype="text/javascript"src="/iwe/js/ext-3.0.0/adapter/ext/ext-base.js"></script>

    <scripttype="text/javascript"src="/iwe/js/ext-3.0.0/ext-all.js"></script>

    <scripttype="text/javascript"src="/iwe/js/ext-3.0.0/ext-all-debug.js"></script>
    <scripttype="text/javascript"src="/iwe/js/iwe/home/home.js"></script>

    </head>

    <body>
    <scripttype="text/javascript"src="/iwe/js/iwe/home/topToolbar.js"></script>
    </body>

    </html>


    i have region:'north' in topToolbar but it is not working.

    am i missing something

    Thanks a lot
    T

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    first off, use CODE tags to wrap your code snippets in the future.

  3. #3
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    try adding the toolbar as a tbar property of the NORTH panel. Remove the region param for the Toolbar. Likewise, remove height, unless you really want to control height.

  4. #4

    Default

    This did not work for me
    here is the change i made

    // modify topToolbar.js
    Code:
    var toolbar = new Ext.Toolbar({
         items: [prizeButton]
     });
    // modify home.js
    Code:
     
    var north = new Ext.Panel({
         id:'north',
      region:'north',
      height:100,
      html:'North',
      border:false,
      title:'North',
      tbar:toolbar
        });
    i have two other files prize.html
    Code:
     
    <html>
     <head>
      <link rel="stylesheet" type="text/css" href="/iwe/js/ext-3.0.0/resources/css/ext-all.css" />
      <script type="text/javascript" src="/iwe/js/ext-3.0.0/adapter/ext/ext-base.js"></script>
      <script type="text/javascript" src="/iwe/js/ext-3.0.0/ext-all.js"></script>
      <script type="text/javascript" src="/iwe/js/ext-3.0.0/ext-all-debug.js"></script> 
      <script type="text/javascript" src="/iwe/js/iwe/home/home.js"></script>
       </head>
     <body> 
      <div id="adsense-center" class="adsense" style="margin:4px"> 
      <script type="text/javascript" src="/prizes.js"> 
      </script> 
      </div> 
     </body> 
    </html>
    and prize.js
    Code:
     
     
        var store = new Ext.data.JsonStore({
            root: 'prizes',
            totalProperty: 'totalCount',
            idProperty: 'threadid',
            remoteSort: true,
            fields: ['id', 'description'],
            proxy: new Ext.data.HttpProxy({
                url: '/getPrizes'
            })
        });
     
    var grid = new Ext.grid.GridPanel({
         region:'center',
            width:700,
            height:500,
      title:'Prizes',
      store: store,
      loadMask: true,
            columns:[{id: 'id', header: "Id", dataIndex: 'id', align: 'right', sortable: true },
      {id: 'description', header: "Description", dataIndex: 'description', sortable: true }],
       scope: this
      }
     },
            frame:true,
            width: 700,
            height: 450,
            collapsible: true,
            animCollapse: false,
            title: 'Prizes',
            iconCls: 'icon-grid'
        });
    when i click on menu inside toolbar i want this prize.html to be render inside center panel, so i assiged region: 'center' inside grid.

    i think i might be missing some basic stuff

    Thanks a lot for your help

  5. #5
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    OK, is the toolbar reference actually in global space? Why not just move it to the Home.js file??

  6. #6

    Default

    That should not be a problem, i made that change and it works, Thanks

    I am still having issue with : while click on a menu in toolbar, prize.html should be open in center panel!

  7. #7
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    Prize.html? You're loading Ext JS twice on the same page?

  8. #8

    Default

    then how will i open some other page in center panel? when home page is loading, i have some static text in center panel. and when user click on a menu inside a topToolbar, i want to load prize.js or in other cases i want to display some jsp over in center panel, how would i be able to do that!

Posting Permissions

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