Javascript 如何使Ext.FormPanel中的按钮宽度=100%并带有红色文本？

我有一个表单，末尾有一个按钮，如下所示：

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');
                }
            })
        ]
    });

该按钮可以工作，但正如样式信息尝试所指出的，我希望该按钮能够扩展到整个表单，并具有红色文本

如何使按钮的宽度在表单上延伸，并在按钮内有红色文本？

补遗 Robby的解决方案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');
    }
}

。。。
}, {
字段标签：“项目20”，
名称：'item20'，
值：“测试”
}, {
字段标签：“项目21”，
名称：'item21'，
值：“测试”
}, {
xtype:'按钮'，
文本：“取消订单”，
主播：100%，
处理程序：函数（）{
警报（“按下”）；
}
}

---

将按钮定义更改为

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

{
xtype:'按钮'，
文本：“取消订单”，
主持人：“100%”
处理程序：函数（）{alert（'pressed'）}；
}

---

要使anchor属性正常工作，按钮不能位于面板的“按钮”数组中。

将按钮定义更改为

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

{
xtype:'按钮'，
文本：“取消订单”，
主持人：“100%”
处理程序：函数（）{alert（'pressed'）}；
}

要使anchor属性正常工作，您的按钮不能位于面板的“按钮”数组中