PDA

View Full Version : The data is getting disappeared in the infinite grid columns



garlapatikk
11 Jul 2012, 9:58 PM
Hi ,
I was trying to implement infinite grid using extjs4.1 .If i config buffered :true in the Ext.data.store .
Automatically the data display is getting problem in the grid . when i click on search button.If i remove entry buffered:true it was working fine.Few columns of data are getting disappeared.
I'am using IE 8 with windows 7 version.I had attached screen shot below
Please find the source code below.

Ext.require('Ext.grid.GridPanel');
Ext.require('Ext.data.*');
Ext.require('Ext.form.Panel');
Ext.require('Ext.grid.PagingScroller');



Ext.onReady(function(){

Ext.define('DynamicModel',
{
extend: 'Ext.data.Model',
fields:[{name:'fu',type:'string'},{name:'plant',type:'string'},{name:'part',type:'string'},{name:'partname',type:'string'},{name:'duns',type:'string'},
{name:'suppliername',type:'string'},{name:'aaaction',type:'string'},{name:'pay',type:'string'},{name:'country',type:'string'},{name:'overunder',type:'string'},
{name:'bbal',type:'string'},{name:'cbal',type:'string'},{name:'consignment',type:'string'},{name:'asl',type:'string'},{name:'rework',type:'string'},
{name:'quality',type:'string'},{name:'doh',type:'string'},{name:'standard',type:'string'},{name:'schedule',type:'string'},{name:'min',type:'string'},
{name:'time',type:'string'},{name:'bank',type:'string'},{name:'pieces',type:'string'},{name:'piece',type:'string'},{name:'eda',type:'string'},
{name:'edas',type:'string'},{name:'past',type:'string'},{name:'pasts',type:'string'}]
});


var dstore = new Ext.data.Store({
pageSize: 100,
buffered: true,
model: 'DynamicModel',
autoLoad: false ,
proxy:{
type:'ajax',
url:'',
reader:{
type:'json',
root: 'employee',
totalProperty: 'total'
}


}
});

var grid = new Ext.grid.GridPanel({
store: dstore,
layout:'fit',
verticalScroller: {
xtype: 'paginggridscroller',
activePrefetch: false
},
loadMask: true,
disableSelection: true,
invalidateScrollerOnRefresh: false,
columnLines: true,
columns: [

{id:'fu', locked:false,header: "F/U", width: 30, sortable: true, dataIndex: 'fu'},
{id: 'plant',locked:false, header: "PLANT", width: 40, sortable: true, dataIndex: 'plant'},
{id: 'part',locked:false, header: "PART", width: 34, sortable: true, dataIndex: 'part' },
{id: 'partname', header: "PART NAME", width: 65, sortable: true, dataIndex: 'partname'},
{id: 'duns', header: "DUNS", width: 40, sortable: true, dataIndex: 'duns'},
{id: 'suppliername', header: "SUPPLIER NAME", width: 85, sortable: true, dataIndex: 'suppliername'},
{id: 'aaaction', header: "AA ACTION<br>CODE", width: 65, sortable: true, dataIndex: 'aaaction'},
{id: 'pay', header: "PAY<br>TYPE", width: 30, sortable: true, dataIndex: 'pay'},
{id: 'country', header: "COUNTRY<br>CODE", width: 60, sortable: true, dataIndex: 'country'},
{id: 'overunder', header: "OVER/UNDER<br>SHIP", width: 73, sortable: true, dataIndex: 'overunder'},
{id: 'bbal', header: "BBAL", width: 34, sortable: true, dataIndex: 'bbal'},
{id: 'cbal', header: "CBAL", width: 34, sortable: true, dataIndex: 'cbal'},
{id: 'consignment', header: "CONSIGNMENT<br>QTY", width: 81, sortable: true, dataIndex: 'consignment'},
{id: 'asl', header: "ASL<br>QTY", width: 30, sortable: true, dataIndex: 'asl'},
{id: 'rework', header: "REWORK<BR>QTY", width: 50, sortable: true, dataIndex: 'rework'},
{id: 'quality', header: "QUALITY<br>HOLD<br>QTY", width: 50, sortable: true, dataIndex: 'quality'},
{id: 'doh', header: "DOH", width: 30, sortable: true, dataIndex: 'doh'},
{id: 'standard', header: "STANDARD<br>PACK", width: 60, sortable: true, dataIndex: 'standard'},
{id: 'schedule', header: "SCHEDULE", width: 60, sortable: true, dataIndex: 'schedule'},
{id: 'min', header: "MIN<br>PIECE<br>BANK", width: 36, sortable: true, dataIndex: 'min'},
{id: 'time', header: "TIME<br>BANK", width: 35, sortable: true, dataIndex: 'time'},
{id: 'bank', header: "BANK", width: 35, sortable: true, dataIndex: 'bank'},
{id: 'pieces', header: "PIECES<BR>TOGO", width: 50, sortable: true, dataIndex: 'pieces'},
{id: 'piece', header: "PIECE<BR>BEYOND<BR>HORIZON", width: 52, sortable: true, dataIndex: 'piece'},
{id: 'eda', header: "EDA<BR>ISSUE<BR>CNT", width: 35, sortable: true, dataIndex: 'eda'},
{id: 'edas', header: "EDA<BR>ISSUE<BR>QTY", width: 35, sortable: true, dataIndex: 'edas'},
{id: 'past', header: "PAST<BR>DUE<BR>SPO", width: 35, sortable: true, dataIndex: 'past'},
{id: 'pasts', header: "PAST<BR>DUE<BR>MISC", width: 35, sortable: true, dataIndex: 'pasts'}
],
viewConfig: {
stripeRows: true
},
stripeRows: true,
autoExpandColumn: 'data',
height:350,
width: 896,

title:'Demo Data'
});
var search = Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
standardSubmit: true,


// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},

// The fields
//defaultType: 'textfield',
items: [



{
xtype:'textfield',
fieldLabel: 'PLANT',
name: 'plantSearch',
allowBlank: true
},
{
xtype: 'checkbox',
boxLabel: 'BREAK BANK',
id: 'breakBank',
inputValue : '1'


},
{
xtype: 'textfield',
name: 'supplierDuns',
fieldLabel: 'SUPPLIER DUNS',
allowBlank: true
},
{
xtype: 'textfield',
name: 'payType',
fieldLabel: 'PAYTYPE',
allowBlank: true
},
{
xtype: 'textfield',
name: 'fus',
fieldLabel: 'F/U',
allowBlank: true
},
{
xtype: 'textfield',
name: 'partNumber',
fieldLabel: 'PARTNUMBER',
allowBlank: true
},

{
xtype: 'button',
text: 'Search',
listeners: {
click: function(){
dstore.getProxy().url = 'getvalues.do?param=submitGrid';
dstore.getProxy().extraParams.plantSearch=document.getElementById("plantSearch").value;
dstore.getProxy().extraParams.supplierDuns=document.getElementById("supplierDuns").value;
dstore.getProxy().extraParams.payType=document.getElementById("payType").value;
dstore.getProxy().extraParams.fus=document.getElementById("fus").value;
dstore.getProxy().extraParams.partNumber=document.getElementById("partNumber").value;
//dstore.getProxy().extraParams.breakBank=document.getElementById("breakBank").checked;
dstore.load();
}
}
}
]








});

var gridView = Ext.ComponentQuery.query("grid")[0];
var fields=[];
var column;
for(var i=0;i<140;i++){
fields.push(Ext.create('Ext.data.Field', {name:'newcolumn'+i} ));
column = Ext.create('Ext.grid.column.Column',
{text: 'COLUMN'+i,dataIndex:'newcolumn'+i,width:68});

gridView.headerCt.insert(gridView.columns.length, column);
}
var model=dstore.getProxy().getModel();
model.prototype.fields.addAll(fields);

dstore.guaranteeRange(0, 100);

search.render('search_form');
grid.render('search_results');
});

Please advise why i was facing this error.
Thanks,
Kiran

scottmartin
16 Jul 2012, 4:48 PM
Duplicate post:
http://www.sencha.com/forum/showthread.php?229862