1. #1
    Ext User
    Join Date
    Feb 2010
    Posts
    4
    Vote Rating
    0
    auminfosys is on a distinguished road

      0  

    Default 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_idtdid,
    section_idecid,
    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_idtdid,
    section_idecid,
    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