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的列显示编辑框的基本原理就是这样了。希望对大家有所帮助。