使用ExtJS如何指定' - >'减去一点点?

时间:2012-05-03 22:24:35

标签: extjs

我有一个组件,我想要向右对齐,但想把它带回来......

me.dockedItems = [ {
    xtype: 'toolbar',
    dock: 'top',
    items:
    [{
        text: i18n.user_new,
        disabled: false,
        action: 'add',
        iconCls: 'icon-user-add'
    }, 

    '->',  // is there a way to say align right minus 20px?

    {
        fieldLabel: i18n.filter,
        labelWidth: 40,
        xtype: 'filterfield'
    }],
    ...

我该如何更改' - >'到?

3 个答案:

答案 0 :(得分:1)

没有特定的配置,但您可以在工具栏项后添加垫片,将其从右侧推开,例如:'->','yourOwnConfig',' ',' '

换句话说,' '相当于工具栏上的一个小空间,您可以并排添加更多空格,无论您在右侧需要多少空间。

或使用您的示例:

me.dockedItems = [ {
    xtype: 'toolbar',
    dock: 'top',
    items:
    [{
        text: i18n.user_new,
        disabled: false,
        action: 'add',
        iconCls: 'icon-user-add'
    }, 

    '->',  // is there a way to say align right minus 20px?

    {
        fieldLabel: i18n.filter,
        labelWidth: 40,
        xtype: 'filterfield'
    },' ',' ',' ',' '],

我不知道其中有多少相当于20px,但我认为你明白了。

答案 1 :(得分:1)

或者您可以添加框:

{
   xtype: 'box',
   width: 20
}

答案 2 :(得分:1)

最好的方法(IMO)是指定保证金:

Ext.onReady(function() {
    var form = Ext.create('Ext.panel.Panel', {
        width: 400,
        height: 400,
        renderTo: document.body,
        dockedItems : [{
            xtype: 'toolbar',
            items: [{
                text: 'B1'
            }, '->', {
                text: 'B2',
                margin: '0 20 0 0'
            }]
        }]
    });
});