PDA

View Full Version : URGENT :Add new row when user reaches last cell of last row in grid using Ext JS 4



ardhendu1508
24 Nov 2011, 3:56 AM
Below is my code related to Grid .







Ext.require([
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
]);

Ext.onReady(function(){

function formatDate(value){
return value ? Ext.Date.dateFormat(value, 'm/d/Y') : '';
}

Ext.define("groupModel", {
extend: 'Ext.data.Model',
fields: [
{name: 'groups', useNull: true},
{name: 'groupDesc', useNull: true}
]
});

var contr = Ext.ModelManager.getModel('groupModel');

var store1 = new Ext.data.Store ({
model:contr,
proxy: {
type: 'ajax',
url: 'jsonGroupList.action',
reader: {
type: 'json',
root: 'groupModel'
}
}
});


Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [

'companyCode',
'companyName',
'groups',
{
name: 'startDate',
type: 'date',
useNull: true
},
{
name: 'endDate',
type: 'date',
useNull: true
}
]
});


// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed

pageSize: 20,
remoteSort: true,
model: 'Company',
proxy: {
type: 'ajax',
// load remote data using HTTP
url: 'jsonTempList.action',


reader: {
type: 'json',
root: 'companies'
},
writer: {
type: 'json',
writeAllFields: true,
allowSingle: false,
root: 'companies'
}
}
});


var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1

});

var rowCountForGrid=0;
// create the grid and specify what field you want
// to use for the editor at each header.
var grid = Ext.create('Ext.grid.Panel', {
id:'compGrid',

store: store,
columns: [{
id: 'companyCode',
header: 'Company Code',
dataIndex: 'companyCode',
flex: 1
},{
id: 'companyName',

header: 'Company Name',
dataIndex: 'companyName',
flex: 1,
field: {
allowBlank: false
}
},{
id: 'groups',
header: 'Groups',
dataIndex: 'groups',
flex: 1,
field: {
allowBlank: false
}
}, {
header: 'Start Date',
dataIndex: 'startDate',
width: 95,
renderer: formatDate,
field: {
xtype: 'datefield',
format: 'm/d/y',
minValue: '01/01/06'
}
},
{
header: 'End Date',
dataIndex: 'endDate',
width: 95,
renderer: formatDate,
field: {
xtype: 'datefield',
format: 'm/d/y',
minValue: '01/01/06'
}
},{id:'groupCombo',
header: "Group Code",
dataIndex: 'groupD',
field: {
xtype: 'combobox',
displayField:'groups',
valueField: 'groupDesc',
minChars: 0,
typeAhead: true,
triggerAction: 'all',
store:store1,
listClass: 'x-combo-list-small',
lastquery:'',
name:'groupName',
remoteFilter:true,
emptyText:'Select a group...',
queryParam:'query',
queryMode: 'remote',
lazyRender: true,
selectOnFocus: true,
forceSelection: true,
allowBlank: false
}

}],
selModel: {
selType: 'cellmodel'
}
,
renderTo: 'extDiv',
width: 600,
height: 300,
title: 'Edit Company?',
frame: true,
tbar: [{
text: 'Add Company',
handler : function(){
// Create a record instance through the ModelManager
var r = Ext.ModelManager.create({
companyCode: 'New Company Code',
companyName: 'New Company Name',
groups: 'New Group',
startDate: Ext.Date.clearTime(new Date()),
endDate: Ext.Date.clearTime(new Date()),
}, 'Company');
store.insert(6, r);
cellEditing.startEditByPosition({row: 6, column: 0});
}
}],
listeners:{
'beforeedit':function(e){

var currentRow=e.rowIdx+1;
var totalColumn=6;
var currentColumn=e.colIdx+1;
var newRowIndex=0;
if(rowCountForGrid==currentRow && totalColumn==currentColumn){

store.add(new Company({
companyCode: 'New Company Code',
companyName: 'New Company Name',
groups: 'New Group',
startDate: Ext.Date.clearTime(new Date()),
endDate: Ext.Date.clearTime(new Date())
}));
store.totalCount=store.totalCount+1;

rowCountForGrid=store.totalCount;

}
}
} ,
dockedItems: [
{ xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
},
{ xtype: 'toolbar',
dock: 'top',
items: [
{ xtype:'button',
text: 'IsDirty()',
handler: function() {
var report = "";
store.each( function(rec) { report = report + rec.dirty + '/'; } );
alert(report);
}
}
]
}
],
plugins: [cellEditing]
});



