[CLOSED] [1.0] Insert button into toolbar...

[state]

I have a button on a statusbar, when clicked, inserts a new button on the same statusbar (dynamically). This insert worked great in .8, but now it isn't working in 1.0.

This is the creation part (after the static button click):

var button = toolbar.insertButton(2, {
    id: 'status' + userId,
    text: userName,
    iconcls: iconCls,
    listeners: {
        click: {
            fn: function(el) {
                Manager.openStatus(el, userId, userName);
            }
        }
    },
    sessionId: sessionId
});

This doesn't add the button to the statusbar any more?

[Vladimir]

Hi,

You have to call the following code after button insertion

toolbar.doLayout();

[state]

This did work.

However, it's inserting the Button at the end of the StatusBar (after the Static button), not before it.

The toolbar.insertButton(2, should place it before, but it isn't.

StatusBar looks like this in the aspx:

<asp:Panel ID="pStatus" runat="server" Height="28" BodyCssClass="x-hidden">
    <TopBar>
        <ext:StatusBar ID="sbMain" runat="server">
            <Items>
                <ext:ToolbarFill />
                <ext:ToolbarSeparator />
                <ext:Button ID="bUsers" runat="server" Icon="User" Text="Users (0)">
                    <DirectEvents>
                        <Click OnEvent="bUsers_Click" />
                    </DirectEvents>
                </ext:Button>
            </Items>
        </ext:StatusBar>
    </TopBar>
</asp:Panel>

[state]

And changing the insertButton to 1, places the button before the ToolbarFill (needs to be after it).

Changing to 4, places it after the Users button.

[state]

Another issue on the same button.

After the button, I also call:

button.on('afterrender', Manager.openStatus(button, userId, userName));

But adding this event causes an error to be thrown when I do a toolbar.doLayout();

[Vladimir]

Hi,

1. I analyzed the StatusBar js code. The StatusBar insert two elements


StatusAlign="Left" (default)

this.insert(0, this.statusEl);

this.insert(1, '->');

StatusAlign="Right"

this.add('->');

this.add(this.statusEl);

So, you need to add 2 to the index position because there are two predefined element in the statusbar (and you can remove your ToolbarFill control)


2. Does your 'Manager.openStatus' return function? 'on' requires function as second argument but you call function
May be you need

Manager.openStatus.createCallback(button, userId, userName)

[state]

1. When I take the ToolbarFill out of the layout and add the StatusAlign="right", it still aligns the button to the left.

2. No, I did not set this as a function, I'm just passing the function. It's not a function itself.

3. This worked on v.8 with the ExtJS 2.2. So I'm assuming this is something that has changed in 3.0?

[state]

Using the createCallback method has solved the issue with the button.on('afterrrender') event.

Still having issues with button placement in the StatusBar.

Thanks.

[Vladimir]

Hi,

1. If you set StatusAlign="Right" then your buttons will first in items collection. Therefore ToolbarFill is required to move to the right.
Please note that if StatusAlign="Left" (default) then before your items will two predefined element (status element and filler). If StatusAlign="Right" then after your items will two elements(filler and status element)


2. You call function instead passing it. You need use createCallback or wrap your code by 'function'

button.on('afterrender', Manager.openStatus.createCallback(button, userId, userName));

button.on('afterrender', function(){Manager.openStatus(button, userId, userName)});

3. Yes, in ExtJS 3.0 toolbar was significantly refactored, now it uses layout

[Vladimir]

Hi,

I can suggest to avoid const indexes and use 'indexOf' function

 var button = sbMain.insertButton(sbMain.items.indexOf(bUsers), {
                id: 'status1',
                text: 'userName',
                iconcls: 'iconCls'
            });