Coolite中获取GridPanel选中行值及组件交互技巧

在Coolite框架中，前端开发人员可能会遇到一个需求，即获取GridPanel（网格面板）中当前选中的行的各个字段值。GridPanel是Ext JS库中的一个重要组件，用于显示数据列表并允许用户进行交互，如选择、编辑和排序。本文档将指导你如何实现这一功能。 首先，你需要在页面中配置以下关键的Ext JS组件： 1. Store（数据源）：这是存储数据的地方，通常通过JSONReader解析后端返回的数据。创建一个名为Store1的Store，设置其数据格式如下： ```html <ext:Store ID="Store1" runat="server" onbeforestorechanged="Store1_BeforeStoreChanged"> <Reader> <ext:JsonReader ReaderID="id"> <Fields> <ext:RecordFieldName id="id" Type="Int"></ext:RecordField> <ext:RecordFieldName uid="uid" Type="String"></ext:RecordField> <ext:RecordFieldName uname="uname" Type="String"></ext:RecordField> <ext:RecordFieldName uage="uage" Type="Int"></ext:RecordField> </Fields> </ext:JsonReader> </Reader> </ext:Store> ``` 这里的`ReaderID`设置可以帮助你在后续代码中使用`GridPanel1.getSelectionModel().getSelected().id`来获取特定行的id值，前提是GridPanel的`SelectionMode`被设置为`rowmodel`或类似行选择模式。 2. Menu（菜单）：创建一个右键菜单，例如Menu1，用于提供与GridPanel交互的功能： ```html <ext:Menu ID="Menu1" runat="server"> <Items> <ext:MenuItem ID="MenuItem1" runat="server" Text="查看用户信息"> <Listeners> <Click Fn="ShowUserInfo"/> <!-- 其他监听器和事件处理 --> </Listeners> </ext:MenuItem> </Items> </ext:Menu> ``` `ShowUserInfo`函数是关键部分，它将在用户点击“查看用户信息”菜单项时被调用。这个函数将涉及获取当前选中的行数据并进行相应的操作。下面是一个可能的`ShowUserInfo`实现示例： ```javascript function ShowUserInfo() { var selectedRow = GridPanel1.getSelectionModel().getSelected(); if (selectedRow) { var id = selectedRow.get('id'); // 获取id字段的值 var uid = selectedRow.get('uid'); var uname = selectedRow.get('uname'); var uage = selectedRow.get('uage'); // 这里可以执行如查询后台接口、填充相关组件或弹窗显示用户信息的操作 // 例如： console.log('当前用户信息:', { id: id, uid: uid, uname: uname, uage: uage }); // 或者 ShowUserDetails(id, uname); } else { alert('请选择一行再查看信息！'); } } ``` 在这个例子中，`Get()`方法被用来获取每个字段的值，然后你可以根据需要进一步处理这些数据。如果你还需要将数据传递到后台并接收响应，可以在`ShowUserDetails`函数中实现这部分逻辑，比如使用AJAX请求或者Ext.Ajax工具。 总结来说，要在Coolite中获取GridPanel当前选中的行值，你需要配置Store来处理数据，设置GridPanel的选中模式，创建菜单以触发操作，以及编写函数来获取并处理选中行的数据。通过这种方式，你可以实现灵活的数据交互和用户界面操作。