PDA

View Full Version : [CLOSED] Loadmask problem Ext.4.0.6



halcwb
26 Sep 2011, 9:25 AM
REQUIRED INFORMATION

28349

Ext version tested:

Ext 4.0.6
Browser versions tested against:

Chrome
FF
DOCTYPE tested against:

____
Description:

When switching between tabs with grid panels on it, a loading mask appears but does not disappear although stores are loaded.
Steps to reproduce the problem:

Only happens in own source code. When I paste the below source code in firebug console. I can reproduce the case. Of course there has to be server side functions to let the code run. But the server side returns like:


[{
"type": "rpc",
"tid": 20,
"action": "UnitTest",
"method": "GetPackageNames",
"result": {
"success": true,
"data": [
{
"Id": "acc2b185-1687-4183-a5ce-96f3f0d7a38b",
"Name": "tablet"
},
{
"Id": "97ec1ec2-4ecb-45c1-94a0-327d7b477c36",
"Name": "fles"
},
{
"Id": "16a358bd-ef04-4097-8e21-920745703c04",
"Name": "zetpil"
},
{
"Id": "9fc0ba60-a5b3-41e3-be28-596761e44b76",
"Name": "tube"
},
{
"Id": "56ebc367-8737-4ebe-9ed9-d610cfadcfd0",
"Name": "ampul"
}
]
}
},{
"type": "rpc",
"tid": 21,
"action": "UnitTest",
"method": "GetRouteNames",
"result": {
"success": true,
"data": [
{
"Id": "0ed92dc9-75a8-4562-8f94-b659ff0a601b",
"Name": "iv"
},
{
"Id": "6eefb0d0-e09c-4cbc-91e2-2bbcd7e883e3",
"Name": "or"
}
]
}
},{
"type": "rpc",
"tid": 22,
"action": "UnitTest",
"method": "GetUnitNames",
"result": {
"success": true,
"data": [
{
"Id": "bedac217-7718-444c-84bd-3aeba7fcf909",
"Name": "stuk"
},
{
"Id": "fad3f82d-9da4-4f35-a58c-242bad5c3b78",
"Name": "mL"
}
]
}
}]


The result that was expected:

mask disappears once stores are loaded.
Test Case:


Ext.define('GenForm.store.common.IdName', { extend: 'Ext.data.DirectStore',
model: 'GenForm.model.common.IdName',


constructor: function (config) {
var me = this;


if (!config || !config.directFn || !(config.directFn instanceof Function)) {
Ext.Error.raise('IdName store has to be constructed with a valid directFn');
}


config.root = 'data';
config.idProperty = 'Id';


me.initConfig(config);
me.callParent(arguments);
return me;
}
});




Ext.define('GenForm.lib.view.ui.RouteGrid', {
extend: 'Ext.grid.Panel',


itemId: 'grdRoute',
title: 'Routes',


initComponent: function() {
var me = this;


me.store = Ext.create('GenForm.store.common.IdName', { directFn: GenForm.server.UnitTest.GetRouteNames }).load();


me.columns = [
{
xtype: 'gridcolumn',
hidden: true,
itemId: 'colId',
dataIndex: 'Id',
text: 'Id'
},
{
xtype: 'gridcolumn',
itemId: 'colName',
dataIndex: 'Name',
text: 'Naam'
}
];
me.callParent(arguments);
}


});


Ext.define('GenForm.view.product.RouteGrid', {
extend: 'GenForm.lib.view.ui.RouteGrid',
alias: 'widget.routegrid',


initComponent: function () {
var me = this;


this.callParent(arguments)
},


getRouteStore: function () {
var store = Ext.create('GenForm.store.common.IdName', { directFn: GenForm.server.UnitTest.GetRouteNames });
store.load();
return store;
}
});


