How to design a Button

I am working on a form which is designed in EXTJS. I want to add a button on a FormPanel. The width, Height and color of that button can be customized. How to achieve that - pls sugges开发者_如何学Ct.

---

please have a look on extjs documentation regarding buttons and extjs examples for buttons. you can easily create a button on your form using xtypes.here is the code:

{
xtype: 'button',
text: 'New patient',
//width of your button
width:80,
//width of your button
height:50,
//The path to an image to display in the button (the image will be set as the    background-image CSS property of the button by default, so if you want a mixed icon/text button, set cls:'x-btn-text-icon')
icon:'button.png',
//the function to be executed when the button is clicked
handler: function(){}
                                          }

Regarding colors,as condor stated on this forum post you may check this code:

1. Make a copy of resources/images/default/button/btn.gif and name it orange-btn.gif.

   1. Edit orange-btn.gif and change the color to orange (the easiest way is to use an image editor to adjust the hue).

   2. Add the following css rule to your own stylesheet (create a .css file if you haven't done so yet):

      .orange-btn .x-btn-tl, .orange-btn .x-btn-tr, .orange-btn .x-btn-tc, .orange-btn .x- btn-ml, .orange-btn .x-btn-mr, .orange-btn .x-btn-mc, .orange-btn .x-btn-bl, .orange-btn .x-btn-br, .orange-btn .x-btn-bc { background-image:url(/orange-btn.gif);

(substitute correct path to orange-btn.gif) 4. Include this css file in your HTML page (if you haven't done so yet). 5. Add the following line to the config object of the buttons you want colored orange:

ctCls: 'orange-btn'

ps. For grouped buttons and menu buttons you'll need to copy and edit additional images and add additional css rules.

---

Another option is

var myButton = new Ext.Button({
    text: 'New patient',
    width : 80,
    height : 50,
    handler: function(){
        Ext.Msg.Alert('Alert','You clicked me!');
    }
});

Have a separate button as a variable can allow you to add it to other functions through createDelegate for more manipulation if you need.