Coolite 中前台获取 GridPanel 当前选择行值的代码

主要目的

a. 掌握获取 GridPanel 当前行的各个字段值的方法
b. 掌握如何将前台数据传递到后台,并将后台操作结果返回到前台
c. 掌握如何获取和设置 button 和 textField 控件的文本值

主要内容

a. 我们先在页面中添加三个 ext 组件:store, menu,gridpanel

b. 将 gridpanel 的contextmenuID 设置为 menu 控件的ID, 从而为GridPanel 添加右键菜单


代码如下:

<ext:Store ID="Store1" runat="server"
onbeforestorechanged="Store1_BeforeStoreChanged" >
<Reader>
<ext:JsonReader ReaderID="id" >
<Fields >
<ext:RecordField Name="id" Type="Int"></ext:RecordField>
<ext:RecordField Name="uid" Type="String"></ext:RecordField>
<ext:RecordField Name="uname" Type="String"></ext:RecordField>
<ext:RecordField Name="uage" Type="Int"></ext:RecordField>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>

此处的 ReaderID 可以不设置,设置了的话,就可以使用方法 GridPanel1.getSelectionModel().getSelected().id 来获取该行 id 字段所对应的值。
使用该方法的前提是在GridPanel 中设置其选择方式为行选择模式,代码会在后面贴出。Name 对应于数据库表中的字段名。


代码如下:

<ext:Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="查看用户信息">
<Listeners>
<Click Fn="ShowUserInfo" />
</Listeners>
</ext:MenuItem>
<ext:MenuItem ID="MenuItem2" runat="server" Text="修改用户信息">
<Listeners>
<Click Fn="ShowUserInfo" />
</Listeners>
</ext:MenuItem>
<ext:MenuItem ID="MenuItem3" runat="server" Text="添加用户信息">
<Listeners>
<Click Fn="ShowUserInfo" />
</Listeners>
</ext:MenuItem>
<ext:MenuItem ID="MenuItem4" runat="server" Text="删除用户信息">
<Listeners>
<Click Fn="DeleteUserInfo" />
</Listeners>
</ext:MenuItem>
</Items>
</ext:Menu>

效果如下:

c. 将 gridPanel 的 storeID 设为 store 控件的 ID, 为 Gridpanel 添加数据源

GridPanel 源码如下:


代码如下:

<ext:GridPanel ID="GridPanel1" runat="server" ContextMenuID="Menu1" AutoHeight="true" Width="400px"
AutoDataBind="true" StoreID="Store1">

<ColumnModel ID="ctl10">
<Columns>
<ext:Column DataIndex="id" Header="用户编号">
<PrepareCommand Args="grid, record, rowIndex, columnIndex, value" />
</ext:Column>
<ext:Column DataIndex="uid" Header="用户名">
<PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand>
</ext:Column>
<ext:Column DataIndex="uname" Header="用户昵称">
<PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand>
</ext:Column>
<ext:Column DataIndex="uage" Header="用户年龄">
<PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" ID="ctl09"></ext:RowSelectionModel>
</SelectionModel>
<LoadMask ShowMask="true" Msg="数据正加载中..." />
<Listeners>
<CellClick Fn="ShowUserInfo" />
</Listeners>
</ext:GridPanel>

此处要作几点说明
首先,cellclick 事件传递的参数可以根据 PrepareCommand 中 Args 设置的参数传递,比如 grid, command, record, row,col, value
其次此处的 SelectionModel 节点内定要使用 RowSelectionModel

d. 前台 extjs 脚本如下:

代码如下:

function ShowUserInfo(menu, e) {
var id = GridPanel1.getSelectionModel().getSelected().id;//此处的 id 为 jsonreader 中的 readerID所设置的值
var record = GridPanel1.getSelectionModel().getSelected(); //获取当前选中的整条记录,前提是必须设置为行选择模式

//查看详细信息
if (menu.id == 'MenuItem1') {
openUserInfoWindow(record, 0); //在 objectInfo.ascx 页面中定义
}
//修改信息
else if (menu.id == 'MenuItem2') {
openUserInfoWindow(record, 1);
}
//添加信息
else if (menu.id == 'MenuItem3') {
openUserInfoWindow(record, 2);
}
else {

}
}

对于该脚本,有一点要说明,就是其中要调用 openUserInfoWindow 方法,该方法在是一个用户控件的页面中定义的,本页使用该控件以后,便可调用该方法。
空间页面源码如下:
说明一点: <%= ctrID.ClientID> 用户获取服务器端组件对象


代码如下:

