关闭

电网

295人阅读 评论(0) 收藏 举报

电网

网格面板的Ext JS的中心之一。这是一个令人难以置信的通用组件,提供了一种简单的方式来显示,排序,分组和编辑数据。

基本的网格面板

简单的网格

让我们开始创建一个基本的网格面板这里有所有你需要知道得到一个简单的Grid并运行:

模型和存储

一个网格面板简直就是一个组件,它显示包含在一个数据存储一个商店可以被认为是作为一个记录的集合,或模型的实例。对于更多的信息存储型号小号的数据手册这种设置的好处是清晰的关注分离。网格面板中 显示的数据,而只关心存储需要保健的获取和保存数据,利用其代理

首先,我们需要定义一个模型一个模型仅仅是一个领域,它代表一个数据类型的集合。让我们来定义一个模型,它代表一个“用户”:

分机定义“用户”  { 
    延长:的 “Ext.data.Model' 
    字段 [  '名称'  '电子邮件'  '电话'  ] 
});

接下来,让我们创建一个商店,包含多个用户的情况下。

var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    data: [
        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
        { name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
    ]
});

为了方便起见,我们配置的存储,其数据加载内嵌。在现实世界中的应用,你通常会配置使用代理从服务器加载数据商店查看数据手册上使用更多的代理

网格面板

现在我们有一个模型,它定义了我们的数据结构,我们已经载入到一个模型实例存储,我们已经准备好使用网格面板显示的数据

     用户 [ 
        { 
            文字 '名称' 
            宽度 100 
            排序 虚假
            hideable的 虚假
            dataIndex  '名称' 
        },
        { 
            文本 “电子邮件地址” 
            宽度 150 
            dataIndex  “电子邮件” 
            隐藏 
        },
        { 
            文字 '电话号码' 
            柔性 1 
            dataIndex  '电话' 
        } 
    ] 
});

而这一切就这么简单。我们刚刚创建了一个网格面板,呈现自己的身体元素,并告诉我们从它的数据,我们前面创建的userStore 商店最后,我们定义网格面板中将有哪些列,我们用的dataIndex属性配置在该领域的用户 模型,每列将得到的数据,从。有一个固定的宽度100px的“ 名称 “ 列和排序和隐藏禁用,电子邮件地址栏默认情况下隐藏(可以使用任何其他列的菜单,再次显示),电话号码列弯曲,以适应其余网格面板的总宽度。要查看这个例子中生活,看到简单的网格例子

提炼

您可以使用的渲染器的列的属性配置改变显示数据的方式。渲染器是一个功能,修改的基础值,并返回一个新的值将显示。一些最常见的渲染,包括在Ext.util.Format,但你可以写自己,以及:

 [ 
    { 
        文字 '出生日期' 
        dataIndex  '生日' 
        / /格式的日期,使用渲染器Ext.util.Format
        渲染 分机util的格式dateRenderer 
    },
    { 
        文字 '电子邮件地址' 
        dataIndex  “电子邮件” 
        / /格式的电子邮件地址使用自定义渲染
        渲染 功能价值 { 
            回报 分机字符串格式“<A HREF =”MAILTO:{ 0}“> {1} </ a>的); 
        
    } } 
]

看到渲染了现场演示,使用自定义渲染的例子

分组

分组电网

在组织行成组的网格面板是很容易的,首先我们指定groupField我们的商店的财产:

分机创建Ext.data.Store'  { 
    模式 “雇员” 
    数据 
    groupField  '部门' 
});

在gouping 商店 S请参阅数据手册接下来,我们配置了分组网格功能,处理,显示行组:

分机创建(的“Ext.grid.Panel'  { 
    ... 
    功能 [{ FTYPE  '分组'  }] 
});

看到分组网格面板,一个活生生的例子。

选择模型

有时网格面板是使用只在屏幕上显示的数据,但通常是必要的互动或更新数据。所有网格面板一个 Selection 模型决定数据如何被选中。选择模型的两个主要类型是行选择模型,在整个行被选中,和小区选择模型,单个细胞被选中。

网格面板使用行选择模型,默认情况下,但它很容易切换到一个小区选择模型

分机创建'Ext.grid.Panel'  { 
    selType  “cellmodel 
    商店 ... 
});

使用细胞选择模型,改变了几件事情。首先,现在点击一个细胞的选择只是电池(使用行选择模型,将选择整个行),其次键盘导航走行,而不是细胞,从细胞行。基于Cell的选择模型通常用于与编辑一起。

编辑

网格面板建立的编辑支持。我们要看看在两个主要的编辑模式-编辑行编辑和细胞