store.load({
// store loading is asynchronous, use a load listener or callback to handle results
callback: function(ds){

rowCountForGrid=store.getTotalCount();
if(rowCountForGrid==0){
var r = Ext.ModelManager.create({
companyCode: 'New Company Code',
companyName: 'New Company Name',
groups: 'New Group',
startDate: Ext.Date.clearTime(new Date()),
endDate: Ext.Date.clearTime(new Date()),
}, 'Company');
newRowIndex=rowCountForGrid+1;
store.insert(newRowIndex, r);
cellEditing.startEditByPosition({row: newRowIndex, column: 1});
rowCountForGrid=newRowIndex;
}

}

});


});




I am able to add new row after reaching last cell of last row but when I try to navigate using tab key through the last cell its giving me .js issue
Error: l is null
Source File: http://localhost:8080/TestApp/scripts/Ext/ext-all.js
Line: 15 .

So could you please suggest me a solution for the same.
Please suggest some solution for the same because its pending for last one month and I need it urgently.. :( ...
Thanks.

mitchellsimoens
24 Nov 2011, 7:18 AM
Where exactly is this error coming in your code?

ardhendu1508
24 Nov 2011, 11:30 AM
Thanks Mitchell for the reply .The problem has been solved there was a minor calculation issue...





var r = Ext.ModelManager.create({ companyCode: 'New Company Code', companyName: 'New Company Name', groups: 'New Group', startDate: Ext.Date.clearTime(new Date()), endDate: Ext.Date.clearTime(new Date()), }, 'Company'); newRowIndex=rowCountForGrid+1; store.insert(newRowIndex, r); cellEditing.startEditByPosition({row: newRowIndex, column: 1}); rowCountForGrid=newRowIndex;



I will be posting the correct version..

ardhendu1508
24 Nov 2011, 9:26 PM
Thanks Mitchell for the reply .The problem has been solved there was a minor calculation issue...





var r = Ext.ModelManager.create({ companyCode: 'New Company Code', companyName: 'New Company Name', groups: 'New Group', startDate: Ext.Date.clearTime(new Date()), endDate: Ext.Date.clearTime(new Date()), }, 'Company'); newRowIndex=rowCountForGrid+1; store.insert(newRowIndex, r); cellEditing.startEditByPosition({row: newRowIndex, column: 1}); rowCountForGrid=newRowIndex;



I will be posting the correct version..


It should be something like this.



Ext.require([
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
]);

Ext.onReady(function(){

function formatDate(value){
return value ? Ext.Date.dateFormat(value, 'm/d/Y') : '';
}

Ext.define("groupModel", {
extend: 'Ext.data.Model',
fields: [
{name: 'groups', useNull: true},
{name: 'groupDesc', useNull: true}
]
});

var contr = Ext.ModelManager.getModel('groupModel');

var store1 = new Ext.data.Store ({
model:contr,
proxy: {
type: 'ajax',
url: 'jsonGroupList.action',
reader: {
type: 'json',
root: 'groupModel'
}
}
});


Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [

'companyCode',
'companyName',
'groups',
{
name: 'startDate',
type: 'date',
useNull: true
},
{
name: 'endDate',
type: 'date',
useNull: true
}
]
});


// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
/* autoLoad: true,*/
/* autoSync: true,*/
/*autoDestroy:true,*/
pageSize: 20,
remoteSort: true,
model: 'Company',
proxy: {
type: 'ajax',
// load remote data using HTTP
url: 'jsonTempList.action',


reader: {
type: 'json',
root: 'companies'
},
writer: {
type: 'json',
writeAllFields: true,
allowSingle: false,
root: 'companies'
}
}
});


var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1

});


