Extjs5.1学习（一）panel

jhui123456

于 2018-09-14 18:20:33 发布

阅读量807

点赞数

文章标签： extjs

本文链接：https://blog.csdn.net/jhui123456/article/details/82707166

版权

一、背景
使用window 7 32位系统，也可以是linux 。
1.下载extjs 5.1的gpl版本的压缩文件。
2.解压到F:\xampp\htdocs\ 里面
3.F:\xampp\htdocs\目录下，新建app.js 和index.html空白文件，等下编辑。
二、编写代码
文本打开 index.html，输入代码

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="UTF-8">

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="google" content="notranslate" />

        <title>Ext JS Kitchen Sink</title>

    <!-- 分别引入以下文件，第一个是外部扩展的icons包 -->
    <link rel="stylesheet" type="text/css" href="ext-5.1.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
    <script type="text/javascript" src="ext-5.1.0/build/ext-all.js"></script> 
    <script type="text/javascript" src="ext-5.1.0/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
    <script type ="text/javascript" src="app.js"></script>
    </head>
    <body></body>
    </html>

打开app.js 文件，输入代码

    var mypanel = null;
    // EXT5.1
    Ext.onReady(function () {
        mypanel = Ext.create("Ext.panel.Panel", {
            renderTo: Ext.getBody(),
            // 默认设置，应用到每一个Item中
            defaults: {
                xtype: "panel",
                width: 200,
                height: 280,
                bodyPadding: 10,
                frame: true
            },
            bodyStyle: "border:0;",
            // 布局设置
            layout: {
                type: "table",
                columns: 3,
                tdAttrs: { style: "padding: 10px; vertical-align: top;" }
            },
            items: [
                { html: "one", title: "one", headerPosition: "left" },
                { html: "two", title: "two", headerPosition: "right" },
                { html: "three", title: "three", collapsible: true, title: "title", headerPosition: "bottom" },
                {
                    title: "four",
                    collapsible: true,
                    id: "four",
                    width: 640,
                    html: "four",
                    glyph: "xf007@FontAwesome",
                    tools: [
                        {
                            type: "pin",
                            handler: function () {
                                Ext.getCmp("four").body.update(this.type);
                            }
                        }, {
                            type: "search",
                            handler: function () {
                                Ext.getCmp("four").body.update(this.type);
                            }
                        }, {
                            type: "save",
                            handler: function () {
                                Ext.getCmp("four").body.update(this.type);
                            }
                        }, {
                            type: "delete",
                            handler: function () {
                                mypanel.remove(Ext.getCmp("four"));
                            }
                        }
                    ],
                    colspan: 3
                }
            ]
        });
    });

保存起来后，双击index.html文件，就可以在浏览器看到效果图
这里写图片描述

jhui123456

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs5.1学习（一）panel

一、背景使用window 7 32位系统，也可以是linux 。 1.下载extjs 5.1的gpl版本的压缩文件。 2.解压到F:\xampp\htdocs\ 里面 3.F:\xampp\htdocs\目录下，新建app.js 和index.html空白文件，等下编辑。二、编写代码文本打开 index.html，输入代码 ...
复制链接

扫一扫