• ExtJS初级教程之ExtJS Grid(一)


         我们在很多网站都能看到表格的影子,而ExtJS Grid在页面表现上又非常强大,下面我们就创建我们的第一个表格。

          在ExtJS中我们是通过Ext.grid.ColumnModel这个类来描述列属性的。下面我们建立一个ColumnModel对象。

         接下来我们定义表格中要显示的数据。

         数据中的列是和定义表格列属性时是相对应的。下面我们要创建一个Store对象来讲data装载到stroe对象中。

         proxy属性是一个代理类对象,该对象可以封装一个静态数组。ArrayReader对象可以将数组解析,但是要使用mapping属性来进行映射。

         接着就是创建一个GridPanel对象来装置表格并显示在页面上。

         这样,我们第一个静态表格就完成了。下面是完整的代码:

         通过这个简单的代码例子我们也大概了解了创建一个Grid的基本流程了,下面我们简单介绍一下Grid的一些其他的简单属性。

         阻止移动列和改变列的宽度

         代码中enableColumnMove:false设置的是阻止列的移动,enableColumnResize:false设置的是让列的宽度禁止改变。

         按列排序

         在该列设置sortable:true之后,该列就拥有了排序的功能。

         复选框

         有很多时候我们需要在表格的每列前加一个复选框,用来标记选中的,进行操作,下面我们就加入复选框试试。首先,我们要创建复选框对象,这时我们要用到Ext.grid.CheckboxSelectionModel这个类。

         创建完复选框对象后,我们还要将这个复选框对象添加到ColumnModel对象中去。接着还要将复选框对象添加到Panel上:

         下面我们做一个非常频繁用到的功能:将复选框选中的行删除。首先要在页面添加一个删除按钮。

         这个javascript函数就是页面按钮要调用的函数:

         这样一个主要功能都健全的Grid就完成了,今天我就写这些,下次我将继续ExtJS Grid的分页和编辑表格的研究。

  • 相关阅读:
    vue 组件
    vue 中的computed和watch
    Vue 框架 笔记
    初次使用git配置以及git如何使用ssh密钥(将ssh密钥添加到github)
    JavaScript 执行机制
    Vue.js 动画
    封装nodeJS中 $on $emit $off 事件
    JS中的事件委托
    什么是“闭包”(closure)为什么要用它?
    js使用面向对象编写下拉菜单
  • 原文地址:https://www.cnblogs.com/SunnyYue/p/3970295.html
Copyright © 2020-2023  润新知