使用tbfil与extjs 4.1对齐按钮

Question

我有以下内容。我希望第一个项目'create'与右边对齐。

我读过有关使用'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'

                            }


                        ]
                    }
                ],