电网

翻译 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  真实的
    / / ... 
});

无限滚动示例

项目经验-国家电网

项目名称: 国家电力监测中心设备资源管理系统 开发环境:Windows7  J2EE1.6     jdk1.6,   Tomcat6.06 开发工具:MyEclipse/Eclipse  Mys...

宇宙的电网模型之太阳实验起源谭

宇宙的电网模型之太阳实验起源谭谭理事宇宙的模型中最著名的就是西方人的宇宙大爆炸模型。西方人用他们遵守规则的本性,用红移规则把这个模型发挥到了极致,居然把大爆炸的时间点,137亿年后面的小数点都打出来了...
  • TLS213
  • TLS213
  • 2011年07月04日 16:18
  • 1507

华中电网7.1停电事故教训

2006年7月1日,华中(河南)电网因继电保护误动作、安全稳定控制装置拒动等原因引发一起重大电网事故,导致华中(河南)电网多条500千伏线路和220千伏线路跳闸、多台发电机组退出运行,电网损失部分负荷...

智能电网与配网自动化工程建设

[导读] 智能电网是一项集计算机技术、数据传输、控制技术、现代化设备及管理于一体的综合信息管理系统,通常习惯称为电网自动化系统。智能电网建设的主要任务是重点推进智能化电气设备装备推广应用,实现电网管理...

智能电网:光纤入户振兴通信技术

20世纪70年代,我国电力通信主要以电力线模拟载波为主,传统的电力线载波通信(PLC)主要利用高压输电线路作为高频信号的传输通道,在电网发生事故时常因通信不灵、调度指挥不及时而扩大事故或延长处理时间,...

智能电网技术:奥克尼群岛电力解决方案

智能电网技术:奥克尼群岛电力解决方案 集群内存数据库系统助力Smarter Grid主动电网管理技术满足性能和可靠性挑战...

电网时间同步系统---概念

时间同步系统

电网QT项目|QT的QTextEdit

坑爹啊!
  • fxt0706
  • fxt0706
  • 2016年04月02日 20:55
  • 301

思科路由器安全加固方案(南方电网预实施方案)

http://www.youxia.org/2011/08/Route-JiaGu.html 一、 控制层面主要安全威协与应对原则 网络设备的控制层面的实质还是运行的一个操作系统,既然是一...
  • god_7z1
  • god_7z1
  • 2011年12月31日 17:39
  • 1162

今达电网技改及检修预算软件

今达电网检修预算软件
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:电网
举报原因:
原因补充:

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