1. #1
    Ext User
    Join Date
    Nov 2008
    Posts
    17
    Vote Rating
    0
    nikhilwalker is on a distinguished road

      0  

    Default How to add Buttons in Horizontal Layout

    How to add Buttons in Horizontal Layout


    Hi All,

    I am new to ext js and has been reading and practicing ExtJs framework from last 2 days.

    I am able to understand the controls but I am facing problem while using the widgets in combination. For example I want to create a form (for data entry) which should have the buttons arranged in horizontal layout.

    I have attached the wireframe.

    I am trying to use the Panel to arrange the buttons but not able to get the required layout.

    Can any one please help?
    Attached Images

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,126
    Vote Rating
    516
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Use a column layout, something like:

    Code:
    var p = new Ext.Panel({
       layout: 'column,
       layoutConfig: {columns: 3},
       width: 400,
       height: 30,
       defaultType: 'button',
       items: [{
          text: 'b1',
          columnWidth: 0.33
       },{
          text: 'b2',
          columnWidth: 0.33
       },{
          text: 'b3',
          columnWidth: 0.34
       }]
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Nov 2008
    Posts
    17
    Vote Rating
    0
    nikhilwalker is on a distinguished road

      0  

    Default Gettin erro

    Gettin erro


    Hi Evan,

    Thanks for your reply.

    With your code snippet I created the following code:
    var ShowLayout = function()
    {
    init: function()
    {
    var p = new Ext.Panel
    (
    {
    layout: 'column',
    layoutConfig: {columns: 3},
    width: 400,
    height: 30,
    defaultType: 'button',
    items:
    [
    {
    text: 'b1',
    columnWidth: 0.33
    },
    {
    text: 'b2',
    columnWidth: 0.33
    }
    ,
    {
    text: 'b3',
    columnWidth: 0.34
    }
    ]
    }
    );
    }

    }


    Ext.onReady(ShowLayout.init, ShowLayout, false);

    But when I open it in browser (FF) I am getting error:
    E.fireFn has no properties
    http://localhost/ext-2.2/ext-all.js
    Line 12

  4. #4
    Ext User
    Join Date
    Nov 2008
    Posts
    17
    Vote Rating
    0
    nikhilwalker is on a distinguished road

      0  

    Default Solved the issue

    Solved the issue


    I think I solved the issue. The error was there since I was not adding the Panel to any Layout. I added the panel to a layout and it is rendering the buttons.

    Now I am trying to attach event (click) handler to one of the button.

    The code is as below:
    p = new Ext.Panel
    (
    {
    layout: 'column',
    layoutConfig: {columns: 3},
    width: '100%',
    height: 30,
    //title:'test',
    defaultType: 'button',
    items:

    [
    {
    text: 'b1',
    columnWidth: 0.33,
    click:{ fn:MyEvent, scope: this }
    },
    {
    text: 'b2',
    columnWidth: 0.33
    }
    ,
    {
    text: 'b3',
    columnWidth: 0.34
    }
    ]

    }
    )

    MyEvent is defined as:
    function MyEvent(o)
    {
    alert('myEvent');
    }

    However when I click the button alert is not displayed.

    Is it the correct way to add the event to button?

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    It's even easier in a table layout.

    Just add an item like this to your Panel

    Code:
    {
       xtype: 'container',
       layout: 'table',
       autoEl: {},
       layoutConfig: {columns: 3},
       defaultType: 'button',
       items: [{
          text: 'b1'
       },{
          text: 'b2'
       },{
          text: 'b3'
      }]
    }
    And you will have 3 buttons in onw row.

  6. #6
    Sencha User
    Join Date
    Aug 2012
    Posts
    2
    Vote Rating
    0
    aasshishpatil is on a distinguished road

      0  

    Default


    Hi All,

    I am also new to ext js and has been reading and practicing ExtJs framework
    I am facing exactly oppsite issue. i want three buttons align horizontally.
    like
    1 button
    2 button
    3 button..

    Can any one please help?

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar