Question

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

Answer 1

请查看extjs documentation regarding buttons和extjs按钮示例。您可以使用xtypes在表单上轻松创建一个按钮。代码为：

{
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所述的秃鹰，您可以查看此代码：

制作资源/ images / default / button / btn.gif的副本，并将其命名为orange-btn.gif。
1. 编辑orange-btn.gif并将颜色更改为橙色（最简单的方法是使用图像编辑器调整色调）。
2. 将以下css规则添加到您自己的样式表中（如果尚未创建.css文件，则创建.css文件）：
  
  .orange-btn .x-btn-tl，.orange-btn .x-btn-tr，.orange-btn .x-btn-tc，.orange-btn .x- btn-ml ,. range- btn .x-btn-mr，.orange-btn .x-btn-mc，.orange-btn .x-btn-bl，.orange-btn .x-btn-br，.orange-btn .x-btn- bc { 背景图像：网址（/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将其添加到其他功能，以便在需要时进行更多操作。

如何设计一个按钮

2 个答案: