Extjs教程_第六章_Editor_Grids(可编辑表格) (转载)

 

在之前的一章中我们学习了如何在结构化的表格中显示用户可操作的数据。但是，这种表格有一个最大的限制，那就是用户无法自己编辑表格中的数据。幸运的是，Ext提供了EditorGridPanel这一控件，它支持用户对表格进行编辑——我们现在就对这一控件进行学习。它的工作形式类似于Excel，允许用户在点击单元格后进行数据的编辑操作。

在这章里，我们将会学到：

·         为用户提供连接到data store的可编辑表格；

·         把编辑后的数据发给服务器，允许用户通过ExtJS的editor grid更新服务器端的数据；

·         通过编码操控grid并对事件做出相应；

·         教给你一些高级的格式化小窍门并且让您建立更加强大的editor grid。

但是，首先，我们要看看可以用可编辑表格能够做什么事情。

我们能用可编辑表格做什么？

EditorGridPanel和我们之前使用到的表单（form）很相似。实际上，editor gird使用了和form中完全一样的表单字段。通过使用表单字段来实现对grid单元格进行编辑，我们可以充分利用表单字段提供的同样的功能。包括输入约束以及数值验证等。把它和Ext的GridPanel联合起来，就造就了可以满足我们任何需求的漂亮的控件。

 

这个表格中的所有字段都可以被编辑，如同使用表格字段中的text field（文本字段）、date picker（日期选择器）、combo box（组合框/下拉菜单）一般。

使用可编辑的表格：

可编辑和不可编辑表格的区别十一个相当简单的开始的过程。复杂的使我们需要处理编辑状态然后传回服务器。但是一旦你学会了如何去做，这部分也就同样变得相当的简单。

让我们先看看如何把第五章开头部分的表格升级到可以编辑电影标题（title）、导演（director）、和标语（tagline）。修改后的代码如下所示：

var title_edit = new Ext.form.TextField();

var director_edit = new Ext.form.TextField({vtype: 'name'});

   var tagline_edit = new Ext.form.TextField({

   maxLength: 45

});

var grid = new Ext.grid.EditorGridPanel({

   renderTo: document.body,

   frame:true,

   title: 'Movie Database',

   height:200,

   width:520,

   clickstoEdit: 1,

   store: store,

   columns: [

            {header: "Title", dataIndex: 'title',editor: title_edit},

            {header: "Director", dataIndex: 'director',editor: director_edit},

            {header: "Released", dataIndex: 'released',renderer: Ext.util.Format.dateRenderer('m/d/Y')},

            {header: "Genre", dataIndex: 'genre',renderer: genre_name},

            {header: "Tagline", dataIndex: 'tagline',editor: tagline_edit}

   ]

});

为了让grid可编辑，我们需要做四件事情。它们是：

·         表格的定义由Ex.grid.GridPanel转化为Ext.grid.EditorGridPanel；

·         为grid的配置添加clicksToEdit——这个选项不是必须的，默认双击触发编辑；

·         为每列建立一个表单字段用来编辑；

·         通过editor配置把表单字段传递给column model。

editor可以是ExtJS中的任何表单字段，或者是你自定义的字段。我们先从建立文本字段编辑电影标题开始。

var title_edit = new Ext.form.TextField();

然后，我们利用editor配置向column model添加表单字段：

{header: "Title", dataIndex: 'title', editor: title_edit}

接下来把GridPanel组件改为EditorGridPanel，然后添加clicksToEditor配置：

var grid = new Ext.grid.EditorGridPanel({

   renderTo: document.body,

   frame:true,

   title: 'Movie Database',

   height:200,

   width:520,

   clickstoEdit: 1,

   // removed extra code for clarity

})

通过进行这些改变，静态的表格就变为了可编辑的表格，我们可以通过点击任何建立了editor的字段来进行编辑。

 

我们看到了有的电影标题发生了改变，把他们变成了音乐剧(musical)。editor（编辑器）只需你单击便可被激活。按下Enter、Tab键或者在该字段外点击鼠标都可以保存改动。按下Esc键可以放弃改动。它和表单字段的工作方式很想象……因为……它本身就是个表单字段。

左上角的红色标记表示这个单元格是“dirty”的，即我们只是做了暂时的改动（还没有被提交）。首先，让我们做一些更复杂的可编辑单元格。

编辑更多单元格中的数据：

对于我们基本的editor grid，我们从使单独的列可编辑开始。为了建立editor（编辑器），我们建立了对表单字段的引用：

var title_edit = new Ext.form.TextField();

然后我们把这个表单字段当做列中的editor使用：

{header: "Title", dataIndex: 'title', editor: title_edit}

这就是对每个字段的基本要求，现在让我们扩展一下知识。

使用更多的类型的字段进行编辑：

