I have made a webapp with extjs 3.4.
I have a grid that I want to group with field street but I can't.
My code is here:
var store_intervencoes = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({
root:'rows',
autoLoad: false,
type : 'ajax',
//remoteGroup: false,
groupField: 'street',
fields:[{ name:'street', type:'integer'},
{ name:'intervenction', type:'string'},
{ name:'priority', type:'integer'},
{ name:'value', type:'string'}]
})
});
var gridPanel = new Ext.grid.GridPanel({
header: false,
store: store_intervencoes,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
layout: 'fit',
height: 300,
width: 1000,
columnLines: true,
cls: 'grid_intervencoes',
autoScroll: true,
stripeRows: true,
autoFill : true,
viewConfig: { emptyText: 'nothing', deferEmptyText: false },
groupField: 'street',
view: new Ext.grid.GroupingView({
forceFit:true,
autoHeight: true,
autoFill : true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "fk_n_rua"]})'
}),
columns: [{
//header: "Nome",
//sortable: true,
dataIndex: "intervenction",
//width: 450
},{
//header: "Prioridade",
//sortable: true,
dataIndex: "priority",
//width: 50
},{
//header: "Custo" + ' \u20AC',
//sortable: true,
dataIndex: "value",
//width: 50
},{
//header: 'Trecho',
//sortable: true,
dataIndex: "street",
//width: 50,
//groupable: true
}],
collapsible: true,
animCollapse: false,
title: 'Grouping Example',
iconCls: 'icon-grid',
fbar : [{
xtype: 'numberfield',
id: 'total',
name: 'total',
fieldLabel: 'Total',
value: '0',
readOnly: true,
fieldCls: 'valores'
}]
});
I think I have all the code like this example:
http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/grouping.html
I don't know why the grid doesn't group. I get all the data from a database with ajax and php that generate json. All fields shows up. The unique problem is the non grouping. I also get no errors.
Anyone could help me with that?
Related
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()
});
});
I have a problem rendering data store grid on window modal.
here's the code on data.store :
var list_pp = Ext.create('Ext.data.Store', {
pageSize: itemsPerPage,
model: 'list_pp',
proxy: {
type: 'ajax',
api: {
read: pp_get_url,
create: pp_set_url,
update: pp_up_url,
destroy: pp_del_url
},
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount'
},
writer: {
type: 'json',
writeAllFields: true,
root: 'data'
}
},
//autoLoad: false,
listeners: {
write: function(store, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;
}
}
});
here's the code that render on some page :
var grid_pp_list = Ext.create('Ext.grid.Panel',
{
width: '100%',
frame: false,
loadMask: true,
collapsible: false,
title: 'Detail PP',
store: list_pp,
columns: [
{
header: 'No PP',
width: 130,
sortable: true,
dataIndex: 'doc_no',
xtype: 'templatecolumn',
tpl: '{doc_no}<br/>{pp_id}/{sifat}<br/>'
}, {
header: 'Tgl.',
width: 100,
sortable: true,
dataIndex: 'pp_date',
xtype: 'datecolumn',
format:'y-m-d'
}, {
header: 'SBU Pemesan',
width: 160,
sortable: true,
dataIndex: 'org_order',
xtype: 'templatecolumn',
tpl: '{org_order}'
},{
header: 'Validasi',
width: 160,
sortable: true,
dataIndex: 'org_order',
xtype: 'templatecolumn',
tpl: '{org_order}'
},{
header: 'Action',
xtype: 'actioncolumn',
width: 60,
sortable: false,
menuDisabled: true,
xtype: 'templatecolumn',
tpl: 'Detail'
},{
header: 'Modified by',
width: 120,
dataIndex: 'modified_by',
sortable: true,
xtype: 'templatecolumn',
tpl: '<i class="icon-user"></i>{modified_by}'
},{
header: 'Modified Date',
width: 120,
sortable: true,
dataIndex: 'modified_date',
xtype: 'datecolumn',
format:'y-m-d H:m:s'
}]
here's the code on window modal :
var modal_pp = Ext.create('Ext.grid.Panel',
{
width: '100%',
frame: false,
loadMask: true,
collapsible: false,
title: 'Modal PP',
store: list_pp,
columns: [
{
header: 'No PP',
width: 130,
sortable: true,
dataIndex: 'doc_no',
xtype: 'templatecolumn',
tpl: '{doc_no}<br/>{pp_id}/{sifat}<br/>'
}, {
header: 'Tgl.',
width: 100,
sortable: true,
dataIndex: 'pp_date',
xtype: 'datecolumn',
format:'y-m-d'
}, {
header: 'SBU Pemesan',
width: 160,
sortable: true,
dataIndex: 'org_order',
xtype: 'templatecolumn',
tpl: '{org_order}'
}],
dockedItems:
[{
xtype: 'pagingtoolbar',
store: list_pp, // same store GridPanel
dock: 'bottom',
displayInfo: true
}]
});
here's generate trigger button trigger for modal window:
text: 'Generate',
iconCls: 'icon-add',
handler: function(){
if (!win) {
win = Ext.widget('window', {
closeAction: 'hide',
width: 1000,
height: 620,
minWidth: 300,
minHeight: 300,
layout: 'fit',
resizable: true,
modal: true,
items: modal_pp
});
}
win.show();
}
in rendering page everything is fine, but in window modal i can't render data store. please if anyone can give a guide or help i will be really appreciate it.
Remove width attributes from the modal grid. You cant specify width in % and if your containing parent has fit layout it doesn't matter anyway.
Wrap items in an array: items: [modal_pp]
function open() {
var req_spec_store = new Ext.data.SimpleStore({
url: 'mngr_req_ajx.php',
fields: ['value', 'text'],
data: [
['Android', 'Android'],
['iPhone', 'iPhone'],
['iPhone2', 'iPhone2'],
['iPhone3', 'iPhone3']
]
});
req_spec_store.load({
params: {
todo: 'Get_Req_Spec'
}
});
var menuWin = new Window('menuWindow', {
title: "Create Data",
width: 980,
height: 340,
draggable: true,
destroyOnClose: true,
hideEffect: Element.hide,
showEffect: Element.show,
minimizable: false,
maximizable: false,
closable: true,
resizable: false,
items: [new Ext.FormPanel({
renderTo: 'r_sp',
id: 'mngReqForm',
layout: 'form',
height: innerHeight - 250,
width: innerWidth - 50,
frame: true,
destroyOnClose: true,
defaults: {
msgTarget: 'side',
labelSeparator: ''
},
labelAlign: 'right',
items: [{
xtype: 'combo',
fieldLabel: 'Data Entry ',
store: req_spec_store,
displayField: 'text',
valueField: 'value',
mode: 'local',
emptyText: 'Select Entry...',
triggerAction: 'all',
name: 'specId2',
id: 'specId2',
hiddenName: 'specIdHid',
width: 150,
forceSelection: false,
editable: false,
selectOnFocus: true
}]
})]
});
}
window is opened in on click of button. Inside window, there is form panel. Which is having one combo type element. I am calling PHP using ajax, getting data successfully when directly doing the stuff on Ext.onReady() but not in case of window opened.
The data of your store should be in JSON (also {} instead off []=
data : [ {value:'Android', text:'Android' }, ... ]
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],
I'm pretty sure this a trivial problem and i'm just being a bit stupid. Your help would be hugely appreciated.
In controls/dashboard.js I have:
Ext.ill.WCSS.controls.dashboard = {
xtype:'portal',
region:'center',
margins:'35 5 5 0',
items:[{
columnWidth: 1,
style:'padding:10px',
items:[{
title: 'My Cluster Jobs',
layout:'fit',
html: "test"
}]
},{
columnWidth: 1,
style:'padding:10px',
items:[{
title: 'All Cluster Jobs',
iconCls: 'icon-queue',
html: "test",
items: new Ext.grid.GridPanel({
title: 'Cluster Job Queue',
store: Ext.ill.WCSS.stores.dashboardClusterJobs,
width: 791,
height: 333,
frame: true,
loadMask: true,
stateful: false,
autoHeight: true,
stripeRows: true,
floating: false,
footer: false,
collapsible: false,
animCollapse: false,
titleCollapse: false,
columns:[
{
xtype: 'gridcolumn',
header: 'Job ID',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'JB_job_number',
fixed: false
},
{
xtype: 'gridcolumn',
header: 'Priority',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'JAT_prio',
fixed: false
},
{
xtype: 'gridcolumn',
header: 'User',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'JB_owner'
},
{
xtype: 'gridcolumn',
header: 'State',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'state'
},
{
xtype: 'gridcolumn',
header: 'Date Submitted',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'JAT_start_time'
},
{
xtype: 'gridcolumn',
header: 'Queue',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'queue_name'
},
{
xtype: 'gridcolumn',
header: 'CPUs',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'slots'
}
],
bbar: {
xtype: 'paging',
store: 'storeClusterQueue',
displayInfo: true,
refreshText: 'Retrieving queue status...',
emptyMsg: 'No jobs to retrieve',
id: 'clusterQueuePaging'
}
})
}]
}]
};
Simple enough, note the reference to 'Ext.ill.WCSS.stores.dashboardClusterJobs'
So in stores/dashboard.js I just have this:
Ext.ill.WCSS.stores.dashboardClusterJobs = new Ext.data.XmlStore({
storeId: 'storeClusterJobs',
record: 'job_list',
autoLoad: true,
url: 'joblist.xml',
idPath: 'job_info',
remoteSort: false,
fields: [
{
name: 'JB_job_number'
},
{
name: 'JAT_prio'
},
{
name: 'JB_name'
},
{
name: 'JB_owner'
},
{
name: 'state'
},
{
name: 'JAT_start_time'
},
{
name: 'slots'
},
{
name: 'queue_name'
}
]
});
I run the code and I get 'store is undefined' :S It's confusing me a lot. All of the javascripts have been included in the correct order.
i.e.
<script type="text/javascript" src="/js/portal.js"></script>
<script type="text/javascript" src="/js/stores/dashboard.js"></script>
<script type="text/javascript" src="/js/controls/dashboard.js"></script>
Thanks guys!
It might be a namespace issue. What do your Ext.ns declarations look like?
I think we need more info. You're using an xtype of portal (code missing) and it's not obvious how this object is instantiated (code missing).
I figured it out. It was to do with my ordering of javascript files. (ooops!) thanks so much for your help though and apologies for the late response.