电网

翻译 2012年03月29日 23:10:47

电网

网格面板的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  真实的
    / / ... 
});

无限滚动示例

相关文章推荐

电网检修技改软件试用版下载连接

全新电网技术改造定额软件,凡购买超人电网技改软件可以-赠送价值570元定额书,活动期间名额有限,请速与我联系。联系人:魏先生 电话13392455660 QQ:1443963905《电网技术改造工程预...

国家电网利润超五大发电集团净利总和

国家电网利润超五大发电集团净利总和(腾讯财经配图) “到2015年,公司资产总额将超过3.1万亿元,营业收入将超过2.3万亿元,年度净资产收益率和国有资本保值增值率将不低于5%。”国家电网公司(下称...

SONY LANC协议应用-转载于 武汉广电网

SONY LANC协议应用-转载于 武汉广电网。

甘肃电网开创西北高海拨等电位带电功课先河

甘肃电网首创西北高海拨等电位带电作业先河   中电消息网讯 通信员 赵志鹏 赵文丽 报道 11月8日,国网甘肃电力带电作业职员在海拨2800米高度,杰出实现了甘肃永登750千伏武胜至河西二线15...

国内外智能电网发展分析

智能电网(Smart Grid)即电网的智能化,使用新技术如分布式能源、自动化配电线路、先进传感器设备、特高压、电网通信信息安全建设、电动汽车技术等,建设智能电网可以优化资源配置,降耗增效。国外智能电...

基于智能电网的电力线载波通信研究

基于智能电网的电力线载波通信研究 张家泳 (重庆邮电大学通信与信息工程学院  重庆 400065) 摘要:本文主要介绍了电力线通信(PLC)的发展情况和电力线通信的优缺点, 简单介绍了智能电网概念和特...

智能电网势头好 电能表商纷纷扩张产能

随着智能电网的全面建设,作为连接电网与客户的关键环节,智能电能表作用非常重要。它不仅决定客户用电的智能化水平,还将帮助客户合理用电,并实现节能减排。   有资料表明,从2010年至2015年间,...

(华电网)通信技术基础知识

(华电网)通信技术基础知识 电信网(telecommunication network)是构成多个用户相互通信的多个电信系统互连的通信体系,是人类实现远距离通信的重要基础设施,利用电缆、无线、光纤或...

智能电网配网传输: 工业以太网交换机还是EPON?

智能电网配网传输: 工业以太网交换机还是EPON? 工业以太网交换机和工业EPON作为目前两种最为重要的配网通讯解决方案,各有其特点。本文从协议、工业化程度、组网方式、可维护等方面对两种方案进行...

智能电网配网传输: 工业以太网交换机还是EPON?

工业以太网交换机和工业EPON作为目前两种最为重要的配网通讯解决方案,各有其特点。本文从协议、工业化程度、组网方式、可维护等方面对两种方案进行一个简单比较。 协议标准化       交换机成熟商用...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)