专栏首页柠檬先生Extjs grid 组件

Extjs grid 组件

表格面板类Ext.grid.Panel

重要的配置参数

columns : Array 列模式(Ext.grid.column.Columnxtype: gridcolumn)

重要的配置参数

text : String 列的标题 默认是""

dataIndex : String 和Model的列一一对应的

sortable : true 可以整理,可以进行分类的

field: 可编辑字典配置

重要方法

getStore    返回当前页面所关联的store

重要属性

ownerCt

组件所属的 Container (当前组件被添加到一个容器 中时此值被自动设置)

title : String 表格的标题

renderTo : Mixed 把表格渲染到什么地方

width : Number 宽

height: Number 高

frame : Boolean 是否填充渲染这个Panel

forceFit : true 设定表格的列是否自动填充

store : store 数据集合

tbar: [] 头部工具栏

dockedItems : Object/Array 表格停靠在上下左右的工具条

selType : 'checkboxmodel', 选择框的选择模式

multiSelect :true,//允许多选

plugins 插件

Ext.ComponentQuery   组建查询去

Ext.grid.column    它包含了表头的的配置和单元格的配置。

列模式的住类

Ext.grid.column.Action xtype: actioncolumn

在表格中渲染一组图标按钮,并且为他赋予某种功能

altText : String 设置应用image元素上的alt

 handler :function(view,rowindex,collndex,item,e);

icon    : 图标资源地址

iconCls  : 图标样式

items   : 多个图标的数组  

function(o,item,rowIndex,colIndex ,e)

stopSelection : 设置是否单击选中不选中

选择模式的根类Ext.selection.Model

  重要方法

1.1撤销选择 deselect( Ext.data.Model/Index records,

Boolean suppressEvent ) : void

1.2得到选择的数据getSelection( ) : Array

1.3得到最后被选择数据getLastSelected( ) : void

1.4判断你指定的数据是否被选择上isSelected( Record/Number record ) : Boolean

1.5选择你指定的行selectRange( Ext.data.Model/Number startRow,

Ext.data.Model/Number endRow, [Boolean keepExisting],

 Object dir ) : void

keepExisting true保持已选则的,false重新选择

隐藏了一个单元格的选择模式 selType: 'cellmodel'

得到被选择的单元格getCurrentPosition() Object

很实用选择你要特殊处理的数据 selectByPosition({"row":5,"column":6})

Ext.selection.CheckboxModel 多选框选择器

Ext.selection.RowModel      rowmodel 行选择器

  重要属性

3.1multiSelect 允许多选

3.2simpleSelect 单选选择功能

3.3enableKeyNav 允许使用键盘

Grid的特性Ext.grid.feature.Feature

Ext.grid.feature.RowBody  表格的行体

Ext.grid.feature.AbstractSummary

一个小的抽象类,包含在表格中使用的各种摘要计算的公共行为。

Ext.grid.feature.Summary

这个特性被用来在表格的底部放置一个摘要行

Ext.grid.feature.Grouping

分组地显示grid行集合

Ext.grid.plugin.DragDrop

  主意:配置有变化

viewConfig:{
plugins:[
       Ext.create('Ext.grid.plugin.DragDrop', {
        ddGroup:'ddTree', //拖放组的名称
           dragGroup :'userlist', //拖拽组名称
           dropGroup :'userlist'  //释放租名称
           enableDrag:true, //是否启用
           enableDrop:true
       })
]
}

Ext.toolbar.Paging    分页组建

 dockedItems: [{
     xtype: 'pagingtoolbar',
        store: store,
        dock: 'bottom',
        displayInfo: true
    }],
Paging Scroller 分页滚动条

表格支持无限滚动条的方式分页,有上千条数据时你可以一直滚动滚动条就可以加载(跟微博的无限滚动条一样),没有一次渲染数千条的性能问题,需要做如下的配置

Ext.create('Ext.grid.Panel', {
verticalScrollerType: 'paginggridscroller',
 invalidateScrollerOnRefresh: false,
disableSelection: true,
   });

 demo 下载 https://github.com/ningmengxs/Extjs.git

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • extjs 基础部分

    创建对象的方法:     使用new 关键字创建对象。       new  classname ([config])     使用Ext.create方法创建...

    用户1197315
  • Extjs 数据代理

    Ext.data.proxy.Proxy 代理类的根类 客户端代理: 1.LocalStorageProxy:将数据存储在localStorage中,此种方式可...

    用户1197315
  • Extjs mvc

    MVC的模式,模型(Models)和控制器(Controllers) Model模型 是字段和它们的数据的集合,例如User模型带有username和passw...

    用户1197315
  • [ASP.NET Core 3框架揭秘] 配置[2]:读取配置数据[下篇]

    [接上篇]提到“配置”二字,我想绝大部分.NET开发人员脑海中会立即浮现出两个特殊文件的身影,那就是我们再熟悉不过的app.config和web.config,...

    蒋金楠
  • 二叉树及其四种遍历

    本次主要是针对二叉树的基本操作,另外还有二叉树相似的判断和叶子结点的计数,这些方法中都用到了递归。关于结构体的预定义还是会放在之前的博客(数据结构常用于定义总结...

    李志伟
  • JS基础测试: !!106+2 的运算结果是多少?​

    舒克
  • 做为一名合格的SEOer 你需要懂的HTML标签

    我们日常的SEO工作,每天都在和html标签打交道,比如CMS后台发文章你会设置title、keywords、tag等,这些都是整站基础优化必备的HTML标签。...

    安邦运维ruangseo
  • 软件必备模块-全栈工程师

    有时候想想为什么写程序?写程序的初心是什么?这个代码写时间长了有时候就忘记了。为生计?为房贷?都不是。我想做自己喜欢的东西。就想一个一个画家画出了自己想表达的东...

    于欣轩
  • 网站建设教程:PageAdmin网站系统标签功能的实现

    公司之前老网站采用的织梦网站系统,由于最近被黑客攻击导致挂马,并且官方停止了更新,领导要求新的网站采用pageadmin网站系统重新改版,小编在学习和使用中学到...

    用户4831957
  • Android | 通过机器学习实现精准字母手势识别

    菜天哥哥

扫码关注云+社区

领取腾讯云代金券