Related
I have a listener defined on çhange event for an item filefield in a Panel. Using loadData method, on the Store with id documentGridStore, I am able to insert data into the store (debugger shows store updated) and count printed below correctly gets updated each time. But, the Panel is not getting updated no matter what I do.
Please suggest what is wrong/missing here. I have provided most of the relevant code.
Ext.define('uploadPaperDocumentDialogPanel', {
extend:'Ext.form.Panel',
...,
items: [{
xtype: 'combobox',
name: 'documentType',
id: 'docTypeId',
fieldLabel: getText('label.document.type'),
emptyText: getText('label.select.type'),
store: 'docTypeStore',
displayField: 'key',
valueField: 'value',
allowBlank : false,
selectOnFocus : true,
typeAhead: true,
forceSelection : true,
queryMode:'local',
width: 400
},
{
xtype:'filefield',
buttonText: 'Browse',
msgTarget: 'qtip',
name:'files[]',
id:'fileId',
allowBlank:false,
style: "padding-left: 5px;padding-right: 20px",
width: 275,
listeners: {
change: function(fld, value){
var files = fld.fileInputEl.dom.files;
var names = [];
if(files){
names.push({"documentType": Ext.getCmp('docTypeId').getValue() , "fileName": files[0].name});
Ext.data.StoreManager.lookup('documentGridStore').loadData(names, true);
console.log(Ext.data.StoreManager.lookup('documentGridStore').getCount());
}
}
},
uploadDocumentGrid
}]
});
Ext.define('DocumentGridModel', {
extend: 'Ext.data.Model',
fields:[
{name : 'documentType' , type : 'string'}
,{name : 'fileName',type : 'string'}
]
});
var UploadDocumentStore = Ext.create('Ext.data.Store', {
model: 'DocumentGridModel',
storeId:'documentGridStore',
data:[]
});
var uploadDocumentGrid = Ext.define('DocumentGrid', {
extend:'Ext.grid.Panel'
,alias:'widget.documentGridId',
width: 400,
border:true,
bodyPadding: 0,
title: 'Documents to be uploaded',
id:'documentGridId',
iconCls: 'icon-stipNote',
columnLines: true
,store: Ext.data.StoreManager.lookup('uploadDocumentGridStore')
,initComponent : function() {
this.columns= [
{
header : 'Document Type',
id : 'documentType',
dataIndex : 'doctype',
flex:1,
align:"left",
editable : false,
sortable: false,
hideable: false,
resizable: false,
}, {
header : 'Filename',
id : 'fileName',
dataIndex : 'filename',
flex:1,
align:"left",
sortable: false,
hideable: false,
resizable: false,
editable : false
}
];
this.store=UploadDocumentStore;
this.callParent();
},
reloadGrid : function() {
this.store.reload();
},
viewConfig: {
emptyText: getText('queuegrid.pagingtoolbar.nodatamessage')
}
});
As #Arthur Rubens indicated, I started checking uploadDocumentGrid grid. And guess what that is where the problem was!
dataIndex field in uploadDocumentGrid for both columns was not matching with DocumentGridModel columns.
I updated uploadDocumentGrid as follows and values reflected on UI:
var uploadDocumentGrid = Ext.define('DocumentGrid', {
extend:'Ext.grid.Panel'
,alias:'widget.documentGridId',
width: 400,
border:true,
bodyPadding: 0, // Don't want content to crunch against the borders
title: 'Documents to be uploaded',
id:'documentGridId',
iconCls: 'icon-stipNote',
columnLines: true //INITCOMPONENT
,store: Ext.data.StoreManager.lookup('uploadDocumentGridStore')
,initComponent : function() {
this.columns= [
{
header : 'Document Type',
id : 'documentType',
dataIndex : 'documentType',
flex:1,
align:"left",
editable : false,
sortable: false,
hideable: false,
resizable: false,
}, {
header : 'Filename',
id : 'fileName',
dataIndex : 'fileName',
flex:1,
align:"left",
sortable: false,
hideable: false,
resizable: false,
editable : false
}
];
this.store=UploadDocumentStore;
//finally call the super classes implementation
this.callParent();
},
// RELOADGRID
reloadGrid : function() {
this.store.reload();
},
viewConfig: {
emptyText: getText('queuegrid.pagingtoolbar.nodatamessage')
}
});
I am still learning extjs. Thanks a lot for your help!
{ extend: 'Ext.grid.Panel',
autoScroll: true,
layout: 'fit',
padding: '5 5 5 0',
width: 450,
selModel: {
mode: 'MULTI',
pruneRemoved: false
},
config: {
labels: {},
defSel: {},
keepSelections: true
},
initComponent: function() {
this.title = this.labels.MEAS_LIST_PANEL_TITLE;
var measStore = Optima.store.Measurement.create();
this.store = measStore;
this.columns = [{
text: 'list',
sortable: true,
dataIndex: 'name',
flex: 1
}, {
text: 'unit'
sortable: true,
dataIndex: 'unit',
flex: 1
}, {
text: 'sample'
sortable: true,
dataIndex: 'sampletime',
flex: 1
}, {
text: 'desc',
sortable: true,
id: 'desc',
dataIndex: 'desc',
flex: 1
}];
this.bbar = {
xtype: 'pagingtoolbar',
pageSize: 25,
store: measStore,
displayInfo: false
};
this.callParent(arguments);
}
});
You should use the buffered store.
Ext.create('Ext.data.BufferedStore', {
storeId: 'exampleStore',
autoLoad : true,
pageSize : 100,
fields: ['userId', 'id', 'title'],
proxy : {
type : 'ajax',
...
}
});
Then get rid of the paging toolbar since the buffered store will automatically page based off page size.
A BufferedStore maintains a sparsely populated map of pages corresponding to an extremely large server-side dataset.
For more details you can refer ExtJS Docs for BufferedStore
I have created an sencha fiddle demo this will show how it is working.
Ext.define('ForumThread', {//Define model
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'username', {
name: 'replycount',
type: 'int'
}, {
name: 'lastpost',
mapping: 'lastpost',
type: 'date',
dateFormat: 'timestamp'
},
'lastposter', 'excerpt', 'threadid'
],
idProperty: 'threadid'
});
// create the Data Store
var store = Ext.create('Ext.data.BufferedStore', {
model: 'ForumThread',
remoteGroup: true,
leadingBufferZone: 300,
pageSize: 50,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an Ajax proxy would be better
type: 'jsonp',
url: 'https://www.sencha.com/forum/remote_topics/index.php',
reader: {
rootProperty: 'topics',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true,
// sends single group as multi parameter
simpleGroupMode: true,
// This particular service cannot sort on more than one field, so grouping === sorting.
groupParam: 'sort',
groupDirectionParam: 'dir'
},
sorters: [{
property: 'threadid',
direction: 'ASC'
}],
autoLoad: true,
listeners: {
// This particular service cannot sort on more than one field, so if grouped, disable sorting
groupchange: function (store, groupers) {
var sortable = !store.isGrouped(),
headers = grid.headerCt.getVisibleGridColumns(),
i, len = headers.length;
for (i = 0; i < len; i++) {
headers[i].sortable = (headers[i].sortable !== undefined) ? headers[i].sortable : sortable;
}
},
// This particular service cannot sort on more than one field, so if grouped, disable sorting
beforeprefetch: function (store, operation) {
if (operation.getGrouper()) {
operation.setSorters(null);
}
}
}
});
function renderTopic(value, p, record) {
return Ext.String.format(
'{0}',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}
var grid = Ext.create('Ext.grid.Panel', {
width: '100%',
height: 500,
collapsible: true,
title: 'Buffer grid example with buffer store',
store: store,
loadMask: true,
selModel: {
pruneRemoved: false
},
viewConfig: {
trackOver: false
},
features: [{
ftype: 'grouping',
hideGroupedHeader: false
}],
columns: [{
xtype: 'rownumberer',
width: 50,
sortable: false
}, {
tdCls: 'x-grid-cell-topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
renderer: renderTopic,
sortable: true,
groupable: false,
cellWrap: true,
filter: true
}, {
text: "Author",
dataIndex: 'username',
width: 100,
hidden: true,
sortable: true,
groupable: false
}, {
text: "Replies",
dataIndex: 'replycount',
align: 'center',
width: 70,
sortable: false,
filter: {
type: 'numeric'
}
}, {
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
width: 130,
renderer: Ext.util.Format.dateRenderer('d-M-Y h:i A'),
sortable: true,
groupable: false
}],
renderTo: Ext.getBody()
});
Has anybody seen any sample of extjs grid with buffered scrolling with new row, row editing and row deletion support?
Can CellEditing and RowEditing plugins be used with Buffered Scrolling?
Is row editing even possible with buffered scrolling?
Cheers,
Avi
I had opened a thread at Ext forum and got the response, insertion and deletion is NOT supported with buffered scrolling.
http://forums.ext.net/showthread.php?27969-Buffered-Scrolling-with-Row-Editing-Deletion-Addition&p=124559&posted=1#post124559
Cheers,
Avi
I changed this example http://docs.sencha.com/extjs/4.2.2/#!/example/grid/infinite-scroll.html, added the row editor. Open this example: http://jsfiddle.net/zAnZg/1/, click on record, change values and then click "Update"
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.plugin.BufferedRenderer'
]);
Ext.onReady(function(){
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'username', {
name: 'replycount',
type: 'int'
}, {
name: 'lastpost',
mapping: 'lastpost',
type: 'date',
dateFormat: 'timestamp'
},
'lastposter', 'excerpt', 'threadid'
],
idProperty: 'threadid'
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
id: 'store',
model: 'ForumThread',
remoteGroup: true,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
leadingBufferZone: 300,
pageSize: 100,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an Ajax proxy would be better
type: 'jsonp',
url: 'http://www.sencha.com/forum/remote_topics/index.php',
reader: {
root: 'topics',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true,
// sends single group as multi parameter
simpleGroupMode: true,
// This particular service cannot sort on more than one field, so grouping === sorting.
groupParam: 'sort',
groupDirectionParam: 'dir'
},
sorters: [{
property: 'threadid',
direction: 'ASC'
}],
autoLoad: true,
listeners: {
// This particular service cannot sort on more than one field, so if grouped, disable sorting
groupchange: function(store, groupers) {
var sortable = !store.isGrouped(),
headers = grid.headerCt.getVisibleGridColumns(),
i, len = headers.length;
for (i = 0; i < len; i++) {
headers[i].sortable = (headers[i].sortable !== undefined) ? headers[i].sortable : sortable;
}
},
// This particular service cannot sort on more than one field, so if grouped, disable sorting
beforeprefetch: function(store, operation) {
if (operation.groupers && operation.groupers.length) {
delete operation.sorters;
}
}
}
});
function renderTopic(value, p, record) {
return Ext.String.format(
'{0}',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
clicksToEdit: 1,
autoCancel: false,
listeners:{
edit: function(editor, e){
Ext.MessageBox.alert(
'Just create Ajax recuest here. Post changed record:<br/>' +
Ext.JSON.encode(e.record.data)
);
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
collapsible: true,
title: 'ExtJS.com - Browse Forums',
store: store,
loadMask: true,
selModel: {
pruneRemoved: false
},
multiSelect: true,
viewConfig: {
trackOver: false
},
features:[{
ftype: 'grouping',
hideGroupedHeader: false
}],
plugins: [rowEditing],
// grid columns
columns:[{
xtype: 'rownumberer',
width: 50,
sortable: false
},{
tdCls: 'x-grid-cell-topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
renderer: renderTopic,
sortable: true,
editor: {
allowBlank: false
}
},{
text: "Author",
dataIndex: 'username',
width: 100,
hidden: true,
sortable: true
},{
text: "Replies",
dataIndex: 'replycount',
align: 'center',
width: 70,
sortable: false,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
},{
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
width: 130,
renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
sortable: true,
groupable: false,
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y',
minValue: '01/01/2006',
minText: 'Cannot have a start date before the company existed!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}
}],
renderTo: Ext.getBody()
});
});
What i want to do is a filter option in a column of a grid. THis is the column:
{
id: 'kleuren',
text: 'Kleuren',
sortable: true,
filterable: true,
minWidth: 60,
flexible: 0,
width: 60,
filter: {
type: 'list',
store: kleuren
},
renderer: kleurenWeergave,
dataIndex: 'kleuren'
}
for the store/model i use this
kleurenStore = Ext.create('Ext.data.Store', {
fields: ['id', 'text'],
data: kleurenModel
});
var kleurenModel = [
['rood', 'rood'],
['groen', 'groen'],
['blauw', 'blauw'],
['geel', 'geel']
]
This is my grid now
var grid = Ext.create('PersistantSelectionGridPanel', {
autoscroll: true,
region: 'center',
store: allLoaded,
multiSelect: false,
stateful: true,
features: [filtersFeature],
loadMask: false,
stateId: 'stateGrid',
viewConfig: {
stripeRows: true
},
columns: [{....
What version of ExtJS are you running ? Cant debug much with the code you posted.
Can you post the code of your Grid ??
Your Grid should have a filters feature added as a config :
var filtersFeature =
{
ftype : 'filters',
local : false, // For Server Side Filtering
encode : true
};
And your grid should have a config option
....
columns: defaultModel,
loadMask: true,
features: [filtersFeature] // To enable Filters
....
I have a panel defined like this:
var msgDetailsPanel = new Ext.ux.ManagedIFrame.Panel({
title: 'M',
header: true,
width:700,
height:200,
autoScroll: true
});
And I have a Grid defined like this:
var detailGrid = new Ext.grid.GridPanel({
id:'detailGrid',
store: dataStore,
collapsible: false,
columnLines: false,
enableHdMenu: false,
header: false,
cm: new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
{id:'msgId',hidden: true, dataIndex: 'msgId'},
{sortable: true, dataIndex: 'deliveryAddr'},
{sortable: true, dataIndex: 'deliveryDate'},
{sortable: true, dataIndex: 'status', renderer:function(value, p, record){
return String.format( '<font color="009966">{0}</font>', value );}},
{header: 'info',xtype: 'templatecolumn',tpl: 'View Message Details'}
}),
viewConfig: {
forceFit:true
},
columnLines: false,
frame:false,
collapsible: false,
animCollapse: false,
title: alertName,
disableSelection: true,
deferRowRender:false
});
Now I want to add these two components to a window.
win = new Ext.Window({
layout:'fit',
title: '<spring:message code="title.alertDetails" />',
autoDestroy: true,
autoScroll: true,
width:600,
height:400,
closable:false,
plain: true,
items: [{detailGrid}, {msgDetailsPanel}],//This is where error comes
buttons: [{
text: '<spring:message code="label.button.close" />',
handler: function(){
win.hide(this);
}
}]
});
I get error:
Expected ':'
When I am adding only the msgDetailsPanel under items, things work fine.
What am I doing wrong?
Try replacing this line:
items: [{detailGrid}, {msgDetailsPanel}],
with:
items: [detailGrid, msgDetailsPanel],