
Hi, i created a grid panel with a check box in each row and i retrieved data from database and set the value for grid panel. i set a value for check box also but when i read the value of the check box it displays null. how to set the value for the check box from mysql in extjs grid. below is my coding.
code:<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import = "java.sql.*"%> <%
try {
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/BankDb", "root", "ims");
Statement stmt = con.createStatement();
String query = "select AccountNumber,AccountNumber,Fullname,AccountType,MobileNumber,Email from details";
ResultSet rs = stmt.executeQuery(query);
int i;
String gridData = "";
rs.last();
int numrows = rs.getRow();
rs.first();
rs.beforeFirst();
for (i = 0; i <= numrows; i++)
{
while (rs.next())
{
if (gridData.equals(""))
{
gridData = "['" + rs.getString(1) + "','" + rs.getString(2) + "','" + rs.getString(3) + "','" + rs.getString(4) + "','" + rs.getString(5) + "','"+rs.getString(6)+"']";
}
else
{
gridData += ",['" + rs.getString(1) + "','" + rs.getString(2) + "','" + rs.getString(3) + "','" + rs.getString(4) + "','" + rs.getString(5) + "','"+rs.getString(6)+"']";
}
}
}
%>
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
]);
var tabData = [ <%= gridData%> ];
var tabInfo = Ext.create('Ext.data.ArrayStore', {
pageSize:5,
fields:[
{name:'check'},
{name:'accountnumber'},
{name:'fullname'},
{name:'accounttype'},
{name:'mobilenumber'},
{name:'email'},
],
data:tabData
});
function dis(){
var ac=document.getElementById(check);
alert(ac);
}
Ext.onReady(function(){
function renderCheck(value, p, record){
return Ext.String.format(
'<input type="checkbox" id="check" name="accessmodules" value="{0}" onclick="dis()"/>',
record.data.id);
}
Ext.create('Ext.grid.Panel', {
title: 'Details',
store: tabInfo,
columns: [
{
id: 'AccountNumber', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: 'SELECT',
dataIndex: 'check',
width:40,
renderer: renderCheck,
align: 'center',
hideable: false,
sortable: false
},
{
header:'Accountnumber',
dataIndex:'accountnumber',
editor:'textfield'
},
{
header: 'FullName',
dataIndex: 'fullname',
editor: 'textfield'
},
{
header: 'AccountType',
dataIndex: 'accounttype',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header: 'MobileNumber',
dataIndex: 'mobilenumber',
editor: 'textfield'
},
{
header: 'Email',
dataIndex: 'email',
editor: 'textfield'
},
],
selModel: {
selType: 'cellmodel' },
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
handler:function(){
var id=document.getElementById('AccountNumber');
alert(id);
}
})
],
dockedItems:
[{
xtype: 'pagingtoolbar',
store: tabInfo,
dock: 'bottom',
displayInfo:true
},
{
buttons: [
{
text: 'ADD',
handler:function(){
location.href='register.jsp'
}
},
{
text: 'EDIT',
handler:function(){
location.href='edit.jsp'
}
},
{
text:'DELETE'
}
],
align:'Left'
}
],
height: 200,
width: 800,
renderTo: Ext.getBody()
});
});
<%
con.close();
}
catch (Exception e)
{
out.print(e);
}
%>