Ext中Gridpanel双击行弹出编辑框
我将实现的思路在这里讲下,欢迎大家一起交流自己更好的方法,一起交流学习。
双击行弹出编辑框,首先要将所有的信息都读出来,只是显示出来的是grid要显示的。
实际上读出来的列有
var Vote_List_cm = new Ext.grid.ColumnModel(//对列的定义,cm是它的简写,作为真个表格的列模式,需要首先创建的
[new Ext.grid.RowNumberer(), Vote_List_sm,
{ header: "问卷名", width: 250, sortable: true, align: 'center', dataIndex: 'VoteName' },
{ header: "问卷信息", width: 200, sortable: true, align: 'center', dataIndex: 'VoteDetail' },
{ header: "创建时间", width: 200, sortable: true, align: 'center', dataIndex: 'SystemDateTime',
renderer: Ext.util.Format.dateRenderer('Y年m月d日') },
{ header: "结束时间", width: 200, sortable: true, align: 'center', dataIndex: 'EndTime',
renderer: Ext.util.Format.dateRenderer('Y年m月d日') },
{ header: "状态", width: 100, sortable: true, align: 'center', dataIndex: 'IsStatus', renderer: IsStatus },
{ header: "同IP允许投票次数", width: 200, sortable: true, align: 'center', dataIndex: 'SubmitTimes' },
{ header: "优先级", width: 100, sortable: true, align: 'center', dataIndex: 'OrderNum' },
{ header: "IP限制", width: 100, sortable: true, align: 'center', dataIndex: 'IPRestrict' },
{ header: "限制类型", width: 100, sortable: true, align: 'center', dataIndex: 'RestrictType' },
{
xtype: 'actioncolumn',
width: 50,
items: [{
icon: '../Scripts/Ext3.0/examples/shared/icons/fam/delete.gif', // Use a URL in the icon config
tooltip: '禁用',
handler: Forbid
}, {
icon: '../Scripts/Ext3.0/examples/shared/icons/fam/accept.png', // Use a URL in the icon config
tooltip: '启用',
handler: function (grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Sell " + rec.get('company'));
}
}]
}
]);
可以将不要显示的列先隐藏:
Vote_List_grid.getColumnModel().setHidden(3, true);//将所有的列信息都读出来,但是可以不直接显示出来(列号从0开始)
Vote_List_grid.getColumnModel().setHidden(8, true);
Vote_List_grid.getColumnModel().setHidden(9, true);
Vote_List_grid.getColumnModel().setHidden(10, true);
接下来要写的是行的双击弹出框事件:
Vote_List_grid.on('rowdblclick', function () {
handler:{ editfunc(); }
});//双击gridpanel的行,执行函数
editfunc的函数:
var editfunc = function () {
var row=Ext.getCmp("gridid").getSelectionModel().getSelections();
if(row.length==1)
{
rows = row[0];//将选择行的信息赋值给rows,便于显示
EditVoteWin.show(); //判定是否选择了行,问题是明明选择了还是会运行到这里来
}
};
EditVoteWin的部分代码:
var EditVoteWin = new Ext.Window({
title: '编辑问卷',
width: 417,
height: 384,
closeAction: 'hide',
layout: 'form',
buttonAlign: 'center',
resizable: false,
constrain: true,
plain: true,
modal: 'true',
items: EditVoteForm,
listeners: {
"show": function () {
AddVoteForm.getForm().reset();//添加框初始化
EditVoteForm.getForm().loadRecord(rows); //直接加载一行数据,将rows赋值的数据显示在编辑框中 (关键)
}
},
buttons: [....]
});
双击grid的列显示编辑框的基本原理就是这样了。希望对大家有所帮助。
分类:
ExtJs心得
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