function openUserInfoWindow(record,id) {
<%= Button2.ClientID %>.hide(null);
<%= txtID.ClientID %>.setValue(record.data.id);
<%= txtName.ClientID %>.setValue(record.data.uid);
<%= txtNC.ClientID %>.setValue(record.data.uname);
<%= txtAge.ClientID %>.setValue(record.data.uage);
if(id==1)
{
<%= Button1.ClientID %>.setText('修改'); //对于 button, 取值时用 text,设置时用 setText();
<%= txtID.ClientID %>.hide(null);
<%= Button2.ClientID %>.show(null);
}
if(id==0)
{

}
if(id==2)
{
<%= txtID.ClientID %>.setValue('');
<%= txtName.ClientID %>.setValue('');
<%= txtNC.ClientID %>.setValue('');
<%= txtAge.ClientID %>.setValue('');
<%= txtID.ClientID %>.hide(null);
<%= Button1.ClientID %>.value="添加";

}
<%= Window1.ClientID %>.show();
}

删除用户的代码如下:


代码如下:

function DeleteUserInfo() {
Ext.Msg.confirm('提示', '确定删除用户?', function(btn) {
if (btn == 'yes') {
var record = GridPanel1.getSelectionModel().getSelected();
GridPanel1.getStore().remove(record);//该方法若写在后台删除成功后的回调函数中时,则 record 为 null
//用户可能只是在 gridpanel 上点击,但并没有选择确定的行,此时 record 值为 null
if (record == null) {
Ext.Msg.alert('提示', '请选择某一确定的记录!');
return;
}
Coolite.AjaxMethods.DeleteUserInfo(record.data.id.toString(), {
success: function() {

Ext.Msg.alert('提示', '删除成功!');
}
});
}
else {
return;
}
});
}

请特别注意 Coolite.AjaxMethods.DeleteUserInfo 方法的使用,第一个参数是在前台获取,并传递到服务器端的参数,第二个是回调函数。
后台删除代码实现如下:

代码如下:

[AjaxMethod]
public void DeleteUserInfo(string id)
{
string deletestring = "delete from T_User where id=" + id;
sqldb.ExecuteUpdate(deletestring);
}

特别注意
本页面的添加,修改功能都未实现,只提供了一个模式,不过使用和删除时是一样的。
学习心得
如果有不知道什么事件传递的参数个数和类型,可以随便写个错误的方法,然后调试的时候去分析有意义的参数。
疑问:当实现删除时,实现刷新时,实现修改时,我不用重新从数据库读取数据后再绑定到 Store, 而是通过刷新 Store 或者 GridPanel 实现

时间: 2010-06-14

Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法

在Extjs中的GridPanel会有这样的情况,隐藏列会显示在menuDisabled中 如下图: 但是这个一般没有什么用处,只是用于后台取值的作用. so 加一个属性:hideable:false就可以搞定了 复制代码 代码如下: { header: "attendanceId", dataIndex: "attendanceId", hideable: false, hidden: true },

Extjs4 GridPanel的主要配置参数详细介绍

1.Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0 stripeRows:表格是否隔行换色,默认为false cm.colModel:表格的列模式,渲染表格时必须设置该配置项 sm.selModel:表格的选择模式,默认为Ext.grid.RowSelectionModel enableHdMenu:

JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色

表格GridPanel概述 ExtJS中的表格功能非常强大,包括了排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能. 表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid.ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store.表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义).而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同

ExtJs GridPanel简单的增删改实现代码

1.首先看下效果图: 2.ext代码 复制代码 代码如下: /// <reference path="http://www.cnblogs.com/Resources/ExtJs/vswd-ext_2.0.2.js" /> Ext.namespace('XQH.ExtJs.Frame'); XQH.ExtJs.Frame.RoleManage = function() { this.init(); }; Ext.extend(XQH.ExtJs.Frame.RoleMana

Ext第一周 史上最强学习笔记---GridPanel(基础篇)

如果你想实现什么特效,这个文字不适合你,但如果你想Ext文章,我想鄙人的小文非常适合你. 另:这篇教程是建立在Ext2.2上的.这个很多教程都没说明.让人很糊涂.我在此特别说明 网上很多教程,但是实际使用并不是很多,我想作为一个星期一个星期的总结来给各位网络上的朋友带来帮助.希望各位有用.我会从每个细节都说明,尽量不漏掉作为初学者需要知道的基础知识.第一次写教程,见笑了. 因为我学这个是这样一个过程,通过一个控件了解其他的控件,剩下的就是属性查API了.API我自己在翻译CHM版的.因为是个人操

ExtJS GridPanel 根据条件改变字体颜色

1.在GridPanel中加入GridView 复制代码 代码如下: <View> <ext:GridView ID="GridView1" runat="server"> <GetRowClass Fn="setRowBg" /> </ext:GridView> </View> 2.加入js脚本 复制代码 代码如下: <script language="javascri

ExtJs设置GridPanel表格文本垂直居中示例