单元格编辑

单元格编辑,让你在编辑数据网格面板在一次细胞。在实施单元格编辑的第一步是配置为每个在您的网格面板,应该是可编辑的编辑器这是使用编辑器的配置。最简单的方法是指定领域的xtype您要使用作为编辑:

分机创建(的“Ext.grid.Panel'  { 
    ...  [ 
        { 
            文字 '电子邮件地址' 
            dataIndex  “电子邮件” 
            编辑 '文本框' 
       } 
    ] 
});

如果您需要更多的控制如何编辑领域的行为,编辑的配置,也可以采取一个字段的配置对象。例如,如果我们使用一个文本字段,我们需要一个值:

 [ 
    文字 '名称' 
    dataIndex  '名称' 
    编辑 { 
        的xtype  '文本框' 
        allowBlank  FALSE 
    } 
[

你可以使用任何类Ext.form.field包作为一个编辑字段。让我们假设我们要编辑一列包含日期。我们可以使用一个日期字段编辑器:

 [ 
    { 
        文字 '出生日期' 
        dataIndex  '生日' 
        编辑 “的DateField' 
    } 
]

,任何Ext.grid.column.Column在一个S 没有配置编辑器的网格面板将无法编辑。

现在我们已经配置的列,我们想成为编辑,编辑器,将用于编辑数据领域,下一步是要指定一个选择模型。让我们用一个 Cell 在我们的网格面板配置的选择模型

分机创建(的“Ext.grid.Panel'  { 
    ... 
    selType  'cellmodel' 
});

最后,我们需要配置的网格面板单元格编辑插件启用编辑

Ext.create('Ext.grid.Panel', {
    ...
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ]
});

,这一切需要创建一个可编辑的网格,使用单元格编辑。看到单元格编辑工作的例子。

单元格编辑网格

行编辑

行编辑,让你同时编辑编辑单元格,而不是整个行。行编辑工作方式完全相同的单元格编辑-所有我们需要做的是改变插件类型Ext.grid.plugin.RowEditing和设置selType到rowmodel

Ext.create('Ext.grid.Panel', {
    ...
    selType: 'rowmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 1
        })
    ]
});

行编辑 - 活生生的例子

行编辑网格

分页

有时过大,显示在一个页面上的所有数据集。 网格面板,支持两种不同的方法-分页分页工具栏加载使用上一个/下一个按钮的页面,分页滚轮加载新的页面内嵌滚动。

商店设置

之前,我们可以建立两种类型的分页上,网格面板,我们要配置的存储支持分页。在下面的例子中,我们添加的pageSize商店,我们配置totalProperty我们的读者

Ext.create('Ext.data.Store', {
    model: 'User',
    autoLoad: true,
    pageSize: 4,
    proxy: {
        type: 'ajax',
        url : 'data/users.json',
        reader: {
            type: 'json',
            root: 'users',
            totalProperty: 'total'
        }
    }
});

,totalProperty配置告诉读者从哪里得到的JSON响应结果的总数。这个商店配置消耗JSON响应,看起来像这样:

{
    "success": true,
    "total": 12,
    "users": [
        { "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" },
        { "name": "Bart", "email": "bart@simpsons.com", "phone": "555-222-1234" },
        { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" },
        { "name": "Marge", "email": "marge@simpsons.com", "phone": "555-222-1254" }
    ]
}

为更多的商店代理读者指到的数据手册

分页工具栏

现在,我们已经设置我们的商店,以支持分页,所有剩下的就是配置寻呼工具栏你可以把寻呼工具栏的任何地方在您的应用程序的布局,但它通常停靠在网格面板

       同店GridPanel中使用
        码头 '底部' 
        displayInfo  
    }] 
});

分页工具栏

分页工具栏示例

分页滚轮

电网作为替代使用分页工具栏的无限滚动支持。用户可以通过滚动成千上万的记录,没有renderering一次在屏幕上的所有记录的性能损失。电网应指定pageSize为绑定到店。

分机创建“Ext.grid.Panel  { 
    / /使用1 PagingGridScroller(这是一个PagingToolbar互换)
    verticalScrollerType  “paginggridscroller' 
    / /不重置滚动视图时refreshs 
    invalidateScrollerOnRefresh  假的
    / /无限滚动不支持选择
    disableSelection  真实的
    / / ... 
});

无限滚动示例

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:91299次
    • 积分:1196
    • 等级:
    • 排名:千里之外
    • 原创:19篇
    • 转载:7篇
    • 译文:22篇
    • 评论:1条
    文章分类
    文章存档