extjs4.1 - 使用 tbfil 与 extjs 4.1 对齐按钮

Question

我有以下。我希望第一项“创建”与右侧对齐。

我已经阅读了有关使用 'tbfill' 对齐的信息。但我不确定如何在我的实现中使用它。

        dockedItems:[                        {
                        xtype:'toolbar',
                        flex:1,
                        dock:'top',
                        items:[
                            {


                                xtype:'button',
                                id: 'ContactCreate',
                                name: 'ContactCreate',
                                text:'Create',
                                action:'create',
                                align: 'right',
                                style: 'float:right',
                                width:'100',
                                iconCls:'icon-add'


                            },
                            {
                                xtype:'button',
                                id: 'ContactSave',
                                name: 'ContactSave',
                                text:'Save',
                                action:'save',
                                width:'100',
                                iconCls:'icon-save'
                            },


                            {
                                xtype:'button',
                                id: 'ContactDelete',
                                name: 'ContactDelete',
                                text:'Delete',
                                action:'delete',
                                width:'100',
                                iconCls:'icon-delete'
                            }


                        ]
                    }
                ],

Answer 1

我在想您将 tbfill 添加到实际项目中。这是一个工作示例。

                dockedItems:[
                    {
                        xtype:'toolbar',
                        flex:1,
                        dock:'top',
                        items:[
                            {
                                xtype:'button',
                                id: 'ContactSave',
                                name: 'ContactSave',
                                text:'Save',
                                action:'save',
                                width:'100',
                                iconCls:'icon-save'
                            },
                            {
                                xtype:'button',
                                id: 'ContactDelete',
                                name: 'ContactDelete',
                                text:'Delete',
                                action:'delete',
                                width:'100',
                                iconCls:'icon-delete'
                            },
                            { xtype: 'tbfill' },
                            {

                                xtype:'button',
                                id: 'ContactCreate',
                                name: 'ContactCreate',
                                text:'Create',
                                action:'create',
                                width:'100',
                                iconCls:'icon-add'

                            }


                        ]
                    }
                ],