现在我们利用其它的表单字段来建立editor。不同的数据类型有不同的editor与之对应，每一种字段也有着不同的配置。

所有类型的字段都可以被用来充当editor，这里列出一些标准的类型：

·         TextField

·         NumberField

·         ComboBox

·         DateField

·         TimeField

·         CheckBox

这些editor可以被拓展，从而满足各种编辑需求，但是现在，我们先从编辑电影表格的字段开始——release date（发行日期）列和genre列。

编辑日期数值：

对于release date（发行日期）一列中的单元格我们可以通过使用DateField进行编辑。我们先得建立编辑字段并且提供相应格式字符串：

release_edit = new Ext.form.DateField({

   format: 'm/d/Y'

});

接下来我们可以把这个editor应用到列中，采用的方式仍然是之前提及的renderer：

{header: "Released", dataIndex: 'released', renderer: Ext.util.Format.dateRenderer('m/d/Y'), editor: release_edit}

 

这个列还是利用了renderer，renderer和editor将同时共存。当editor被激活后，renderer就会对editor进行渲染等操作。所以当我们完成编辑后，renderer将会进行对该字段的格式化操作。

利用ComboBox编辑：

让我们为genres列建立一个editor，用来提供一个显示合法的genres的下拉列表——听起来很适合采用combo box。

var genre_edit = new Ext.form.ComboBox({

   typeAhead: true,

   triggerAction: 'all',

   mode: 'local',

   store: genres,

   displayField:'genre',

   valueField: 'id'

});

简单的把这个editor添加到column model中：

{header: "Genre", dataIndex: 'genre', renderer: genre_name, editor: genre_edit}

效果如下：

 

对单元格编辑做出反应：

当然，我们需要指出如何保存编辑后的结果。用户不会愿意丢弃所有改动的。我们可以通过监听特殊的编辑事件来进行保存，然后通过自定义的函数来对它们做出反应。在我们开始编码前，我们需要了解editor grid的工作方式。

什么是dirty cell（脏单元格）？

当一个字段被编辑后而且它的值被改动，这时候我们可以称之为dirty（脏），除非data store得知改到并做保存改动，否则它将一直处于dirty的状态。这个“dirty”的值被保存在一个暂时的data store中，这个暂时的data store保存了包含所有改动的一个数据版本。我们的本来的那个data store依然保持不变。

我们可以通过调用commit函数来保存改动，或者通过reject函数来忽略改动。这些函数可以为整个表格或者某个单元格所调用，或者作为某一事件的结果。

让我们把e想象为一个edit（编辑）事件对象。我们可以拒绝改动一条记录通过调用reject函数：

e.record.reject();

或者，我们可以通过提交来保存改动：

e.record.commit();

当编辑发生时进行反应：

为了把改动保存到data store，我们将要监听编辑完成这一事件，这一事件的名称叫做afteredit（编辑完成之后）：

var grid = new Ext.grid.EditorGridPanel({

   // more config options clipped //,

   title: 'Movie Database',

   store: store,

   columns: // column model clipped //,

   listeners: {

            afteredit: function(e){

                     if (e.field == 'director' && e.value == 'Mel Gibson'){

                               Ext.Msg.alert('Error','Mel Gibson movies not allowed');

                               e.record.reject();

                     }else{

                               e.record.commit();

                     }

            }

   }

});

和其它的listener（监听器）一样，editor grid的listener提供了一个当事件发生时执行的函数。afteredit中的function在调用时只为其传递了一个参数：一个包含很多有用属性的对象。我们可以利用这些属性来对已经发生的编辑做出决定。

属性	说明
grid	编辑事件所发生的grid。
record	正在编辑的记录；其他列的数据可以通过使用这个对象的“data”属性找到。
field	被编辑列的名字。
value	包含该单元格改动后的数据的字符串。
originalValue	包含该单元格原始数据的字符串。
row	被编辑的行的index（序号）。
column	被编辑列的index（序号）。

据个例子，如果我们想要确定由Mel Gibson指导的电影永远不要存进数据库中，我们可以添加一个简单的检验：

if (e.field == 'director' && e.value == 'Mel Gibson'){

   Ext.Msg.alert('Error','Mel Gibson movies not allowed');

   e.record.reject();

}else{

   e.record.commit();

}

首先，我们要确定被编辑的字段是“director”。然后，我们需要保证输入到单元格中的新的值不是Mel Gibson。如果其中一个是false，我们便可以把这条记录提交到data store。这意味着，一旦我们调用了commit函数，我们的原始的data store就被更新为新的值。

e.record.commit();

我们还可一拒绝提交——永久删除改动：

e.record.reject();

当然，现在我们所要做的就是更新在浏览器中存储的数据，我肯定你对如何更新浏览器还是手足无措，我们将很快学到这些。

向data store中添加或者删除数据:

