ext.net gridpanel选中行数据传递到formpanle

　　公司最近要做一个web项目，为了快速开发，决定使用ext.net来开发。在之前的一年多时间里全是做的一些桌面开发，asp.net方面的很多东西都忘记了，特别是javascript相关的东西，很久没有用了。于是前几天抓紧时间熟悉ext.net ,下载了相关的源码和案例自学。看了一下觉得基本懂了，于是试着搞搞结果自己一动手才知道问题多多。首先是ext.net 的mvc实现业务数据层的处理都是采用url配置路由来是实现的，这个功能我也是看了半天。

　　言归正传说说今天晚上的主题：如何把一个GridPanel中选中的某行数据，传递到一个弹出Window的FromPanel中去，并实现数据和控件的自动绑定呢？

　　有人说可以传递该行数据的主键ID，让后从数据库等数据源中去读取，这里我认为这是很“费劲的”处理方式，不仅加大了数据库等数据源的访问量，效率也会更底。因为这些数据基本上已经是从数据库取得了的，何必再次问人家获取一次呢！经过研究可以通过使用FormPanel的form.loadRecord(data)来实现。

　　直接上代码：比如Gridpanel最后有一列编辑列。

GridPanel Edit Column

 1 <ext:CommandColumn Width="25" Hideable="false">

 2                                     <Commands>

 3                                         <ext:GridCommand CommandName="Edit" Icon="ApplicationFormEdit">

 4                                             <ToolTip Text="编 辑" />

 5                                         </ext:GridCommand>

 6                                     </Commands>

 7                                     <PrepareToolbar Handler="toolbar.setVisible(!record.newRecord);" />

 8                                 </ext:CommandColumn>

 9                                 <ext:CommandColumn Width="25" Hideable="false">

10                                     <Commands>

11                                         <ext:GridCommand CommandName="Delete" Icon="Cross">

12                                             <ToolTip Text="删 除" />

13                                         </ext:GridCommand>

14                                     </Commands>

15                                     <PrepareToolbar Handler="toolbar.setVisible(!record.newRecord);" />

16                                 </ext:CommandColumn>

17                             </Columns>

18                         </ColumnModel>

19                         <SelectionModel>

20                             <ext:RowSelectionModel runat="server" SingleSelect="true" />

21                         </SelectionModel>

22                         <LoadMask ShowMask="true" />

23                         <Listeners>

24                             <Command Fn="commandHandler" />

25                         </Listeners>

26                     </ext:GridPanel>

commandHandler

 1    var commandHandler = function (cmd, record) {

 2             switch (cmd) {

 3                 case "Edit":

 4                     var win = OrgInfoWin;

 5                     var effDate = record.data.EffDate;

 6                     if (effDate != null && typeof (effDate) == "string") {

 7                         effDate = effDate.toString();

 8                         record.data.EffDate = eval("new " + effDate.substr(1, effDate.length - 2));

 9                     }

10                     var expDate = record.data.ExpDate;

11                     if (expDate != null && typeof (expDate) == "string") {

12                         expDate = expDate.toString();

13                         record.data.ExpDate = eval("new " + expDate.substr(1, expDate.length - 2));

14                     }

15                     orgPanel.form.loadRecord(record);

16                     win.setTitle(record.data.OrgName);

17                     win.show();

18                     break;

19                 case "Delete":

20                     Ext.Msg.confirm('Alert', 'Delete Record?', function (btn) {

21                         if (btn == "yes") {

22                             dsCustomers.remove(record);

23                             dsCustomers.save();

24                         }

25                     });

26                     break;

27             }

28         };

commandHandler 中的orgPanel就是对应的FormPanel。重点是FormPanel中的<ext:TextField>等控件的Id名称必须和data中的数据的名称对应，并且数据类型也应该一致，这样才能绑定上，夜已深了，潦草的写一下，还望见谅！

2012-06-18 23:51:57