var rowCountForGrid=0;
// create the grid and specify what field you want
// to use for the editor at each header.
var grid = Ext.create('Ext.grid.Panel', {
id:'compGrid',

store: store,

columns: [{
id: 'companyCode',
header: 'Company Code',
dataIndex: 'companyCode',
flex: 1
},{
id: 'companyName',

header: 'Company Name',
dataIndex: 'companyName',
flex: 1,
field: {

allowBlank: false
}
},{
id: 'groups',
header: 'Groups',
dataIndex: 'groups',
flex: 1,
field: {
allowBlank: false
}
}, {
header: 'Start Date',
dataIndex: 'startDate',
width: 95,
renderer: formatDate,
field: {
xtype: 'datefield',
format: 'm/d/y',
minValue: '01/01/06'/*,
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'*/
}
},
{
header: 'End Date',
dataIndex: 'endDate',
width: 95,
renderer: formatDate,
field: {
xtype: 'datefield',
format: 'm/d/y',
minValue: '01/01/06'
}
},{id:'groupCombo',
header: "Group Code",
dataIndex: 'groupD',
field: {
xtype: 'combobox',
displayField:'groups',
valueField: 'groupDesc',
minChars: 0,
typeAhead: true,
triggerAction: 'all',
store:store1,
listClass: 'x-combo-list-small',
lastquery:'',
//editable:true,
name:'groupName',
remoteFilter:true,
emptyText:'Select a group...',
queryParam:'query',
queryMode: 'remote',
lazyRender: true,
selectOnFocus: true,
forceSelection: true,
allowBlank: false
}

}],
selModel: {
selType: 'cellmodel'
}
,
renderTo: 'extDiv',
width: 600,
height: 300,
title: 'Edit Company?',
frame: true,

listeners:{
/* 'cellclick':function(grid, rowIndex, colIndex, e){
var colName = grid.colModel.config[cellIndex].dataIndex;
alert(colName);

// alert("col Index"+colIndex);
var rec = store.getAt(rowIndex);
if(colIndex == 0){
store.remove(rec);
}else{
alert(rowIndex);
alert(colIndex);
}
},*/'beforeedit':function(e){

var currentRow=e.rowIdx+1;
var totalColumn=6;
var currentColumn=e.colIdx+1;
if(rowCountForGrid==currentRow && totalColumn==currentColumn){
store.add(new Company({
companyCode: 'New Company Code',
companyName: 'New Company Name',
groups: 'New Group',
startDate: Ext.Date.clearTime(new Date()),
endDate: Ext.Date.clearTime(new Date())
}));

rowCountForGrid +=1;
var position=rowCountForGrid-1;
cellEditing.startEditByPosition({row: position, column: 0});
}



}, 'edit' :function ( editor, e){
/* alert("row index==> "+e.rowIdx);
alert("col index==>"+e.colIdx);*/
}
} ,
dockedItems: [
{ xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
},
{ xtype: 'toolbar',
dock: 'top',
items: [
{ xtype:'button',
text: 'IsDirty()',
handler: function() {
var report = "";
store.each( function(rec) { report = report + rec.dirty + '/'; } );
alert(report);
}
}
]
}
],
plugins: [cellEditing]
});



store.load({
// store loading is asynchronous, use a load listener or callback to handle results
callback: function(){

rowCountForGrid=store.getTotalCount();
if(rowCountForGrid==0){
store.add(new Company({
companyCode: 'New Company Code',
companyName: 'New Company Name',
groups: 'New Group',
startDate: Ext.Date.clearTime(new Date()),
endDate: Ext.Date.clearTime(new Date())
}));
rowCountForGrid=store.totalCount+1;
var position=rowCountForGrid-1;
cellEditing.startEditByPosition({row: position, column: 0});
}

}

});

});





Code in bold format is the changes that I have made to make it work. Now my problem is to enable non editable fields while adding new rows.

Please see if you can do something in this.

ardhendu1508
24 Nov 2011, 9:28 PM
Where exactly is this error coming in your code?

Normally we get these error when there is some configuration issue with the store and its data.

ardhendu1508
24 Nov 2011, 11:36 PM
URGENT :How to enable editing for the non editable field in the Grid for New Empty record in Ext JS 4. In my case the column is companyCode.
By default when there is data in the grid then companyCode need not be edited so I have set that field as non editable.Now once I add a new row in grid then I should be able to edit companyCode column for that particular row. Is it possible?If not what is the workaround for the same.
Thanks.