如何设计按钮

Question

我正在使用EXTJS中设计的窗体。我想在FormPanel上添加一个按钮。该按钮的宽度，高度和颜色可以自定义。如何实现这一点 - 请提出建议。

Answer 1

请看看extjs documentation regarding buttons和extjs按钮的例子。 您可以轻松地创建使用xtypes.here表单上的按钮是代码：

{ 
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(){} 
              } 

关于颜色，秃鹰在this forum post说，你可以检查此代码：

1. 制作的副本resources/images/default/button/btn.gif并将其命名为orange-btn.gif。

   1. 编辑orange-btn.gif并将颜色更改为橙​​色（最简单的方法是使用图像编辑器调整色调）。

   2. 添加下面的CSS规则您自己的样式表（创建.css文件，如果你还没有这样做还）：

      .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）;

（替代正确的路径橙btn.gif） 4.在HTML页面此css文件（如果您尚未这样做）。 5.下列行添加到按钮的配置对象，你要为橙色：

ctCls: 'orange-btn' 

PS。对于分组按钮和菜单按钮，您需要复制和编辑其他图像并添加额外的CSS规则。

Answer 2

另一种选择是

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

有一个单独的按钮，一个变量可以让你，如果你需要添加到通过createDelegate方法等功能的详细操作。