ExtJS学习笔记(六) Tab Toolbar

Toolbar

/*
onReady文档加载完成之后执行
第一个参数是必须的，表示要执行的函数或匿名函数，
第二参数表示函数的作用域，
第三个参数表示函数执行的一些其它特性，比如延迟多少毫秒执行等，大多数情况下只需要第一个参数即可
*/
Ext.onReady(function () {
    setToolBars();
});

var setToolBars = function () {
    var addedItems = [];
    var toolbar = Ext.create("Ext.toolbar.Toolbar", {
        renderTo: "toolbar",
        width: 800,
        margin: "10px",
        items: [
            {
                // 默认类型
                xtype: "button",
                text: "添加按钮",
                handler: function () {
                    var text = $("input[name=\"buttonName\"]").val();
                    if (text) {
                        addedItems.push(toolbar.add({
                            text: text
                        }));
                    } else {
                        alert("请输入新增按钮名称");
                    }

                }
            },
            "-"  // 垂直分割符号 等同于 { xtype: "tbseparator" }
            ,
            {
                xtype: 'textfield',
                name: 'buttonName',
                emptyText: '输入新增按钮名称'
            },
            "-"
            ,
            {
                // 分割按钮
                xtype: "splitbutton",
                text: "分割按钮"
            },
            {
                text: "禁用所有项",
                scope: this,
                name: "disableBtn",
                disabled: false,
                handler: function () {
                    toolbar.disable();
                }

            },
            {
                text: "启用所有项",
                scope: this,
                name: "disableBtn",
                disabled: true,
                handler: function () {
                    toolbar.enable();
                }

            },
            "->" // 右对齐容器,类似右对齐输入的文本框 等同于 { xtype: "tbfill" }
            ,
            {
                text: "删除上一个新增项",
                handler: function () {
                    toolbar.remove(addedItems.pop());
                }
            }
        ]
    });
}

Tab

var tab;

Ext.onReady(function () {
    setTab();
});

function setTab() {
    tab = Ext.create("Ext.tab.Panel", {
        renderTo: Ext.getBody(),
        //        title: "标题居中",
        width: 600,
        height: 400,
        //        titleAlign: "center",   // 标题对其样式 left right center
        tabPosition: "left",    // 标签条的位置 top left right bottom
        tabRotation: 0,         // 标签条的旋转角度 default 0 1 2     对应 default none 90deg 270deg
        defaults: {
            iconAlign: "top",   // icon对其方式 top left right bottom
            textAlign: "center",     // 文本对其样式 left right center
            bodyPadding: 15,
            scrollable: true,   // 允许滚动
            closable: true  // 允许关闭
        },
        tabBar: {
            layout: {
                pack: "center"
            }
        },
        items: [{
            title: "Home",
            glyph: "xf015@FontAwesome",
            html: "首页"
        }, {
            title: "Users",
            glyph: "xf007@FontAwesome",
            html: "用户"
        }, {
            title: "Groups",
            glyph: "xf0c0@FontAwesome",
            html: "群组"
        }, {
            title: "Settings",
            glyph: "xf013@FontAwesome",
            html: "设置"
            // 异步加载其他页面
            //            loader: {
            //                url: 'resources/data/tab/ajax1.htm',
            //                contentType: 'html',
            //                loadMask: true
            //            }
        }]
    });
}