Ext.define('GenForm.lib.view.ui.UnitGroupGrid', {
extend: 'Ext.grid.Panel',


initComponent: function () {
var me = this;


me.itemId = 'grdUnitGroup',
me.title = 'Eenheden',
me.store = Ext.create('GenForm.store.common.IdName', { directFn: GenForm.server.UnitTest.GetUnitNames }).load();


me.columns = [
{
xtype: 'gridcolumn',
hidden: true,
itemId: 'colId',
dataIndex: 'Id',
text: 'Id'
},
{
xtype: 'gridcolumn',
itemId: 'colName',
dataIndex: 'Name',
text: 'Eenheidgroup'
}
];


me.callParent(arguments);
}
});


Ext.define('GenForm.view.product.UnitGroupGrid', {
extend: 'GenForm.lib.view.ui.UnitGroupGrid',
alias: 'widget.unitgroupgrid',


initComponent: function () {
var me = this;


me.callParent(arguments);
},


createUnitGroupStore: function () {
var store = Ext.create('GenForm.store.common.IdName', { directFn: GenForm.server.UnitTest.GetUnitNames});
store.load();
return store;
}
});


Ext.define('GenForm.lib.view.ui.PackageGrid', {
extend: 'Ext.grid.Panel',


itemId: 'grdPackage',
title: 'Verpakkingen',


initComponent: function () {
var me = this;


me.store = Ext.create('GenForm.store.common.IdName', { directFn: GenForm.server.UnitTest.GetPackageNames }).load();
me.columns = [
{
xtype: 'gridcolumn',
hidden: true,
itemId: 'colId',
dataIndex: 'Id',
text: 'String'
},
{
xtype: 'gridcolumn',
itemId: 'colName',
dataIndex: 'Name',
text: 'Naam'
}
];


me.callParent(arguments);
}
});


Ext.define('GenForm.view.product.PackageGrid', {
extend: 'GenForm.lib.view.ui.PackageGrid',
alias: 'widget.packagegrid',


initComponent: function () {
var me = this;


this.callParent(arguments)
},


getPackageStore: function () {
var store = Ext.create('GenForm.store.common.IdName', { directFn: GenForm.server.UnitTest.GetPackageNames});
store.load();
return store;
}
});


Ext.define('GenForm.lib.view.component.IdNameCombo', {
extend: 'Ext.form.field.ComboBox',
alias: ['widget.idnamecombo', 'widget.idnamecombobox'],


displayField: 'Name',
valueField: 'Name',
editable: false,
typeAhead: true,
queryMode: 'local',


constructor: function (config) {
var me = this;


if(config.directFn) {
config.store = me.createStore(config.directFn);
}


if (!config || !config.store) {
Ext.Error.raise('Combobox needs a store');
}


me.initConfig(config);
me.callParent(arguments);
return me;
},


initComponent: function () {
var me = this;


me.callParent(arguments);
},


createStore: function (directFn) {
var store = Ext.create('GenForm.store.common.IdName', { directFn: directFn });
store.load();
return store;
},


getIdValue: function () {
var me = this;


return me.store.findRecord('Name', me.getValue()).data.Id;
}


});


//noinspection JSUnusedGlobalSymbols
Ext.define('GenForm.lib.util.mixin.FormFieldCreator', {


createTextField: function (config) {
var me = this;
return me.createField('Ext.form.Text', config);
},


createNumberField: function (config) {
var me = this;
return me.createField('Ext.form.Number', config);
},


createHiddenField: function (config) {
var me = this;
return me.createField('Ext.form.field.Hidden', config);
},


createComboBox: function (config) {
var me = this, field;
//noinspection JSUnusedGlobalSymbols
field = config.idName ? 'GenForm.lib.view.component.IdNameCombo' : '';
if (field == '') field = 'Ext.form.field.ComboBox';


return me.createField(field, config);
},


createField: function (field, config) {
var me = this;


if (!me.fields) me.fields = {};


me.fields[config.name] = Ext.create(field, config);
return me.fields[config.name];
}
});


