ボタンをデザインするには

Question

私はEXTJSで設計されたフォームで作業しています。 FormPanelにボタンを追加したいと思います。そのボタンの幅、高さ、色をカスタマイズすることができます。それを達成するには - plsが示唆しています。

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を編集し、色をオレンジ色に変更します（最も簡単な方法は、画像エディタを使用して色合いを調整することです）。 （あなたがそうまだ行っていない場合の.cssファイルを作成します）

   2. 、独自のスタイルシートに次の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、。オレンジ-btn.x-btn-bl、.orange-btn .x-btn-br、.orange-btn .x-btn-bc { 背景画像：url（/orange-btn.gif）; （あなたがそうまだ行っていない場合）

（オレンジ-btn.gifへの正しいパスに置き換えてください） 4.あなたのHTMLページに、このCSSファイルを含めます。

ctCls: 'orange-btn' 

PS： 5.あなたはオレンジ色をしたいボタンの設定オブジェクトに次の行を追加します。グループ化されたボタンとメニューボタンの場合は、追加の画像をコピーして編集し、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を介して他の機能に追加できるようにすることができます変数として別のボタンを持っています。