PDA

View Full Version : Expand problem after reloading the page



a.ng
14 May 2014, 7:35 AM
Hi !I have a big problem with my grid panel.I set collapsible:true to my panel and it works fine if i don't refresh the page. But when i collapse the grid, refresh the panel, reload the page then expand the grid, the grid doesn't show at all. So i inspect the page thanks to my brower and see that the height of the panel, the grid and the grid-view is set to 26px ( height of the toolbar ) instead of 1xx px. When i change the values of these component with my browser from 26 to 1xx, i can see the grid. Can someone help me plz ? Sorry for my poor english :)

scottmartin
15 May 2014, 8:40 AM
You would need to provide your code or test case is preferred. Is your store populated to show the records?

>>> reload the page then expand the grid, the grid doesn't show at all

The entire grid, or just the rows of data?

a.ng
16 May 2014, 12:38 AM
It's just the rows of data which doesn't show but when i inspect the page i can see that the data is loaded.I want to put my code but it seems that there is a bug with the text editor, i can't line break.

scottmartin
16 May 2014, 4:35 AM
>>> I want to put my code but it seems that there is a bug with the text editor, i can't line break

What editor are you using? It works fine for more, but some editors do not include them.

scottmartin
16 May 2014, 4:36 AM
You can correct your code using:
http://jsbeautifier.org/

a.ng
16 May 2014, 6:35 AM
I was talking about the sensha forum editor, i couldn't line break.

Ext.onReady(function() { //create model
Ext.define('Entries', {
extend: 'Ext.data.Model',
fields: [
{name: 'column', type: 'string'},
{name: 'total', type: 'string'},
{name: 'm6', type: 'string'},
{name: 'm7', type: 'string'},
{name: 'm8', type: 'string'},
{name: 'm9', type: 'string'},
{name: 'm10', type: 'string'},
{name: 'm11', type: 'string'},
{name: 'm12', type: 'string'},
{name: 'm1', type: 'string'},
{name: 'm2', type: 'string'},
{name: 'm3', type: 'string'},
{name: 'm4', type: 'string'},
{name: 'm5', type: 'string'},
{name: 'periode', type: 'string'}
]
});


// create the data store
var store = Ext.create('Ext.data.Store', {
model: 'Entries',
proxy: {
type: 'ajax',
url: '/commercial/entries?format=json',
reader: {
type: 'json',
root: 'content'
}
},
autoLoad: false
});




// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
id: 'gridEntries',
store: store,
stateful: true,
stateId: 'stateGridEntries',
columns: {
defaults: {
align: 'right',
flex: 1,
renderer: App.tool.commafy
},
items: [
{
text: '',
sortable: false,
dataIndex: 'column'
},
{
text: 'Total',
sortable: false,
dataIndex: 'total'
},
{
text: 'Juin',
sortable: false,
dataIndex: 'm6'
},
{
text: 'Juillet',
sortable: true,
dataIndex: 'm7'
},
{
text: 'Aout',
sortable: true,
dataIndex: 'm8'
},
{
text: 'Septembre',
sortable: true,
dataIndex: 'm9'
},
{
text: 'Octobre',
sortable: true,
dataIndex: 'm10'
},
{
text: 'Novembre',
sortable: true,
dataIndex: 'm11'
},
{
text: 'Décembre',
sortable: true,
dataIndex: 'm12'
},
{
text: 'Janvier',
sortable: true,
dataIndex: 'm1'
},
{
text: 'Février',
sortable: true,
dataIndex: 'm2'
},
{
text: 'Mars',
sortable: true,
dataIndex: 'm3'
},
{
text: 'Avril',
sortable: true,
dataIndex: 'm4'
},
{
text: 'Mai',
sortable: true,
dataIndex: 'm5'
},
{
text: 'Total période',
sortable: true,
dataIndex: 'periode'
}]
},
tools: [
{
type: 'gear',
tooltip: 'Options',
handler: function(click, toolEl, panel) {
var params = {
url: "/commercial/entries-options",
title: "Suivi des entrées : options"
};
App.Commercial('myModal', 'gridEntries').loadPopup(params);
}
},
{
type: 'refresh',
tooltip: 'Rafraichir',
handler: function(click, toolEl, panel) {
Ext.getCmp('gridEntries').getStore().load();
}
},
{
type: 'print',
tooltip: 'Exporter',
handler: function(click, toolEl, panel) {
window.open("/commercial/entries?format=csv");
}
}
],
title: 'Suivi des entrées',
renderTo: 'grid-entries',
viewConfig: {
stripeRows: true,
getRowClass: function(record, index, rowParams, store) {
return index === 4 ? 'blueRow' : '';
}
},
collapsible: true,
listeners: {
afterrender: function(grid) {
Ext.defer(
function() {
grid.getStore().load();
},
100
);
}
}
});
});

a.ng
20 May 2014, 11:46 PM
I really need some help plz :( !

jsakalos
21 May 2014, 3:03 AM
set stateful:false to see if the problem could be caused by restoring the saved state
give your grid an explicit height

a.ng
21 May 2014, 3:17 AM
> set stateful:false to see if the problem could be caused by restoring the saved state.

I already try this but i need the saved state to keep the panel collapsed when the page is reloaded.

> give your grid an explicit height.

So i tried to put an explicit height with stateful : true and it works when i reload the page.
But the problem is that the number of row change so i can't define an explicit height.

a.ng
27 May 2014, 12:04 AM
Anyone plz :( ?