ExtJs – Custom Responsive Tab Menu with ResponsiveConfig

Sebagaimana kita ketahui bahwa sejak versi 5, ExtJs sudah memperkenalkan responsiveConfig untuk mendukung responsive layout.
Meski agak terlalu rumit untuk digunakan namun tidak ada salahnya kita coba sedikit mengeksplore bagian ini karena saya rasa ini adalah hal baru yang menarik dan patut untuk dicoba.

Untuk contoh maka saya akan membuat custom responsive tab menu yang mungkin bisa diaplikasikan dengan beberapa penyesuaian di aplikasi yang anda buat.

Berikut silahkan disimak :

Sebelumnya anda mungkin bisa lihat demo disini : https://fiddle.sencha.com/fiddle/rc1/preview

Untuk source code bisa dilihat disini : https://fiddle.sencha.com/#fiddle/rc1
atau bila link tidak berhasil sebagai berikut :

function createChildMenu(title, iconCls, id, view) {
    var men = Ext.create('Ext.menu.Item', {
        text: title,
        iconCls: iconCls,
        handler: function() {
            view.setActiveTab(id);
        }
    });

    return men;
}

var contextMenu = new Ext.menu.Menu({
    floating: true,
    cls: 'floating-menu',
    listeners: {
        boxready: function(thisCmp) {
            var view = Ext.getCmp("mainView");
            for (var i = 0; i < view.items.items.length; i++) {
                var item = view.items.items[i];
                var iconCls = item.iconCls;
                var id = item.getItemId();
                var title = item.title;
                var men = createChildMenu(title, iconCls, id, view);
                thisCmp.add(men);
            }
        }
    }
});

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.tab.Panel', {
            xtype: 'mainView',
            id: 'mainView',
            width: 700,
            height: 550,
            renderTo: Ext.getBody(),
            style: 'background-color:red',

            items: [{
                xtype: 'panel',
                title: 'Tab 1',
                iconCls: 'fa fa-desktop fa-lg',
            }, {
                xtype: 'panel',
                title: 'Tab 2',
                iconCls: 'fa fa-cubes fa-lg',
            }, {
                xtype: 'panel',
                title: 'Tab 3',
                iconCls: 'fa fa-dashboard fa-lg',
            }],

            defaults: {
                tabConfig: {
                    plugins: 'responsive',
                    responsiveConfig: {
                        wide: {
                            hidden: false
                        },
                        tall: {
                            hidden: true
                        }
                    }
                }
            },

            tabBar: {
                items: [{
                    xtype: 'label',
                    id: "mainMenu",
                    html: '&nbsp;<i title="Show Menu" class="fa fa-bars fa-3x btn-dashlet-view-mode-inactive"></i>',
                    border: false,
                    plugins: 'responsive',
                    responsiveConfig: {
                        wide: {
                            hidden: true
                        },
                        tall: {
                            hidden: false
                        }
                    },
                    listeners: {
                        el: {
                            click: function() {
                                contextMenu.showAt(Ext.getCmp("mainMenu").getX(), Ext.getCmp("mainMenu").getY() + 35);
                            }
                        }
                    }
                }]
            },
        });

    }
});          

Terima kasih dan semoga bermanfaat.

mazipan-signature

Be a good reader, leave your comment please.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s