如何使Ext.FormPanel中的按鈕的寬度爲100％並顯示紅色文本？

Question

我有一個按鈕的形式在年底這樣的：

var simple_form_right = new Ext.FormPanel({ 
     frame:true, 
     labelWidth: 90, 
     labelAlign: 'right', 
     title: 'Orderer Information', 
     bodyStyle:'padding:5px 5px 0', 
     width: 300, 
     height: 600, 
     autoScroll: true, 
     itemCls: 'form_row', 
     defaultType: 'displayfield', 
     items: [{ 
       fieldLabel: 'Customer Type', 
       name: 'customerType', 
       allowBlank:false, 
       value: 'Company' 
      }, .... { 
       fieldLabel: 'Item 21', 
       name: 'item21', 
       value: 'test' 
      }, 
      new Ext.Button({ 
       text: "Cancel Order", 
       style: 'width: 100%; color: red', 
       handler: function() { 
        alert('pressed'); 
       } 
      }) 
     ] 
    }); 

按鈕的作品，但作爲樣式信息的嘗試表明，我想按鈕在窗體延伸，並具有紅色文字。

我怎樣才能使按鈕的寬度橫跨形式延伸，並具有按鈕內的紅色文字？

附錄

羅比的解決方案工程100％：

... 
}, { 
    fieldLabel: 'Item 20', 
    name: 'item20', 
    value: 'test' 
}, { 
    fieldLabel: 'Item 21', 
    name: 'item21', 
    value: 'test' 
}, { 
    xtype: 'button', 
    text: '<span style="color:red">Cancel Order</span>', 
    anchor: '100%', 
    handler: function() { 
     alert('pressed'); 
    } 
} 

Answer 1

更改您的按鈕定義。

{ 
    xtype: 'button', 
    text: '<span style="color:red;">Cancel Order</span>', 
    anchor: '100%' 
    handler: function() { alert('pressed') }; 
} 

要使錨點屬性工作，您的按鈕不能位於面板的「按鈕」數組中。