一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

PHP教程 Css教程 操作系统 数据库 安卓下载

首页 游戏下载 软件下载 专题 资讯教程 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
+ -
当前位置：一聚教程网 > 网页制作 > extjs

推荐专题

最新下载

热门教程

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了，你是不是觉得很多后台功能美工都不需了哈。

相关文章

热门栏目

一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2022 www.111CN.NET AII Right Reserved

网站内容来自网络整理或网友投稿如有侵权行为请邮件:[email protected] 我们24小时内处理