Extjs4 TabPanel例子

TabPanel: Prompt To Save Changes Before Tab Change

Ext.define('App.view.EditUserPanel', {
    extend: 'Ext.tab.Panel',
    title: 'User Info',
    alias: 'widget.edituser',
    defaults: {
        bodyStyle: 'padding:15px'
    },
    items: [
    {
        title: 'General Info',
        xtype: 'form',
        items: [
            {
                xtype: 'textfield',
                fieldLabel: 'First Name',
                value: 'Vitaliy',
                allowBlank: false
            },
            {
                xtype: 'textfield',
                fieldLabel: 'Last Name',
                value: 'Khmurach',
                allowBlank: false
            }
        ],
        buttons: [{
            text: 'Save',
            action: 'save',
            disabled: true
        }]
    },
    {
        title: 'Additional Info',
        xtype: 'form',
        items: [
            {
                xtype: 'textfield',
                fieldLabel: 'Country',
                value: 'Ukraine',
                allowBlank: false
            },
            {
                xtype: 'textfield',
                fieldLabel: 'City',
                value: 'Kiev',
                allowBlank: false
            }
        ],
        buttons: [{
            text: 'Save',
            action: 'save',
            disabled: true
        }]
    }]
});
 
Ext.define('App.controller.Main', {
    extend: 'Ext.app.Controller',
    views: ['EditUserPanel'],
    init: function () {
        this.control({
            'edituser': {
                beforetabchange: this.onBeforeTabChange
            },
            'edituser textfield': {
                change: this.onChange
            },
            'edituser button[action=save]': {
                click: this.onSave
            }
        });
    },
    onBeforeTabChange: function (p, n, o) {
        if (o.saved === false) {
            Ext.Msg.confirm('Save', 'Save changes?', function (button) {
                o.saved = true;
                o.down('button[action=save]').disable();
                if (button == 'yes') {
                    Ext.Msg.alert('Info', 'Data saved!', function () {
                        p.getLayout().setActiveItem(n);
                        p.doLayout();
                    });
                } else {
                    p.getLayout().setActiveItem(n);
                    p.doLayout();
                }
            });
            return false;
        }
        return true;
    },
    onChange: function (field) {
        var form = field.up('form');
        var save = form.down('button[action=save]');
 
        form.saved = false;
        save.enable();
    },
    onSave: function (button) {
        var form = button.up('form');
         
        form.saved = true;
        button.disable();
    }
});
 
Ext.application({
    name: 'App',
    controllers: ['Main'],
    launch: function () {
        Ext.widget('edituser', {
            width: 400,
            height: 150,
            renderTo: 'output'
        });
    }
});

How To Dynamically Add Tabs To TabPanel

Ext.onReady(function () {
    Ext.create('Ext.tab.Panel', {
        width: 300,
        height: 150,
        defaults: { bodyPadding: 10 },
        items: [
            {
                title: 'Tab 1',
                html: 'Tab 1 content'
            }
        ],
        fbar: [
            {
                text: 'Add Tab',
                handler: function () {
                    var tabs = this.up('tabpanel');
                    var count = tabs.items.getCount();
                    var tab = tabs.add(Ext.widget('panel', {
                        title: 'New Tab ' + count,
                        html: 'Html ' + count
                    }));
                    tabs.setActiveTab(tab);
                }
            }
        ],
        renderTo: 'output'
    });
});

Tabpanel: Change Active Tab By Click On Treepanel Item

Ext.onReady(function () {
    var store = Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true,
            children: [
                { text: "Tab 1", panel: 'tab-1', leaf: true },
                { text: "Tab 2", panel: 'tab-2', leaf: true },
                { text: "Tab 3", panel: 'tab-3', leaf: true }
            ]
        }
    });
    var tabs = Ext.create('Ext.tab.Panel', {
        region: 'center', //for border layout
        margins: '5 5 5 5',
        defaults: { bodyPadding: 10 },
        items: [
            {
                title: 'Tab 1',
                itemId: 'tab-1',
                html: 'Tab 1 content'
            },
            {
                title: 'Tab 2',
                itemId: 'tab-2',
                html: 'Tab 2 content'
            },
            {
                title: 'Tab 3',
                itemId: 'tab-3',
                html: 'Tab 3 content'
            }
        ]
    });
    var tree = Ext.create('Ext.tree.Panel', {
        region: 'west', //for border layout
        collapsible: true,
        title: 'Menu',
        width: 200,
        store: store,
        rootVisible: false,
        margins: '5 0 5 5',
        listeners: {
            select: function (s, m) {
                tabs.setActiveTab(m.raw.panel);
            }
        }
    });
    Ext.create('Ext.panel.Panel', {
        layout: 'border',
        width: 600,
        height: 250,
        items: [
            tree,
            tabs
        ],
        renderTo: 'output'
    });
});