Extjs-lesson3

❝小闫语录:世界上一共三种人,真糊涂,看破即说破,看破不说破。也许你因作为第二种人而沾沾自喜,但殊不知不给他人留面子也是情商低的一种表现。 ❞

Ext.js 系列课程笔记

Ext.js 系列课程笔记「类」

Ext.js 系列课程笔记「组件」更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』

1.Ext.Window

1.1 展示

演示窗口

1.2 代码

(function() {
  Ext.onReady(function() {
    var win = new Ext.Window({
      title: "演示窗口",
      width: 600,
      height: 300,
      modal: true,
      closable: true,
      maximizable: true,
      minimizable: true,
      bodyStyle: "padding:30px",
      html: '<h1 style="text-align: center">欢迎关注:全栈技术精选</h1>'
    });
    win.show();
  });
})();

1.3 详解

介绍几个常用的「配置项」

title :标题栏显示文字

width :窗口宽度

height :窗口高度

modal :是否设置为模态窗体

❝模态窗体:打开此窗体后,不能对其他窗体进行操作 ❞

closable :是否显示关闭按钮

maximizable :是否显示最大化按钮更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』

minimizable :是否显示最小化按钮

html :窗口显示的内容

resizable :用户是否可以调整窗口的大小

bodyStyle :窗口内容与边框的间距

buttonAlign :窗口中 button 的对齐方式(left/center/right)默认是 right

介绍几个「方法」

show :窗口显示

hide :窗口隐藏

close :窗口关闭

1.4 学习方法

学习的方法就是通过官方的 API 文档,上篇文章介绍了使用方法,下面再提供一副图片详细介绍每个类的说明如何查看:

类说明

文档地址为「https://www.pythonnote.cn/OfficialDocuments/」,可点击对应按钮跳转文档页面。更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』

❝小闫同学将开发工程师常用的官方文档进行了汇总,文档会不定期补充更新,请收藏或转发给好友。 ❞

document

2.Ext.FormPanel

2.1 展示

表单

2.2 代码

(function() {
  Ext.onReady(function() {
    // 初始化提示信息设置,比如图片中错误提示信息`This field is required`
    Ext.QuickTips.init();
    // 创建一个表单面板对象
    var movie_form = new Ext.FormPanel({
      // 表单提交的地址
      url: "/movie_submit",
      // 将该组件放置在页面的 body 标签中
      renderTo: document.body,
      // 如果为True,则使用自定义的圆形边框渲染面板,如果为false,则使用纯1px正方形边框渲染(默认为false)。
      frame: true,
      // 面板的标题栏文字
      title: "Movie Information Form",
      // 宽度
      width: 250,
      // 表单内容
      items: [
        {
          // 该元素是文本字段
          xtype: "textfield",
          // 输入框前显示内容
          fieldLabel: "Title",
          // 选项名称
          name: "title",
          // 校验不许为空
          allowBlank: false
        },
        {
          xtype: "textfield",
          fieldLabel: "Director",
          name: "director",
          // 校验内容只能是英文字母
          vtype: "alpha"
        },
        {
          // 该元素是时间字段
          xtype: "datefield",
          fieldLabel: "Released",
          name: "released",
          // 校验不能选择周一到周五的日期
          disabledDays: [1, 2, 3, 4, 5]
        }
      ],
      // 按钮
      buttons: [
        {
          // 按钮显示文本
          text: "Save",
          // 按钮的处理函数
          handler: function() {
            // 将表单内容提交
            movie_form.getForm().submit({
              // 成功后的处理逻辑
              success: function(f, a) {
                Ext.Msg.alert("Success", "It worked");
              },
              // 失败后的处理逻辑
              failure: function(f, a) {
                Ext.Msg.alert("Warning", "Error");
              }
            });
          }
        },
        {
          text: "Reset",
          handler: function() {
            // 将表单内容重置
            movie_form.getForm().reset();
          }
        }
      ]
    });
    movie_form.show();
  });
})();

3.Ext.grid.GridPanel

3.1 展示

GridPanel

3.2 代码

(function() {
  Ext.onReady(function() {
    // 创建数据源
    var mystore = new Ext.data.Store({
      // 数据本身,数组
      data: [
        [1, "Office Space", "Mike Judge", "1999-02-19", 1, "Work Sucks", "19.95", 1],
        [3, "Super Troopers2", "Jay Chandrasekhar", "2002-02-15", 1, "Altered State Police", "14.95", 1],
        //...more rows of data removed for readability...//
      ],
      // 从上面数组中读取数据时,字段与数据一一对应解释为 Extjs 使用的数据
      // 参数为 id 列,以及其他各个字段的名称
      reader: new Ext.data.ArrayReader({ id: "id" }, [
        "id",
        "title",
        "director",
        { name: "released", type: "date", dateFormat: "Y-m-d" },
        "genre",
        "tagline",
        "price",
        "available"
      ])
    });
    // 创建一个 GridPanel 对象
    var grid = new Ext.grid.GridPanel({
      // 数据再页面中的 body 标签中显示
      renderTo: document.body,
      // 如果为True,则使用自定义的圆形边框渲染面板,如果为false,则使用纯1px正方形边框渲染(默认为false)
      frame: true,
      // 标题栏显示文字
      title: "Movie Database",
      // 高度
      height: 200,
      // 宽度
      width: 500,
      // 数据源
      store: mystore,
      // 指定表格的表头
      columns: [
        { header: "Id", dataIndex: "id" },
        { header: "Title", dataIndex: "title" },
        { header: "Director", dataIndex: "director" },
        {
          header: "Released",
          dataIndex: "released",
          renderer: Ext.util.Format.dateRenderer("m/d/Y")
        },
        { header: "Genre", dataIndex: "genre" },
        { header: "Tagline", dataIndex: "tagline" }
      ]
    });
    // 展示表格面板
    grid.show();
  });
})();

