如何設計按鈕

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方法等功能的詳細操作。