业务场景,需要实现最终效果图如下:  GridPanel代码如下配置: 复制代码 代码如下: { xtype : 'grid', id : 'grid_jglb', frame : true, region : 'center', title : '列表详细信息', columnLines : true, loadMask : true, store : 'test_store', viewConfig : { forceFit : true, scrollOffset : 0 }, ancho

ExtJS 2.0 GridPanel基本表格简明教程

ExtJS中的表格功能非常强大,包括了排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能. 表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid.ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store.表格的列信息由类Ext.grid.ColumnModel定义.而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore.SimpleStroe.GroupingSto

virtualenv介绍及简明教程

virtualenv简介 在开发Python应用程序的时候,我们的系统上通常只会安装一个Python版本:例如 3.7.所有使用 pip 安装的第三方包都会被安装到Python的site-packages目录下.如果我们同时开发多个应用程序,而这些应用程序需要使用的某一个第三方包的版本各不相同,该怎么办?这种情况下,为每个应用程序"独立"安装一套Python运行环境显然是不现实的.这个难题,使用 virtualenv 可以轻易解决. virtualenv 是专门用来为应用程序维护多套相

基于Vue2.0+ElementUI实现表格翻页功能

Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,它面向企业级的后台应用,能够帮助你快速地搭建网站,极大地减少研发的人力与时间成本.在这个月的 NingJS 上我们开源了这个项目,当时它的文档还没有准备好.今天,经过两周多的完善, Element UI 的文档正式上线啦!目前它处于 rc 阶段,正式版将于 Vue 2.0 发布后第一时间跟进. 欢迎大家来使用和完善,一起把它做成 Vue 最好的企业级组件库. ElementUI的表格要求的数据类型为字典数组.我使用了py

微信小程序(微信应用号)开发工具0.9版安装详细教程

微信小程序全称微信公众平台·小程序,原名微信公众平台·应用号(简称微信应用号) 声明 •微信小程序开发工具类似于一个轻量级的IDE集成开发环境,目前仅开放给了少部分受微信官方邀请的人士(据说仅200个名额)进行内测,因此目前未受到邀请的人士只能使用破解版: •本破解版资源来自于网上,与本人无关,仅供技术开发人员研究之用: •由于尚属内测阶段,因此迭代更新非常快,后续很可能由于升级而导致暂时无法使用. 特别注意 •由于目前发布的0.9版本必须验证才能登录(估计是为了验证是否为内测人士),因此必须先

Vue2.0父子组件传递函数的教程详解

Vue.js 是什么 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 学习笔记:在vue2.0中,父组件调用子组件时,想要将父组件中的函数体也做传递. 1. 通过props :需要从子组件传参数到父组件时适

Vue2.0+ElementUI实现表格翻页的实例

ElementUI的表格要求的数据类型为字典数组.我使用了python3写后端,那么从数据库取数据时添加一行cursorclass=pymysql.cursors.DictCursor即可.取出后我将其存入redis数据库方便之后取用.取用时使用eval()函数再传到前端即可. 前端放置Pagination 分页器,我这里直接采用了完整功能的分页器. <el-pagination @size-change="handleSizeChange" @current-change=&q

Windows下安装Django框架的方法简明教程

本文实例讲述了Windows下安装Django框架的方法.分享给大家供大家参考,具体如下: 在idea上运行Python项目时,出现了如下错误,这是因为系统中只安装了Python,没有安装Django,有童鞋可能会问,什么是Django,博主的建议是去问度年或谷老师 既然报错的原因就是缺少Django,那我们现在就开始安装这个应用框架. 本站下载Django1.6:Django-1.6.11.tar.gz 官网下载: Django-1.6.11.tar.gz || Django-1.7.11.t

windows10系统安装mysql-8.0.13(zip安装) 的教程详解

安装环境说明 •系统版本:windows10 •mysql版本:mysql-8.0.13-winx64.zip •下载地址:http://mirrors.163.com/mysql/Downloads/MySQL-8.0/mysql-8.0.13-winx64.zip 解压安装包 •解压路径:D:\develop\software •解压后mysql根目录:D:\develop\software\mysql-8.0.13-winx64 原则: 安装目录不能有空格.不能有中文 配置文件 •my.i

win10下mysql 8.0.11 压缩版安装教程

本文为大家分享了mysql 8.0.11压缩版安装教程,供大家参考,具体内容如下 1. MySQL解压与配置 下载:链接地址 解压:比如解压到D:\mysql 配置:配置系统环境变量,MYSQL_HOME=D:\mysql\mysql-8.0.11-winx64 path新增路径:%MYSQL_HOME%\bin,保存退出. 2. 文件配置 在解压根目录mysql-8.0.11-winx64下创建my.ini文件,新增内容如下: [mysqld] # 设置3306端口 port=3306 # 设