PDA

View Full Version : Loading Mask won't disappear after sorting.



manticor
6 Jan 2012, 10:42 AM
This is based off of the writable grid example. The data all gets loaded fine, and it was sorting fine until i changed my code to look like the writable grid example, where I extended the form and grid classes. Basically, what is happening is that after I sort the grid (doesn't matter what column) the loading makes appears and won't go away, even though all the data is in the grid and i can continuously sort. I can keep clicking on one of the column headers and it will sort ascending, then sort descending, ect, but the loading mask remains there. The problem is that the loading mask appears but then doesn't go away. I can't figure out why it is doing this and I am not sure how the loading mask works exactly. I have been looking through the documentation and I haven't found much to help me understand. Here is my code:




Ext.define('Employee.Form',
{
extend: 'Ext.form.Panel',
alias: 'widget.employeeform',


requires:
[
'Ext.form.*',
'Ext.layout.container.Column',
'Ext.tab.Panel'

],
initComponent: function()
{
Ext.apply(this,
{
url:'save-form.php',
frame:true,
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
defaults: {
anchor: '100%'
},


items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, {
xtype: 'timefield',
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
}],


buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
this.callParent();
}
});






Ext.define('Employee.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.employeegrid',


requires: [
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*',
'Ext.util.*',
'Ext.grid.PagingScroller'
],

initComponent: function()
{
Ext.apply(this,
{
title:'Employee List',
verticalSctroller:
{
xtype: 'paginggridscroller',
activePrefect: false
},

loadMask: false,
invalidateScrollerOnRefresh: false,
viewConfig:
{
trackOver: false
},
columns:
[
{
text: 'Id',
flex: 10,
hideable: false,
dataIndex: 'id',
sortable: true
},
{
text: 'Employee Name',
flex: 50,
hideable: false,
dataIndex: 'employee_name'
},
{
text: 'Nickname',
flex:20,
hideable: false,
dataIndex: 'nickname'
},
{
text: 'First Name',
felx:50,
hideable: false,
dataIndex: 'first_name'
},
{
text: 'Last Name',
flex: 50,
hideable: false,
dataIndex: 'last_name'
}
]
});
this.callParent();

},
});




Ext.define('EmployeeModel', {
extend: 'Ext.data.Model',
fields: ['employee_name', 'id','last_name', 'first_name', 'nickname' ]
});




Ext.require([
'Ext.data.*'
]);


Ext.onReady(function(){
var store = Ext.create('Ext.data.JsonStore', {
model: 'EmployeeModel',
id: 'store',
pagesize: 50,
buffered: true,
purgePageCount: 0,
autoLoad: true,
proxy: {
type: 'ajax',
url: 'get-employees.php',
reader: {
type: 'json',
root: 'employees'
}
}
});

var main = Ext.create('Ext.container.Container', {
padding: '0 0 0 20',
width: 500,
height: 500,
loadmask: false,
renderTo: document.body,
layout: {
type: 'vbox',
align: 'stretch'
},
items:
[
{
itemId: 'form',
xtype: 'employeeform',
height: 200,
margins: '0 0 10 0'
},

{
itemId: 'grid',
xtype: 'employeegrid',
title: 'Employee List',
flex: 1,
store: store
}
]


});


});

mitchellsimoens
6 Jan 2012, 11:33 AM
Do you even want a load mask? I see you have loadMask set to false on the grid panel but the viewConfig is where you should set the loadMask

manticor
6 Jan 2012, 11:38 AM
i added the loadMaks: false to the view config, and it got rid of the loading mask. Do you think because I had autoLoad: true that the loadingMask stayed there? I was just worried that the loading mask being there was indication that something was being done incorrectly.

mitchellsimoens
6 Jan 2012, 12:13 PM
What version of Ext JS 4?

manticor
6 Jan 2012, 2:04 PM
version 4.0

mitchellsimoens
6 Jan 2012, 2:10 PM
version 4.0

There has been lots of bug fixes since those days.