PDA

View Full Version : Problem in adding rows with data to a gridpanel dynamically



Gunjan
29 Apr 2010, 12:22 AM
Hello

I am not able to add rows with data in grid panel at run time. I have search on forum but there is no exact solution which is working. Anyone can please help me to get exact way of doing this.

Thanks in advance.
Gunjan

Animal
29 Apr 2010, 1:46 AM
You add Records to a Store.

Gunjan
29 Apr 2010, 7:14 AM
Hi Animal, Thanks for the reply. but i didn't get.

I am adding records to store only. I am using an array store with autoload for pulling data from some local source(another grid selections) to my grid. Actual problem is that data is coming in store but not appearing in grid. After some time if I do some other operation(resize the grid panel) in window then data appears.
Also if I will try to fill the data in the grid from soem other source or using getselections() method of selection Model of some other grid then that data replaces the older one. But I want to add the data or row with the existing rows.

Should I use
store.add(sm.getSelections());
or,
store.load(related);

where "sm" is row selection model object and "related" is a array of data. But they also not worked.

Regards
Gunjan

sumit.madan
29 Apr 2010, 7:34 AM
If you're creating the records manually:


record = new grid.store.recordType({
'id': '1234',
.....
.....
});

grid.store.insert(0, record);
Otherwise you can get the record by the selections using your approach and insert them to store directly.

I've never seen the grid data disappearing when resized. You can post your code if you want it to be checked against any logical errors.

Gunjan
30 Apr 2010, 12:09 AM
Hello Sumit ,

Please find below my code. I am new to ext so it may have many problems, and it is quite long too.
this code is a handler code . Handler on click of a tree node. On click of it a tab panel opens a tab with QueryResult_grid inside it. After query result gris is rendered properly. I am using checkbox selection model in it. After selecting some rows in QueryResult_grid grid I am pressing "Add to Download list" button which is in tbar of QueryResult_grid . On pressing of this button selected rows will be populated in another tab with grid named downloadlist_grid. Initially I am able to get the selected rows populated in downloadlist_grid but if I select some more rows again in QueryResult_grid and then press "Add to Download list" again then next selected rows will not come immediately in downloadlist_grid, but if I resize the panel then it will show the next selected rows.
This is one problem.
Another problem is suppose I click on another node of tree panel and another tab opens with QueryResult_grid with some new data. and now I select some rows in this grid and press "Add to Download list" button in this grid then I want these rows to get added in previous downloadlist_grid. How can I do this. Right now new rows will replace old one and that too after resizing tab otherwise old list remianed.


