extjs4 Ext.Panel面板控件的用法

时间：2022-06-25 18:30:37 编辑：袖梨来源：一聚教程网

下面介绍几个基本配置项：

1.title:设置面板标题文本。

2.tbar,lbar,rbar,bbar:分别设置上、左、右、下四个部位的工具栏。

3.html，items:前者用来设置正文部分的html，后者设置正文部分的ext控件。

4.buttons:设置按钮区的按钮。

下面看看面板生成代码：

[html]

代码如下	复制代码
Panel

[Js]

代码如下

复制代码

Ext.onReady(function () {
    var p = Ext.create('Ext.Panel', {
        title: '面板标题',
        collapsible: true,
        renderTo: 'div1',
        width: 400,
        height: 300,
        autoScroll: false,
        bodyBorder: true,
        buttonAlign: 'right',
        buttons: [{
            text: "按钮1",
            handler: function () {
                Ext.Msg.alert("提示", "第一个事件");
            },
            id: "bt1"
        }, {
            text: "按钮2",
            id: "bt2"
        }
        ],
        floating: true,
        footerCfg: { tag: 'span', id: 'span1', html: '面板底部' },
        items: [{
            xtype: "button",
            text: "按钮"
        }],
        tbar: Ext.create('Ext.toolbar.Toolbar', { items: ["工具栏"] }),
        html: "正文"
    });

p.setPosition(40, 50);

});

效果如下：

哈哈，有了extjs4了，你是不是觉得很多后台功能美工都不需了哈。

推荐专题

最新下载

热门教程

extjs4 Ext.Panel面板控件的用法

Panel

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程