
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);
}
%>
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.