4.Ext.tree.TreePanel

4.1 展示

TreePanel

4.2 代码

(function() {
  Ext.onReady(function() {
    // 树的节点数据源
    var node = {
      text: "根",
      // 是否展开子节点
      expanded: true,
      // 是否为叶子节点
      leaf: false,
      children: [
        {
          text: "根下节点一[user图标]",
          leaf: true,
          // ExtJs自带的图标显示为“文件夹”或是“列表”,通过 iconCls 可以列换树型菜单的图标。
          iconCls: "nodeicon"
        },
        { text: "根下节点二", leaf: true },
        {
          text: "根下节点三",
          leaf: false,
          children: [
            { text: "节点三子节点一", leaf: true },
            {
              text: "节点三子节点二",
              leaf: false,
              expanded: true,
              children: [
                {
                  text: "节点三子节点二节点一",
                  leaf: true
                },
                {
                  text: "节点三子节点二节点二",
                  leaf: true
                }
              ]
            }
          ]
        }
      ]
    };
    // 树面板(本地数据源)
    // 创建一个新的TreePanel表单对象
    var treelocal = new Ext.tree.TreePanel({
      title: "TreePanelLocal",
      //rootVisible: false, --> 根节点的可见性
      // 根节点
      root: node
    });
    // 树面板(服务器数据源)
    // 创建一个新的TreePanel表单对象
    var treeservice = new Ext.tree.TreePanel({
      title: "TreePanelService",
      root: { text: "根", expanded: true },
      // 树的数据载入组件,通过 url 寻找服务器返回的 json 数据,并且自动转换成 TreeNode
      loader: new Ext.tree.TreeLoader({
        url: "/App_Ashx/Demo/Tree.ashx"
      })
    });
    // 窗体
    var win = new Ext.Window({
      title: "窗口",
      width: 476,
      height: 574,
      // 用户是否可以调整窗口的大小
      resizable: true,
      // 是否设置为模态窗体
      modal: true,
      // 是否显示关闭按钮
      closable: true,
      // 是否显示最大化按钮
      maximizable: true,
      // 是否显示最小化按钮
      minimizable: true,
      // 窗口中 `button` 的对齐方式(`left`/`center`/`right`)默认是 `right`
      buttonAlign: "center",
      items: [treelocal, treeservice],
      buttons: [
        {
          text: "获取选中项",
          handler: function() {
            // 获取选中节点
            selectNode = treelocal.getSelectionModel().getSelectedNode();
            alert(
              "TreePanelLocal:" +
              // 如果节点为空时显示根节点的文本,否则显示选中的节点文本信息
                (selectNode == null ? treelocal.root.text : selectNode.text)
            );
          }
        }
      ]
    });
    win.show();
  });
})();

本文分享自微信公众号 - 全栈技术精选(Pythonnote),作者:小闫同学啊

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 美多商城前三天遗忘知识点回顾

    既来之,则安之。看似是一种无奈,一种妥协,其实却是智慧之举。我们既然已经来到这个地方,既然已经做了这份工作,那么就全心全意的去对待。我们要保持着积极向上的态度,...

    小闫同学啊
  • 强迫症如何干净删除 commit 记录

    我相信这不是我一个人的经历:傍晚时分,你坐在屋檐下,看着天慢慢地黑下去,心里寂寞而凄凉,感到自己的生命被剥夺了。当时我是个年轻人,但我害怕这样生活下去,衰老下去...

    小闫同学啊
  • Mysql高频面试题

    Feelings are just visitors. Let them come and go.

    小闫同学啊
  • 设计模式 | 适配器模式

    适配器模式(adapter), 模式定义: 将一个类的接口转换成客户希望的另一个接口。Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作

    憧憬博客
  • 递归尾调用优化

    尾调用(Tail Call)是函数式编程的一个重要概念,就是指某个函数的最后一步是return调用另一个函数。

    wade
  • numpy.testing.utils

    于小勇
  • 全栈开发工程师微信小程序-下

    WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

    达达前端
  • 撤销本地提交-每天三分钟玩转Git (5)

    上一章我们一起入门学习了git的基本概念和git基础操作,包括提交和同步代码、使用分支、出现代码冲突的解决办法、紧急保存现场和恢复现场的操作。几乎已经足够我们使...

    机智的程序员小熊
  • 经验之谈:代码该怎样写才能干净整洁

    不妨想象一下,你正在阅读一篇文章,文章开头段简要概述了文章的内容。文中还有一些小标题,它们会引出各部分的段落。段落是通过将相关信息按照合理的顺序组合起来而构成的...

    机器之心
  • GitHub代码托管平台提交代码时emoji表情的使用

    沈唁

扫码关注云+社区

领取腾讯云代金券