Learning EXT 翻译(十一)
- 格式：doc
- 大小：167.00 KB
- 文档页数：11
第五章 使用grid显示数据（3）
利用PHP从数据库加载数据：
GridPanel的设置保持不变。和从静态文件中读取JSON数据不同的是，我们需要利用PHP来从数据库中获取数据，然后格式化为Ext可以读懂的JSON：
// connect to database
$sql = "SELECT * FROM movies";
$arr = array();
If (!$rs = mysql_query($sql)) {
Echo '{success:false}';
}else{
while($obj = mysql_fetch_object($rs)){
$arr[] = $obj;
}
Echo '{success:true,rows:'.json_encode($arr).'}';
}
?>
N：这里的PHP代码的旨在用最简单的语句来完成任务。在真正的产品中，你可能要考虑SQL注入攻击、错误监测和用户验证——本例的代码并没有设计这么多。
编写grid：
之前我们的代码都着眼于如何让grid显示内容，但是我们经常会要求grid能够对用户的输入做相应。一种最常用的交互方式就是选中或者移动一行或者几行数据。ExtJS引用了这些交互，用selection model（选择模型）来处理它。让我们来看看如何建立这个selection model。 处理单元格和行的选择：
Ext的grid提供了监听用户和表格的行、单元格以及列交互事件的工具，那就是selection model（选择模型）。selection model用来决定行、列或者单元格怎样被选中以及允许多少项可以被同时选中。它允许我们为选择事件添加一些listener，同时给我们提供了一种查询选择行的方法。
列出一些selection model：
CellSelectionModel：让用户只能选择单一的单元格；
RowSelectionModel：让用户选择完整的行；
ColumnSelectionModel：让用户选择完整的列；
CheckBoxSelectionModel：让用户使用checkbox（复选框）来做行的选择；
我们需要根据自己项目的需求来选择selection model，对于我们的电影数据，我们需要使用row selection model，这是一种最普遍的selection model。
在GridPanel中使用cm配置项来定义selection model。
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
})
我们还需要让singleSelect配置项为true，这样就可以阻止用户同时选择多行。
监听selection model的选择事件：
listener（监听器）可以在任何地方引入，完全取决于需要的交互。开始，我们将listener放在column model中，因为我们需要监听列的动作。
但在这里，我们将listener加在selection model中，因为我们想知道用户在什么时间选择了一个电影。
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: { fn: function(sm,index,record) {
.Msg.alert('You Selected',record.data.title);
}
}
}
})
选择一列会弹出一个alert提示框，让我们看看到底发生了什么：
我们为rowselect事件建立了一个listener，它用来等待行被选中，从而执行相应的函数；
向function传递selection model，选中行的序号（第一行为0），以及选中行的数据记录；
利用function中接收的数据记录来获取电影的题目然后在信息框中显示。
用代码操控grid（以及它的数据）：
操控grid和它的数据的函数有很多，可以绑定到其他的Ext控件上来完美地满足很多功能需求。
在点击按钮时改变grid：
这里，我们准备添加一个顶部工具栏，它将包含一个按钮来弹出提示窗口，用来编辑电影的标题。 tbar: [{
text: 'Change Title',
handler: function(){
var sm = grid.getSelectionModel();
if (sm.hasSelection()){
var sel = sm.getSelected();
Ext.Msg.show({
title: 'Change Title',
prompt: true,
buttons: Ext.MessageBox.OKCANCEL,
value: sel.data.title,
fn: function(btn,text){
if (btn == 'ok'){
sel.set('title', text);
}
}
});
}
}
}]
我们只需要改变data store即可。服务器上的数据库还是保持不变的，服务器也不知道到底有改变没有。我们的任务就是通过AJAX请求或者其它方式来让服务器得知数据的改变。
让我们快速地看下这里发生了什么：
sm：从grid中获得的selection model；
sel：利用selection model来获得被选中的行；
sel.data：使用被选中项的数据对象，我们可以获得它的数据。
这个基本的方法可以用来建立很多有趣的用户交互，我们唯一的限制就是一天只有24小时，并且我们还需要睡觉。（作者够幽默）
高级grid格式化：
因为我们都想建立一些用户与grid之间的交互，那就让我们先添加更多的按钮来做更好玩的事情。
这里有一个可以添加到工具栏上的按钮，它能偶让我们隐藏以及显示列。我们还可以基于列的可见与否动态改变按钮上的文字。
{
text: 'Hide Price',
handler: function(btn){
var cm = grid.getColumnModel();
var pi = cm.getIndexById('price'); if (cm.isHidden(pi)){
cm.setHidden(pi,false);
btn.setText('Hide Price');
}else{
cm.setHidden(pi,true);
btn.setText('Show Price');
}
btn.render();
}
}
我们使用了一个新的方法——getIndexById，你可以想象——获得列的序号（从0到比列总数少1），它可以被用来得知一个列和其它列的关系。在我们的grid代码中，price列是第四列，所以他的index（序号）是3，因为是从0开始计数的。