我们将添加两个按钮，用来改变data store——添加或者删除成行的数据。让我们在grid中建立一个顶部工具栏(tbar)来放置这些按钮：

var grid = new Ext.grid.EditorGridPanel({

   // more config options clipped //,

   tbar: [{

            text: 'Remove Movie'

   }]

}

从data store中删除grid中的行：

我们先往toolbar中添加一个remove按钮。当我们点击后，将会弹出对话框来显示电影标题。如果我们点击Yes按钮，我们就可以从data store中移除选中行，否则，将不执行任何动作。

{

   text: 'Remove Movie',

   icon: 'images/table_delete.png',

   cls: 'x-btn-text-icon',

   handler: function() {

            var sm = grid.getSelectionModel();

            var sel = sm.getSelected();

            if (sm.hasSelection()){

                     Ext.Msg.show({

                               title: 'Remove Movie',

                               buttons: Ext.MessageBox.YESNOCANCEL,

                               msg: 'Remove '+sel.data.title+'?',

                               fn: function(btn){

                                        if (btn == 'yes'){

                                                 grid.getStore().remove(sel);

                                        }

                               }

                     });

            };

   }

}

 

让我们看看这里发生了什么。我们需要定义一些变量用来判断是否有选择事件发生，以及选择了什么：

·         sm：从grid中获得的selection model；

·         sel：我们使用selection model来获得被选中的行；

·         grid.getStore().remove(sel)：对data store执行remove函数，传递被选择的行，从而从data store中移除该行并且更新grid。

就是这么简单。在浏览器内存中的本地data store被更新了。但是你还不能添加东西，耐心点，我们接下来就会接触到。

向grid中添加行：

为了增加一行我们需要做一些小小的改变。我们需要定义数据是如何展现的，从而使得我们可以新建一行——如同我们在data reader中建立一样。

var ds_model = Ext.data.Record.create([

   'id',

   'coverthumb',

   'title',

   'director',

   {name: 'released', type: 'date', dateFormat: 'Y-m-d'},

   'genre',

   'tagline',

   {name: 'price', type: 'float'},

   {name: 'available', type: 'bool'}

]);

当我们为数据做了如上的定义，我们就可以插入一新行了。可以为toolbar添加这样一个按钮来插入行：

{

   text: 'Add Movie',

   icon: 'images/table_add.png',

   cls: 'x-btn-text-icon',

   handler: function() {

            grid.getStore().insert(

                     0,

                     new ds_model({

                               title:'New Movie',

                               director:'',

                               genre:0,

                               tagline:''

                      })

            );

            grid.startEditing(0,0);

   }

}

insert函数的第一个参数是插入数据的位置。我选择了0，所以该记录会被加在最顶端。如果我们想要在最后加入记录，只需要获得行的总数即可，因为行的总数就是比现有最后一条记录大1的数字。

grid.getStore().insert(

   grid.getStore().getCount(),

   new ds_model({

            title:'New Movie',

            director:'',

            genre:0,

            tagline:''

   })

);

grid.startEditing(grid.getStore().getCount()-1,0);

 

回到正题，第二个参数是新的记录的定义，可以向其传递一些默认值：

new ds_model({

   title:'New Movie',

   director:'',

   genre:0,

   tagline:''

})

在插入新行之后，我们调用一个函数来激活单元格编辑状态。这个函数只需要行和列的index作为参数即可。

grid.startEditing(0,0);

它可以使用户在点击Add Movie按钮后直接开始编辑电影名称。

 

将编辑过的数据保存至服务器：

我们现在已经可以更新浏览器中的本地的data store了。我们还会希望数据可以被保存在服务器端从而更新数据库、文件系统或者之类的什么东西。这段内容将会介绍一些web应用中grid的常用需求来更新服务器端的信息。

·         更新一条记录

·         建立一条记录

·         删除一条记录

将更新传至数据库：

之前，我们已经建立了一个针对afteredit的listener。我们将使用afteredit事件来向服务器端传递以单元格为单位的数据变动。

为了向服务器更新单元格的改动，我们需要知道3个东西：

·         field：那个字段改变了；

·         value：字段的新值是什么；

·         record.id：这个字段属于数据库中的哪一行。

这些信息足够让我们对数据库进行单独的更新。我们通过调用connection的request方法来和服务器进行通信。

listeners: {

   afteredit: function(e){

            var conn = new Ext.data.Connection();

            conn.request({

                     url: 'movie-update.php',

                     params: {

                              action: 'update',

                               id: e.record.id,

                               field: e.field,

                               value: e.value

                     },

                     success: function(resp,opt) {

                               e.commit();

                     },

                     failure: function(resp,opt) {

                               e.reject();

                     }

            });

   }

}

请求将发给movie-update.php，一共有四个参数。movie-update需要识别update这一动作，然后读取id、field和value数据，然后更新文件系统或者数据库，或者其它我们需要改变的东西。

以下是我们使用afteredit事件的现成的参数：

属性	说明
grid	编辑事件所发生的grid。
record	正在编辑的记录；其他列的数据可以通过使用这个对象的“data”属性找到。
field	被编辑列的名字。
value	包含该单元格改动后的数据的字符串。
originalValue	包含该单元格原始数据的字符串。
row	被编辑的行的index（序号）。
column	被编辑列的index（序号）。

（作者写两次，不觉得烦啊。。。）

从服务器删除数据：

当我们想从服务器删除数据时，我们可以利用和更新同样的方式来处理——向服务器端脚本发请求，然后告诉服务器我们想做什么。

对于删除操作，我们在grid的toolbar里使用另一个按钮。

{

   text: 'Remove Movie',

   icon: 'images/table_delete.png',

   cls: 'x-btn-text-icon',

   handler: function() {

            var sm = grid.getSelectionModel();

            var sel = sm.getSelected();

            if (sm.hasSelection()){

                     Ext.Msg.show({

                               title: 'Remove Movie',

                               buttons: Ext.MessageBox.YESNOCANCEL,

                               msg: 'Remove '+sel.data.title+'?',

                               fn: function(btn){

                                        if (btn == 'yes'){

                                                 var conn = new Ext.data.Connection();

                                                 conn.request({

                                                           url: 'movie-update.php',

                                                           params: {

                                                                    action: 'delete',

                                                                    id: e.record.id

                                                           },

                                                           success: function(resp,opt) {

                                                                    grid.getStore().remove(sel);

                                                           },

                                                           failure: function(resp,opt) {

                                                                    Ext.Msg.alert('Error',

                                                                    'Unable to delete movie');

                                                           }

                                                 });

                                        }

                               }

                     });

            };

   }

}

我们现在可以通过发请求来删除一行数据。movie-update.php得知动作为delete时会执行相应操作。

在服务器端保存新行：

我们将添加另一个按钮用来增加新的一行。它向服务器发送请求，传递适当的参数，然后从服务器端的响应中读取insert id。我们可以利用服务器产生的唯一标识——insert id——向data store中添加一行。

{

   text: 'Add Movie',

   icon: 'images/table_add.png',

   cls: 'x-btn-text-icon',

   handler: function() {

            var conn = new Ext.data.Connection();

            conn.request({

                     url: 'movies-update.php',

                     params: {

                               action: 'insert',

                               title:'New Movie'

                     },

                     success: function(resp,opt) {

                               var insert_id = Ext.util.JSON.decode(resp.responseText).insert_id;

                               grid.getStore().insert(0,

                                        new ds_model({

                                                 id:insert_id,

                                                 title:'New Movie',

                                                 director:'',

                                                 genre:0,

                                                 tagline:''

                                        })

                               );

                               grid.startEditing(0,0);

                     },

                     failure: function(resp,opt) {

                               Ext.Msg.alert('Error','Unable to add movie');

                     }

            });

   }

}

和编辑删除很相似，我们将会想服务器发送请求来实现插入一行。这次，我们先看下响应。响应中包含了insert id（行的唯一标识符），g所以当我们开始编辑那一行时，将很容易保存改动。

success: function(resp,opt) {

   var insert_id = Ext.util.JSON.decode(resp.responseText).insert_id;

   grid.getStore().insert(0,

            new ds_model({

                     id:insert_id,

                     title:'New Movie',

                     director:'',

                     genre:0,

                     tagline:''

            })

   );

   grid.startEditing(0,0);

}

success函数有2个参数，第一个是响应对象，包含了从movie-update.php返回的响应文本。因为响应是JSON格式，所以我们需要把他decode（解码）成可用的对象然后获取insert id。

var insert_id = Ext.util.JSON.decode(resp.responseText).insert_id;

当我们将该行插入data store时，我们可以使用获得的insert id值。

总结：

ExtJS中的grid是该架构中最为高级的部分之一。利用Ext.data包，grid可以从远程数据库采用集成的方法获取信息——这种支持在grid类中是内置的。感谢现成的配置对象，我们可以把数据以各种形式展示出来并且让用户得以控制。

在这章里，我们知道grid如何提供数据支持，用来使开发者进行他们所熟知的数据操作。修改和提交的方法让数据得到了很好的控制，并且可以在发送给服务器时进行校验、拒绝改动等操作。除了介绍修改数据，我们还知道了如何提供增加和删除行数据的功能。

我们还看到了标准的ExtJS表单字段，例如ComboBox，是如何集成到grid中。凭借这样有力的数据输入支持，grid为应用开发者提供了异常强大的工具。

在接下来的一章，我们将演示诸如grid这样的组件是如何同其它组件集成到一块显示在屏幕上的。利用广泛的layout（布局），我们可以轻松实现所述的这种功能。