Javascript - ExtJs - Toolbar - 工具栏

Toolbar组件

创建工具栏

Toolbar类是一种子组件，它不能独立存在，需要依附在其它组件上面。很多容器组件都具备tbar（顶部工具栏）、bbar（底部工具栏）的配置，所以可以像下面那样使用它。

tbar: {
    id: "tool",
    width: ,
    height: ,            
    items: [
        { text: "新  增", itemId: "btn1", style: "background:none;border:none;",iconCls: "btnIco", handler: function () { alert() } }, //默认是按钮
        { xtype: 'tbseparator' }, //分隔符
        { xtype: 'tbspacer', width:  }, //指示物件的间距
        { xtype: "text", text: "纯文本" },
        { xtype: 'tbfill' }, //指示出现在tbfill之后的物件右对齐
        { xtype: "textfield",fieldLabel:"查询",labelWidth: }, //可配置为表单组件
    ]
}

设置按钮内的文字和按钮内的图标

/*按钮文字*/
.x-btn-inner {
    font-family: Arial !important;
    color: white !important;
}

/*按钮a标签*/
.x-btn {
    text-decoration: none !important;
} 

/*按钮内图标*/
.btnIco {
    background: url(../../Img/Ico/login.png);
    margin-left:78px;
} 

创建菜单

菜单组件可浮动在鼠标的轨迹上，也可以附加在工具栏上。

//右键点击grid时创建右键菜单
Ext.create("Ext.grid.Panel", {
    //……
    listeners: {
        itemcontextmenu: function (view, record, item, index, e) {
            e.preventDefault();
            Ext.create("Ext.menu.Menu", {
                id: "contextmenu",
                items: [
                    {
                        text: "全选",
                        handler: function () {
                        }
                    },
                    {
                        text: "反选",
                        hanlder: function () {
                        }
                    }
                ],
                listeners: {
                    deactivate: function (menuSelf) {
                        menuSelf.destroy(); //消失后销毁自身
                    }
                }
            });
            Ext.getCmp("contextmenu").showAt(e.getXY()); //显示在鼠标右键点击处
        }
    }
});

浮动

tbar: {
    id: "tool",
    width: ,
    height: ,            
    items: [
        {
            type: "button",
            text: "文  件",
            itemId: "btn1",
            style: "background:none;border:none;text-decoration:none;",
            menu: {
                items: [
                    { text: '复制', hanler: function () {/*点击菜单时触发*/ },deactivate:function()(menuSelf){/*菜单消失后触发*/} },
                    { text: '剪切' },
                    { text: '撤销' }
                ]
            }
        }      
    ]
}

固定

创建按钮

Ext.create('Ext.Button', {
    text: 'OK',
    style: "background:red;border:none;margin:10px 0;", icon: "../img/ico/expand-down.png",
    renderTo: "bbtn",
    handler: function () { }
});

{
    xtype: "button",
    text: "选择全部",
    style: "margin-right:10px;",
    handler: function () {
        //获得按钮的文字
        if (this.getText() == "选择全部") {
            //设置按钮的文字
            this.setText("全部取消");
        }
        else {
            this.setText("选择全部");
        }
    }
}

Javascript - 学习总目录