Ext.define('GenForm.lib.view.form.FormBase', {
extend: 'Ext.form.Panel',


mixins: ['GenForm.lib.util.mixin.FormFieldCreator'],


height: 600,
width: 700,


constructor: function (config) {
var me = this;
me.initConfig(config);
me.callParent(arguments);
return me;
},


initComponent: function () {
var me = this;


if (me.createItems) me.items = me.createItems();
me.callParent(arguments);
},


getFormData: function () {
var me = this,
record = me.getRecord();


me.getForm().updateRecord(record);
return record;
}
});


Ext.define('GenForm.lib.view.window.SaveCancelWindow', {
extend: 'Ext.window.Window',


mixins: ['GenForm.lib.util.mixin.FormCreator'],
closeAction: 'destroy',


constructor: function (config) {
var me = this;


me = me.initConfig(config);
me.callParent(arguments);
return me;
},


initComponent: function () {
var me = this;


me.toolbar = {};


me.callParent(arguments);
}


});


Ext.define('GenForm.lib.view.ui.ShapeForm', {
extend: 'GenForm.lib.view.form.FormBase',


height: 326,
width: 460,
bodyPadding: 10,


initComponent: function() {
var me = this;


me.items = [
{
xtype: 'fieldset',
itemId: 'flsShapeDetails',
title: 'Vorm Details',
items: [
{
xtype: 'hiddenfield',
itemId: 'fldId',
name: 'Id',
anchor: '100%'
},
{
xtype: 'textfield',
itemId: 'fldName',
name: 'Name',
fieldLabel: 'Naam',
anchor: '100%'
}
]
},
{
xtype: 'tabpanel',
activeTab: 0,
layout: 'anchor',
anchor: '100%',
maintainFlex: true,
items: [
me.createPackageGrid(),
me.createRouteGrid(),
me.createUnitGroupGrid()
]
}
];
me.callParent(arguments);
}
});


Ext.define('GenForm.view.product.ShapeForm', {
extend: 'GenForm.lib.view.ui.ShapeForm',
alias: 'widget.shapeform',


getShape: function () {
var me = this;
return me.getFormData();
},


createPackageGrid: function () {
return Ext.create('GenForm.view.product.PackageGrid');
},


createRouteGrid: function () {
return Ext.create('GenForm.view.product.RouteGrid');
},


createUnitGroupGrid: function () {
return Ext.create('GenForm.view.product.UnitGroupGrid');
}


});




Ext.define('GenForm.view.product.ShapeWindow', {
extend: 'GenForm.lib.view.window.SaveCancelWindow',
alias: 'widget.shapewindow',


width: 300,
height: 300,
layout: 'fit',


initComponent: function() {
var me = this;
me.forms = {};
me.items = me.createShapeForm();


me.callParent(arguments);
},


createShapeForm: function () {
var me = this;
return me.createForm({ xtype: 'shapeform', name: 'ShapeForm' });
},


loadWithShape: function (shape) {
var me = this;
me.forms.ShapeForm.loadRecord(shape);
}


}).create().show();




HELPFUL INFORMATIONScreenshot or Video:

attached
See this URL for live test case: http://Debugging already done:

none
Possible fix:

not provided
Additional CSS used:

only default ext-all.css
custom css (include details)
Operating System:

Win 7

evant
26 Sep 2011, 4:00 PM
Most likely a duplicate of this issue: http://www.sencha.com/forum/showthread.php?147141-LoadMask-does-not-get-removed-from-grid-that-is-on-inactive-tab

halcwb
26 Sep 2011, 8:50 PM
Most likely a duplicate of this issue: http://www.sencha.com/forum/showthread.php?147141-LoadMask-does-not-get-removed-from-grid-that-is-on-inactive-tab

Yes, I think so. However, is there a way to generate test code against server side test stubs? Otherwise it is very difficult to generate isolated test cases.