<code>
click: function(node,e)
{
var Array_rows_selected;
var related = new Array();
var length_selections;
var sm = new Ext.grid.CheckboxSelectionModel({

checkOnly:true,

listeners:{

rowselect:function(){

length_selections = this.getSelections().length;

for(var i=0; i<sm.getSelections().length ;i++)
{
related[i] = new Array();
related[i][0] = sm.getSelections()[i].get('Std/Non-Standard');
related[i][1] = sm.getSelections()[i].get('fieldDefect');
related[i][2] = sm.getSelections()[i].get('Model');
related[i][3] = sm.getSelections()[i].get('ErrorType');
related[i][4] = sm.getSelections()[i].get('DefectID');
related[i][5] = sm.getSelections()[i].get('fileType');
related[i][6] = sm.getSelections()[i].get('Original/Transformed');
related[i][7] = sm.getSelections()[i].get('fileName');
related[i][8] = sm.getSelections()[i].get('fileSize');
related[i][9] = sm.getSelections()[i].get('Downloads');
related[i][10] = sm.getSelections()[i].get('Format');
related[i][11] = sm.getSelections()[i].get('Width');
related[i][12] = sm.getSelections()[i].get('Height');
related[i][13] = sm.getSelections()[i].get('ImageResolution');
related[i][14] = sm.getSelections()[i].get('DisplayAspectRatio');
related[i][15] = sm.getSelections()[i].get('FrameRate');
related[i][16] = sm.getSelections()[i].get('VideoResolution');
related[i][17] = sm.getSelections()[i].get('ScanType');
related[i][18] = sm.getSelections()[i].get('VideoStreamSize');
related[i][19] = sm.getSelections()[i].get('Channels');
related[i][20] = sm.getSelections()[i].get('SamplingRate');
related[i][21] = sm.getSelections()[i].get('AudioResolution');
related[i][22] = sm.getSelections()[i].get('AudioStreamSize');
related[i][23] = sm.getSelections()[i].get('filepath');
}

/* var related = new Array();
for(var i=0; i<this.getSelections().length ;i++)
{
m = this.getSelections()[i].id;
related[i] = m;
//alert(related.join(','));
}*/
//document.getElementById('product_related').value = related.join(',');
},
rowdeselect:function(){

length_selections = this.getSelections().length;
}

} // listener ends
});

var Query_Result_store = new Ext.data.JsonStore({
//id:'Query_Result_store'
root:'fileinfo'
,totalProperty:'totalCount'
//,autoLoad:true
,url:'http://10.41.132.22:7020/Test/Query.jsp'
,baseParams:{node:node.id}
,fields:[
'Std/Non-Standard', 'fieldDefect', 'Model',
'ErrorType','DefectID', 'fileType', 'Original/Transformed',
'fileName', {name:'fileSize', type:'long'}, 'Downloads', 'Format', {name:'Width', type:'int'}, {name:'Height', type:'int'},
{name:'ImageResolution', type:'int'}, 'DisplayAspectRatio', {name:'FrameRate', type:'int'}, {name:'VideoResolution', type:'int'},
'ScanType', 'VideoStreamSize', {name:'Channels', type:'int'}, 'SamplingRate', 'AudioResolution',
'AudioStreamSize','filepath'
]

});


var QueryResult_grid = new Ext.grid.GridPanel({
store:Query_Result_store,
id:'grid1'+node.id,
columns: [
sm,
{header: 'Std/Non-Standard', width: 150, sortable: true, dataIndex: 'Std/Non-Standard'},
{header: 'Field Defect', width: 100, sortable: true, dataIndex: 'fieldDefect'},
{header: 'Model', width: 100, sortable: true, dataIndex: 'Model'},
{header: 'Error Type', width: 100, sortable: true, dataIndex: 'ErrorType'},
{header: 'Defect ID', width: 100, sortable: true, dataIndex: 'DefectID'},
{header: 'File Type', width: 100, sortable: true, dataIndex: 'fileType'},
{header: 'Original/Transformed', width: 140, sortable: true, dataIndex: 'Original/Transformed'},
{header: 'File Name', width: 100, sortable: true, dataIndex: 'fileName'},
{header: 'File Size', width: 100, sortable: true, dataIndex: 'fileSize'},
{header: 'Downloads', width: 100, sortable: true, dataIndex: 'Downloads'},
{header: 'Format', width: 100, sortable: true, dataIndex: 'Format'},
{header: 'Width', width: 100, sortable: true, dataIndex: 'Width'},
{header: 'Height', width: 100, sortable: true, dataIndex: 'Height'},
{header: 'Image Resolution', width: 100, sortable: true, dataIndex: 'ImageResolution'},
{header: 'Display aspect ratio', width: 100, sortable: true, dataIndex: 'DisplayAspectRatio'},
{header: 'Frame rate', width: 100, sortable: true, dataIndex: 'FrameRate'},
{header: 'Video resolution', width: 100, sortable: true, dataIndex: 'VideoResolution'},
{header: 'Scan type', width: 100, sortable: true, dataIndex: 'ScanType'},
{header: 'Video stream size', width: 100, sortable: true, dataIndex: 'VideoStreamSize'},
{header: 'Channels', width: 100, sortable: true, dataIndex: 'Channels'},
{header: 'Sampling rate', width: 100, sortable: true, dataIndex: 'SamplingRate'},
{header: 'Audio resolution', width: 100, sortable: true, dataIndex: 'AudioResolution'},
{header: 'Audio stream size', width: 100, sortable: true, dataIndex: 'AudioStreamSize'}
],
title:'Search Result',
sm:sm,
width:'100%',
height:250,
autoScroll: true,
tbar:['-',{
text:'Add to Download List',
handler: function(item)
{
alert('No. of records selected ='+sm.getSelections().length);
var length_selections = sm.getSelections().length;
if(length_selections)
{
/*for(var i=0; i<sm.getSelections().length ;i++)
{
related[i] = new Array();
related[i][0] = sm.getSelections()[i].get('Std/Non-Standard');
related[i][1] = sm.getSelections()[i].get('fieldDefect');
related[i][2] = sm.getSelections()[i].get('Model');
related[i][3] = sm.getSelections()[i].get('ErrorType');
related[i][4] = sm.getSelections()[i].get('DefectID');
related[i][5] = sm.getSelections()[i].get('fileType');
related[i][6] = sm.getSelections()[i].get('Original/Transformed');
related[i][7] = sm.getSelections()[i].get('fileName');
related[i][8] = sm.getSelections()[i].get('fileSize');
related[i][9] = sm.getSelections()[i].get('Downloads');
related[i][10] = sm.getSelections()[i].get('Format');
related[i][11] = sm.getSelections()[i].get('Width');
related[i][12] = sm.getSelections()[i].get('Height');
related[i][13] = sm.getSelections()[i].get('ImageResolution');
related[i][14] = sm.getSelections()[i].get('DisplayAspectRatio');
related[i][15] = sm.getSelections()[i].get('FrameRate');
related[i][16] = sm.getSelections()[i].get('VideoResolution');
related[i][17] = sm.getSelections()[i].get('ScanType');
related[i][18] = sm.getSelections()[i].get('VideoStreamSize');
related[i][19] = sm.getSelections()[i].get('Channels');
related[i][20] = sm.getSelections()[i].get('SamplingRate');
related[i][21] = sm.getSelections()[i].get('AudioResolution');
related[i][22] = sm.getSelections()[i].get('AudioStreamSize');
related[i][23] = sm.getSelections()[i].get('filepath');
}*/

var sm_downlaod_list = new Ext.grid.CheckboxSelectionModel({checkOnly:true});
var downloadlist_store = new Ext.data.ArrayStore({
id:'downloadlist_store'
//,root:'fileinfo'
//,totalProperty:'totalCount'
,autoLoad:true
,url:'http://10.41.132.22:7020/Test/ext-3.1.1/simplevp.jsp' // mandatory field for a store
//,baseParams:{node:node.id}
,fields:[
'Std/Non-Standard', 'fieldDefect', 'Model',
'ErrorType','DefectID', 'fileType', 'Original/Transformed',
'fileName','fileSize', 'Downloads', 'Format', 'Width', 'Height',
'ImageResolution', 'DisplayAspectRatio', 'FrameRate', 'VideoResolution',
'ScanType', 'VideoStreamSize', 'Channels', 'SamplingRate', 'AudioResolution',
'AudioStreamSize','filepath'
]
,data:related

});
var downloadlist_grid = new Ext.grid.EditorGridPanel({
store:downloadlist_store,
id:'grid2',
columns: [
sm_downlaod_list,
{header: 'Std/Non-Standard', width: 150, sortable: true, dataIndex: 'Std/Non-Standard'},
{header: 'Field Defect', width: 100, sortable: true, dataIndex: 'fieldDefect'},
{header: 'Model', width: 100, sortable: true, dataIndex: 'Model'},
{header: 'Error Type', width: 100, sortable: true, dataIndex: 'ErrorType'},
{header: 'Defect ID', width: 100, sortable: true, dataIndex: 'DefectID'},
{header: 'File Type', width: 100, sortable: true, dataIndex: 'fileType'},
{header: 'Original/Transformed', width: 140, sortable: true, dataIndex: 'Original/Transformed'},
{header: 'File Name', width: 100, sortable: true, dataIndex: 'fileName'},
{header: 'File Size', width: 100, sortable: true, dataIndex: 'fileSize'},
{header: 'Downloads', width: 100, sortable: true, dataIndex: 'Downloads'},
{header: 'Format', width: 100, sortable: true, dataIndex: 'Format'},
{header: 'Width', width: 100, sortable: true, dataIndex: 'Width'},
{header: 'Height', width: 100, sortable: true, dataIndex: 'Height'},
{header: 'Image Resolution', width: 100, sortable: true, dataIndex: 'ImageResolution'},
{header: 'Display aspect ratio', width: 100, sortable: true, dataIndex: 'DisplayAspectRatio'},
{header: 'Frame rate', width: 100, sortable: true, dataIndex: 'FrameRate'},
{header: 'Video resolution', width: 100, sortable: true, dataIndex: 'VideoResolution'},
{header: 'Scan type', width: 100, sortable: true, dataIndex: 'ScanType'},
{header: 'Video stream size', width: 100, sortable: true, dataIndex: 'VideoStreamSize'},
{header: 'Channels', width: 100, sortable: true, dataIndex: 'Channels'},
{header: 'Sampling rate', width: 100, sortable: true, dataIndex: 'SamplingRate'},
{header: 'Audio resolution', width: 100, sortable: true, dataIndex: 'AudioResolution'},
{header: 'Audio stream size', width: 100, sortable: true, dataIndex: 'AudioStreamSize'}
//,{header: 'File Path', width: 100, sortable: true, dataIndex: 'filepath'}
],
title:'',
sm:sm_downlaod_list,
width:'100%',
height:150,
autoScroll: true,
autoShow:true,
bbar:{xtype:'paging'
,store:downloadlist_store
,displayInfo:true
,pageSize:10,
height:28
,displayMsg: 'Displaying topics {0} - {1} of {2}'},
tbar:[{ xtype:'tbspacer'
,width:20}
, '-', {
text:'Download',
tooltip:'Download file to local PC'
},'-',{
text:'Delete',
tooltip:'Remove the selected file',
handler:function(){
if(sm_downlaod_list.getSelections().length)
{
downloadlist_store.remove(sm_downlaod_list.getSelections());
/*
for(var i=0; i<sm_downlaod_list.getSelections().length ;i++)
{
var record = sm_downlaod_list.getSelections()[i];
downloadlist_store.remove(record);
//downloadlist_grid.getStore().getAt(rowIndex);
}*/
}
else
{
Ext.MessageBox.alert('Alert!','Select row(s)');
}
}

},'-', {
text:'Load download list',
tooltip:'Load the downloaded list ',
handler:function(){

var sm_load_downlaod_list = new Ext.grid.CheckboxSelectionModel({checkOnly:true, id:'sm_ld', width:30});
var Load_downloadlist_grid = new Ext.grid.GridPanel({
store:downloadlist_store,
layout:'fit',
id:'grid_ld',
columns: [
sm_load_downlaod_list,
{header: 'List Name', width: 120, sortable: true, dataIndex: 'fileSize'},
{header: 'Registered', width: 120, sortable: true, dataIndex: 'fieldDefect'},
{header: 'Registrant', width: 120, sortable: true, dataIndex: 'Model'},
{header: 'File Size', width: 120, sortable: true, dataIndex: 'fileSize'},
{header: 'No. of file(s)', width: 120, sortable: true, dataIndex: 'DefectID'}
],
//title:'',
sm:sm_load_downlaod_list,
//autoWidth:true,
width:620,
height:150,
autoScroll: true,
bbar:{xtype:'paging'
,store:downloadlist_store
,displayInfo:true
,pageSize:10,
height:28
,displayMsg: 'Displaying topics {0} - {1} of {2}'},
tbar:[{xtype:'combo',
width:50


},{xtype:'tbspacer',
width:5

},{ xtype:'textfield',
id:'laod_list_name',
name:'load_download_list_name',
width:150}]
//emptyText:'Enter download list name'}]

});
if(!win_LoadDownload_list)
{
win_LoadDownload_list = new Ext.Window({
layout: 'fit',
id:'load_ld',
// autoWidth:true,
width: 620,
height: 300,
//boxMaxWidth:940,
//boxMaxHeight:250,
boxMinWidth:500,
boxMinHeight:250,
title:'Load Download List',
modal:true,
closeAction: 'hide',
//closeAction: 'close',
autoFit: true,
autoScroll:true,
border: false, // not removing border??

items: [Load_downloadlist_grid],
autoDestroy:false,
buttons:[{
text: 'Load',
//formBind : true,
handler: function() {

}
}, {
text: 'Cancel',
//formBind : true,
handler: function() {
win_LoadDownload_list.hide();
}
}


]

});
}
downloadlist_store.load(/*related*/);
win_LoadDownload_list.show();


}

},'-',

{
text:'Save download list',
tooltip:'Save the downloaded list ',
handler:function(){
var save_downloadlist_store = new Ext.data.ArrayStore({
//id:'save_downloadlist_store'
//,root:'fileinfo'
//,totalProperty:'totalCount'
autoLoad:true
,url:'http://10.41.132.22:7020/Test/ext-3.1.1/simplevp.jsp' // mandatory field for a store
//,baseParams:{node:node.id}
,fields:[
'Std/Non-Standard', 'fieldDefect', 'Model',
'ErrorType','DefectID', 'fileType', 'Original/Transformed',
'fileName','fileSize'
]
,data:related

});
var sm_save_downlaod_list = new Ext.grid.CheckboxSelectionModel({checkOnly:true, id:'sm_dl', width:30});
var Save_downloadlist_grid = new Ext.grid.GridPanel({
store:save_downloadlist_store,
//id:'grid_Save_dl',
columns: [
sm_save_downlaod_list,
{header: 'Std/Non-Standard', width: 150, sortable: true, dataIndex: 'Std/Non-Standard'},
{header: 'Field Defect', width: 100, sortable: true, dataIndex: 'fieldDefect'},
{header: 'Model', width: 100, sortable: true, dataIndex: 'Model'},
{header: 'Error Type', width: 100, sortable: true, dataIndex: 'ErrorType'},
{header: 'Defect ID', width: 100, sortable: true, dataIndex: 'DefectID'},
{header: 'File Type', width: 100, sortable: true, dataIndex: 'fileType'},
{header: 'Original/Transformed', width: 140, sortable: true, dataIndex: 'Original/Transformed'},
{header: 'File Name', width: 100, sortable: true, dataIndex: 'fileName'},
{header: 'File Size', width: 100, sortable: true, dataIndex: 'fileSize'}
//,{header: 'File Path', width: 100, sortable: true, dataIndex: 'filepath'}
],
//title:'',
sm:sm_save_downlaod_list,
width:'100%',
height:150,
autoScroll: true,
bbar:{xtype:'paging'
,store:save_downloadlist_store
,displayInfo:true
,pageSize:10,
height:28
,displayMsg: 'Displaying topics {0} - {1} of {2}'},
tbar:[{ xtype:'textfield',
id:'download_list_name',
name:'download_list_name',
width:150,
emptyText:'Enter download list name'}]

});
if(!win_SaveDownload_list)
{
win_SaveDownload_list = new Ext.Window({
layout: 'fit',
id:'save_dl',
width: 1000,
height: 300,
//boxMaxWidth:940,
//boxMaxHeight:250,
boxMinWidth:600,
boxMinHeight:250,
title:'Save Download List',
modal:true,
closeAction: 'hide',
//closeAction: 'close',
autoFit: true,
autoScroll:true,
border: false, // not removing border??
items: [Save_downloadlist_grid],
autoDestroy:false,
buttons:[{
text: 'Save',
//formBind : true,
tooltip:'save the list and close',
handler: function() {
var listName = Ext.getCmp('download_list_name').getValue();
//var NameCount = 0;
Ext.Ajax.request({
url: 'http://10.41.132.22:7020/Test/CheckDownloadListName.jsp',
params: {DownloadListName:listName },
success: function(response){
var result = Ext.decode(response.responseText);
var NameCount = result.NameCount;
//alert(NameCount);

if(listName != "")
{
if(NameCount == 0)
{
for(var i=0; i<sm.getSelections().length ;i++)
{

Ext.Ajax.request({
url: 'http://10.41.132.22:7020/Test/SaveDownloadList.jsp',
waitTitle:'Connecting',
waitMsg:'Sending data...',
params:{

DownloadListName:listName,

Stdandard:related[i][0],
fieldDefect:related[i][1],
Model:related[i][2],
ErrorType:related[i][3],
DefectID:related[i][4],
fileType:related[i][5],
Original:related[i][6],
fileName:related[i][7],
fileSize:related[i][8]
},
//params: params,
success: function(){
//alert("Iteration no. ="+i);
// downloadlist_store.commitChanges();
},
failure: function(){
Ext.MessageBox.alert('Alert','List Name exist! Please enter another name.');
}
});
for(var j =0; j<1000;j++);

}
win_SaveDownload_list.hide();
Ext.getCmp('download_list_name').setValue("");

}
else
{
Ext.MessageBox.alert('Alert!','List Name exist! Please enter another name.');
Ext.getCmp('download_list_name').setValue("");
}
}
else
{
Ext.MessageBox.alert('Alert!','Please Enter a List Name');
}
}
});

//var grid = Ext.getCmp('grid_Save_dl');
/* var records = downloadlist_store.getModifiedRecords();
var fields = downloadlist_store.fields;
alert("Records =" +records);
var params = {};
for(var i = 0; i < records.length; i++) {
for(var j = 0; j < fields.length; j++){
params['data[' + i + '].' + fields[j].name] = Ext.encode(records[i].get(fields[j].name));
alert(params);
}
}*/


/* var writer = new Ext.data.JsonWriter({
encode: false // <--- false causes data to be printed to jsonData config-property of Ext.Ajax#reqeust
});
var proxy = new Ext.data.HttpProxy({
url: 'http://10.41.132.22:7020/Test/SaveDownloadList.jsp' // <--- Supports "provides"-type urls, such as '/users.json', '/products.xml' (Hello Rails/Merb)
});
var store = new Ext.data.Store({
proxy: proxy,
reader: reader,
writer: writer,
autoLoad: true,
autoSave: true // -- Cell-level updates.
}); */

/*var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Saving data..."});
Ext.Ajax.on('beforerequest', myMask.show, myMask);
Ext.Ajax.on('requestcomplete', myMask.hide, myMask);
Ext.Ajax.on('requestexception', myMask.hide, myMask); */



}
}, {
text: 'Cancel',
//formBind : true,
tooltip:'close without saving',
handler: function() {
win_SaveDownload_list.hide();
}
}


]

});
}
downloadlist_store.load(/*related*/);
win_SaveDownload_list.show();


}


},'-'

]
//,renderTo: Ext.getCmp('south_centre')
});

/* var win_Download_list = new Ext.Window({
layout: 'fit',
width: 1000,
height: 300,
title:'Download List',
closeAction: 'hide',
//closeAction: 'close',
autoFit: true,
autoScroll:true,
border: false, // not removing border??
items: [downloadlist_grid],
autoDestroy:false,
renderTo: Ext.getCmp('south_centre')

});*/

//alert(related);
var download_list_tab;
var Southpanel = Ext.getCmp('south_center');
var new_tab=Southpanel.getComponent('Downloadlist_tab');


if(new_tab)
{


// downloadlist_grid.store.insert(0, related);

//alert("Hi");
//downloadlist_store.add(sm.getSelections());
//downloadlist_store.load(/*related*/);
//new_tab.remove('grid2');

new_tab.add(downloadlist_grid);
downloadlist_grid.show();
downloadlist_grid.getView().refresh();

//downloadlist_store.load(related);
//downloadlist_grid.doLayout();


}
else
{
download_list_tab = Southpanel.add({
title:'Download List',
closable:true,
items: [downloadlist_grid],
layout: 'fit',
collapsible:true,
id:'Downloadlist_tab',
// activeTab: 0,
// layoutOnTabChange: true,
autoDestroy: false,
listeners: {
remove: function(ct, c){
c.hide();
}
}

});
//downloadlist_store.add(sm.getSelections());
//downloadlist_store.load(related);
download_list_tab.show();
//related ={};
}
</code>


Regards
Gunjan