Forum /
Ext JS 2.x - Unsupported /
Ext 2.x: Help & Discussion /
proble in tab key in editor grid with singel editor columnpleace
proble in tab key in editor grid with singel editor columnpleace
Dear sir
i m using editor grid panel in which only one field is editable so that i need tab key to regirect in next field but it is not working i join image as well as code pleace go through it and reply fast;
code:
var labelArray;
labelArray = [
['Section : <span class="comp">*</span>'],
['Standard : <span class="comp">*</span>'],
['Division : <span class="comp">*</span>']
];
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.ns('Ext.ux.grid');
Ext.ux.grid.PagingRowNumberer = Ext.extend(Ext.grid.RowNumberer, {
renderer: function(v, p, record, rowIndex, colIndex, store) {
if (this.rowspan) {
p.cellAttr = 'rowspan="' + this.rowspan + '"';
}
var so = store.lastOptions;
var sop = so ? so.params: null;
return ((sop && sop.start) ? sop.start: 0) + rowIndex + 1;
}
});
//var dt = new Date();
var sectionliststore = new Ext.data.Store({
url: 'data/getsectionlist.php',
reader: new Ext.data.JsonReader({
fields: ['section_id', 'section_name'],
root: 'rows'
}),autoLoad:true
});
var xg = Ext.grid;
var genderstore = new Ext.data.ArrayStore({
fields: ['sortorder_id','sortorder_name'],
data: [['M','Male'],['F','Female'],['','None']]
});
var storesortorder2 = new Ext.data.ArrayStore({
fields: ['sortorder2_id','sortorder2_name'],
data: [ ['student_surname','Student Name'],
['student_grno','GR No'],
['student_rollno','Roll No']
]
});
var stdliststore = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields:['standard_id', 'standard_name'],
root: 'rows1'
}),
proxy: new Ext.data.HttpProxy({
url: 'data/getstdlist1.php'
}),autoLoad:true
});
var divliststore = new Ext.data.Store({
url: 'data/getdivlist.php',
reader: new Ext.data.JsonReader({
fields: ['student_curdiv'],
root: 'rows2'
}),autoLoad:true
});
var store = new Ext.data.JsonStore({
url: 'data/getseatno.php',
totalProperty: 'count',
idProperty: 'student_id',
successProperty: 'success',
fields: ['student_id',
'student_grno',
'student_surname',
'student_rollno'],
root: 'data',
writer: new Ext.data.JsonWriter(),
autoSave: false,
batch:true
});
var grid = new Ext.grid.EditorGridPanel({
store: store,
clicksToEdit:1,
columns: [
new Ext.ux.grid.PagingRowNumberer(),
{
dataIndex: 'student_id',
header: 'Student ID',
id: 'student_id',
hidden: true
},{
dataIndex: 'student_grno',
header: 'GR No',
sortable:true,
width:80
},{
dataIndex: 'student_surname',
header: 'Student Name',
sortable:true,
id: 'SurName',
width:250
},{
dataIndex: 'student_rollno',
header: 'Roll No',
sortable:true,
width:60,
editor: {xtype: 'numberfield',
allowBlank: false}
}],
height:250,
layout: 'fit',
loadMask: true/*,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true})*/
});
grid.on('render', function() {
grid.tip = new Ext.ToolTip({
view: grid.getView(),
target: grid.getView().mainBody,
delegate: '.x-grid3-row',
trackMouse: true,
renderTo: document.body,
listeners: {
beforeshow: function updateTipBody(tip) {
tip.body.dom.innerHTML = "Click on Rollno Column To Edit Rollno.";
}
}
});
});
store.on({'beforeload': {
fn: function(store, options){
var secid = rollseatno.getForm().findField('section').getValue();
var divid = rollseatno.getForm().findField('division').getValue();
var stdid = rollseatno.getForm().findField('standard').getValue();
var varorder1=rollseatno.getForm().findField('sortorder1').getValue();
var varorder2=rollseatno.getForm().findField('sortorder2').getValue();
options.params || (options.params = {});
Ext.apply(options.params, {
pageNo: this.pageNumber,
standard_id: stdid,
section_id: secid,
div:divid,
order1:varorder1,
order2:varorder2
});
},
scope: this
}
});
store.on({'load': {fn: function(){
if(store.getCount() <= 0){
Ext.MessageBox.show({
title: 'Error',
msg: 'There is no Student found in this Selection.',
buttons: Ext.MessageBox.OK,
icon:Ext.MessageBox.ERROR
});
} else
{
grid.startEditing(0,4);
}
}
}
});
/*grid.on('keypress', function(e) {
/*if (e.getKey() == e.TA
{
var rowSelected = grid.lastEdit.row;
var colSelected = 6;
/*if (rowSelected > 0)
{
code = e.keyCode;
if (code == 9){
grid.startEditing (rowSelected, colSelected);
/* alert(code);
}
}
if (rowSelected < maxRowIndex)
{
if (code == "40")
grid.startEditing (rowSelected+1, colSelected);
}
*/
/*
var nextRow = grid.lastEdit.row ;
if (nextRow <= grid.view.getRows().length)
{
grid.stopEditing();*/
//grid.startEditing(grid.lastEdit.row,6);
/* //alert(nextRow);
grid.stopEditing();
grid.selModel.select(1, grid.lastEdit.col);
}
//}
}); */
grid.on('keypress',function validateedit(e) {
var grd = this;
var row = grd.activeEditor.row;
var col = grd.activeEditor.col;
var totalCols = grd.colModel.config.length;
var totalRows = grd.view.getRows().length;
switch (e.keyCode) {
case e.TAB:
grd.getView().focusRow(row,col);
grd.startEditing(row, col);
alert("tab");
}
});
/*addEditableRow: function(grd, focusCol) {
var rowIndex = grd.addRecord();
grd.getView().focusRow(rowIndex);
grd.startEditing(rowIndex, focusCol);
}*/
var rollseatno = new Ext.FormPanel({
defaults: {style: 'padding:0px 0px 12px 8px'},
url:'',
method:'get',
frame:true,
bodyStyle:'padding:5px 5px 0',
items:[
{layout:'column',
items:[
{
columnWidth:.35,
layout: 'form',
labelWidth:60,
items:[{
xtype: 'combo',
labelSeparator:'',
fieldLabel :labelArray[0] ,
name: 'sectionid',
id:'section',
hiddenName: 'sectionid',
store: sectionliststore,
displayField:'section_name',
valueField: 'section_id',
width: 130,
typeAhead: true,
selectOnFocus:true,
forceSelection:true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select Section...',
editable:false ,
allowBlank:false,
listeners:{select:{fn:function(combo, value)
{
var combostandard = Ext.getCmp('standard');
secid=combo.getValue('section_id');
combostandard.clearValue();
combostandard.store.filter('section_id', combo.getValue('section_id'));
combostandard.enable();
rollseatno.getForm().findField('sortorder2').reset();
stdliststore.load({params:{section_id: secid}});
store.removeAll();
}
}
}
}
]
},
{
columnWidth: .37,
layout: 'form',
labelWidth:70,
items:[{
xtype: 'combo',
disabled:true,
name: 'standardid',
hiddenName: 'standardid',
labelSeparator:'',
fieldLabel :labelArray[1] ,
id:'standard',
forceSelection:true,
store: stdliststore,
displayField:'standard_name',
valueField: 'standard_id',
triggerAction:'all',
mode:'local',
lastQuery:'',
width: 130,
emptyText:'Select Standard...',
allowBlank:false,
editable:false ,
listeners:{select:{fn:function(combo, value)
{
var combodivision = Ext.getCmp('division');
stdid=combo.getValue('standard_id');
combodivision.clearValue();
combodivision.enable();
rollseatno.getForm().findField('sortorder2').reset();
divliststore.load({params:{standard_id: stdid, section_id: secid}});
store.removeAll();
}
}
}
}
]
},
{
columnWidth: .25,
layout: 'form',
labelWidth:60,
items:[{
xtype: 'combo',
disabled:true,
name: 'divid',
hiddenName: 'divid',
labelSeparator:'',
fieldLabel :labelArray[2] ,
id:'division',
forceSelection:true,
store: divliststore ,
displayField:'student_curdiv',
valueField: 'student_curdiv',
triggerAction:'all',
mode:'local',
lastQuery:'',
width: 60,
allowBlank:false,
emptyText:'Div...',
editable:false,
listeners:{select:{fn:function(combo, value){
divid = rollseatno.getForm().findField('divid').getValue();
rollseatno.getForm().findField('sortorder2').reset();
store.removeAll();
}}}}
]
}]
},
{
layout: 'column',
items:[{
columnWidth: .5,
layout: 'form',
labelWidth:90,
items:[{
xtype:'combo',
name: 'sortorder1',
hiddenName: 'sortorder1',
id:'sortorder1combo',
fieldLabel: 'Sorting Order 1',
forceSelection:true,
displayField:'sortorder_name',
valueField: 'sortorder_id',
mode: 'local',
width:130,
triggerAction: 'all',
emptyText:'Select gender...',
store: genderstore,
allowBlank:true,
editable:false
}]
},
{columnWidth: .5,layout: 'form',labelWidth:90,
items:[{
xtype:'combo',
name: 'sortorder2',
hiddenName: 'sortorder2',
id:'sortorder2combo',
fieldLabel: 'Sorting Order 2',
displayField:'sortorder2_name',
valueField: 'sortorder2_id',
forceSelection:true,
mode: 'local',
width:130,
triggerAction: 'all',
emptyText:'Select Student Info...'
,store: storesortorder2,
allowBlank:true,
editable:false
}]
}]
},
{layout: 'column',
style:{margin:'0px 0px 0px 0px',padding:'0px 0px 0px 410px'},
items : [{buttons:[{
text: 'View',
handler: function (){
var vardivision=rollseatno.getForm().findField('division').getValue();
var varstandard=rollseatno.getForm().findField('standard').getValue();
var varsection=rollseatno.getForm().findField('section').getValue();
var varorder1=rollseatno.getForm().findField('sortorder1').getValue();
var varorder2=rollseatno.getForm().findField('sortorder2').getValue();
var resbool="";
if(vardivision!="" && varstandard!="" && varsection !=""){
store.load({params:{
standard_id tdid,
section_id ecid,
div:divid,
order1:varorder1,
order2:varorder2,
start: 0
}});
}
else{
Ext.MessageBox.show({
title: 'Error',
msg: 'Please select section,standard and division.',
buttons: Ext.MessageBox.OK,
icon:Ext.MessageBox.ERROR
});
}}
},{
text: 'Reset',
name:'btnReset',
id:'btnReset',
handler: function ()
{
store.removeAll();
rollseatno.getForm().reset();
}
}]}]
},
{
layout:'column',
items:[{
columnWidth: 1,
labelWidth:70,
items:[grid]
}]
}
]
});
var RollNoWindow = new Ext.Window({
title: 'Roll No. Entry',
width:630,
height:460,
border: false,
modal:true,
layout: 'fit',
closeAction:'close',
collapsible:true,
items: rollseatno,
buttonAlign: 'center',
buttons: [
{text: 'Save', name:'btnSave',id:'btnSave',
handler: function ()
{
if(grid.store.getCount()>=1)
{
var varorder1=rollseatno.getForm().findField('sortorder1').getValue();
var varorder2=rollseatno.getForm().findField('sortorder2').getValue();
store.setBaseParam('standard_id',stdid);
store.setBaseParam('section_id',secid);
store.setBaseParam('div',divid);
var sId = "";
var allrollno = new Array();
var l = 0;
for(var i = 0, len = grid.store.getCount(); i < len; i++){
record = grid.store.getAt(i);
sId = record.data.student_rollno;
if(sId!=0)
{
allrollno[l] = sId;
l++;
}
}
var sorted_arr1 = allrollno.sort();
var flag1;
var flag2;
var results = [];
for (var i = 0; i < sorted_arr1.length - 1; i += 1) {
if (sorted_arr1[i + 1] == sorted_arr1[i]) {
flag1 = 1;
}
}
if(flag1 == 1)
{
Ext.MessageBox.show({ title : 'Error',
msg : 'Duplicate Roll No.',
buttons : Ext.MessageBox.OK,
icon:Ext.MessageBox.ERROR
});
}
else
{
store.save();
Ext.MessageBox.show({ title : 'Message',
msg : 'Data has been Saved.',
buttons : Ext.MessageBox.OK,
icon:Ext.MessageBox.INFO
});
store.load({params:
{
standard_id tdid,
section_id ecid,
div:divid,
order1:varorder1,
order2:varorder2,
start: 0
}
});
}
}
else
{
Ext.MessageBox.show({
title: 'Error',
msg: 'Please click on view button to see the students record.',
buttons: Ext.MessageBox.OK,
icon:Ext.MessageBox.ERROR
});
}
}
},
{text: 'Close', name:'btncancle',id:'btncancle',
handler: function ()
{
RollNoWindow.close();
}
}
]
});
var varWidth = (screen.width - RollNoWindow.width)/2;
//RollNoWindow.setPosition(varWidth,((screen.height/4)-100));
RollNoWindow.show();
sectionliststore.on({'load': {
fn: function(store, options){
if(sectionliststore.getCount()==1)
{
Ext.getCmp('section').setValue(sectionliststore.getAt(0).data.section_id,true);
Ext.getCmp('standard').enable();
Ext.getCmp('standard').focus(true,500);
}
else
{
Ext.getCmp('section').focus(true,500);
}
}
}
});
});
Last edited by auminfosys; 14 May 2010 at 11:23 PM .
Reason: not complitd
Sencha is used by over two million developers. Join the community, wherever you’d like that community to be
or Join Us