CODEWITHSUNDEEP
extjs4
Jom
Jom

Reputation: 1897

How to change collapsible position in panel extjs4?

When I give collapsible : true in panel, collapsible icon (up arrow) is showing at the right most side. How I can show it on left side of the panel?

Ext.create('Ext.panel.Panel', {
    title: 'New Section',
    height: 275,
    width: 530,
    margin: 3,
    collapsible : true
});

after that I am dynamically editing title using setTitle(text) method. The title will be changed but the collapsible will not show up. Can any one know what is happening here?

Thanks in advance

Upvotes: 3

Views: 6364

Answers (3)

Chandra Sekar
Chandra Sekar

Reputation: 312

We have tool position for that. Just check below header toolPosition :1

    Ext.create('Ext.panel.Panel', {
            title: 'New Section',
            height: 275,
            width: 530,
            margin: 3,
            collapsible : true, 
            header: {
                  titlePosition: 1,
        }
        });

Upvotes: 0

khmurach
khmurach

Reputation: 484

.my-panel .x-tool
{
    left: 0 !important;
}
.my-panel .x-panel-header-text-container
{
    padding-left: 18px;
}

Demo here http://ext4all.com/post/how-to-change-collapse-tool-position

Upvotes: 5

Vahid
Vahid

Reputation: 3442

To show the collapsible icon on the left side, you have to do it with custom CSS like this:

Ext.create('Ext.panel.Panel', {
    collapsible: true,
    cls: 'my-panel'
});

And CSS code:

.my-panel .x-tool {
    left: 0 !important;
}

After you change your Title, is any error occurs?

Upvotes: 4

Related Questions