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,输入代码

    
    <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 Sinktitle>

    
    <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文件,就可以在浏览器看到效果图
Extjs5.1学习(一)panel_第1张图片

你可能感兴趣的:(Extjs5.1学习(一)panel)