PDA

View Full Version : combobox no loading mask



sophicworks
20 Feb 2013, 10:26 PM
Hi! I'am quite new to EXTJS and got a problem on combobox and grid loading mask,
it loads the data correctly but there is no loading mask while the store is loading..
I wanted to know if the combobox is still retrieving the data..
The queryMode is set to remote and I'am request the data from actual server..

I manage to add setLoading on my grid and works good, but using setLoading on combo box masks everything.. even the fieldLabel.

Any idea or solution to this?



{
xtype: 'combobox',
name: 'piping_option',
fieldLabel: 'Piping Option',
store: Ext.create('PA.store.Lookup'),

displayField: 'list_name',
valueField: 'list_id',

typeAhead: true,
queryMode: 'remote',
editable: false,
allowBlank: false,

listeners: {
render: function() {
this.store.load();
}
}
},

sword-it
21 Feb 2013, 2:21 AM
Hi Sophikwork,

No need to add setLoading() for combo, because this method allows you to show or hide (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox-method-setLoading) a LoadMask on top of this component. combobox "queryMode" config is enough for showing mask on combo list.
See this sample code it work fine for me-


var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
proxy:{
type:'ajax'
, url:'mypage.php'
, reader:{
type:'json'
}
}
});


// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'remote',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});

sophicworks
21 Feb 2013, 5:17 PM
Hi sword-it,

Thanks for your quick reply.. sencha's support never upset me..
but as you can see in my code above.. I've already set the queryMode to 'remote',
but still the loading mask isn't showing.. but the data are loaded correctly..
I don't know what exactly causes it not to show the loading mask.

maybe you have an idea about this matter..

P.S.
same goes with my grid.. so I suspect the store or something
here is my code for the store..



Ext.define('PA.store.Lookup', {
extend: 'PA.store.common.Sophic',
sophicFilterType: 'Other',
alias: 'widget.lookupstore',
autoLoad: false,
fields: [
{name: 'list_id', mapping: 'list_id'},
{name: 'list_name', mapping: 'list_name'},
],
listeners: {
beforeload: function(store,params){

var filterData = Ext.JSON.encode({'type': this.sophicFilterType});
store.proxy.setExtraParam('data', filterData);

}
}//end of listener

});





Ext.define('PA.store.common.Sophic', {
extend: 'Ext.data.Store',
autoLoad: false,
pageSize: 25,
gridID: '',

filterValue: [],

remoteSort: true,

sorters: [{
property: 'id',
direction: 'ASC'
}],

proxy: Ext.create('PA.store.common.proxy.SophicProxy',{
api: {
read: 'http://pos.sophicworks.com/nsapi/index.php?type=pos_dictionary',
update: 'data/lookup.php',
create: 'data/lookup.php',
destroy: 'data/lookup.php'
},
reader:{
type: 'json',
root: 'data',
encode: true,
successProperty: 'success',
totalProperty: 'total',
}
}),

//checks if the grid search filter is empty or not
// returns true if if search filter is empty else false
isEmpty: function(obj) {
for(var prop in obj) {
if(obj.hasOwnProperty(prop))
return false;
}
return true;
},

listeners: {
beforeload: function(store,params)
{

var filterFields = new Array();
var sorter = new Array();
var filterOrder = '';

if(!this.isEmpty.call(this,this.filterValue))
{
var firstLoop = true;
Ext.Object.each(this.filterValue,function(key,value,obj){
if(value)
{
filterFields.push({'name':key,'value': value});
if(firstLoop)
{
filterOrder = key;
firstLoop = false;
}
else
{
filterOrder = filterOrder +","+ key;
}
}

});
}

Ext.each(params.sorters,function(item){
sorter.push({'column':item.property,'direction': item.direction});
});

var filterData = Ext.JSON.encode({
'filters': filterFields,
'order': filterOrder,
'start': params.start,
'limit': params.limit,
'page': params.page,
'sorters': sorter
});

store.proxy.setExtraParam('data', filterData);

}
}//end of listener
});







Ext.define('PA.store.common.proxy.SophicProxy', {
extend: 'Ext.data.proxy.Rest',
alias: 'widget.sophicproxy',
type: 'rest',
//myStore: 'Ext.data.Store',
reader:{
type: 'json',
root: 'data',
encode: true,
successProperty: 'success',
totalProperty: 'total',
},
writer: {
type: 'json',
root: 'data',
encode: true,
successProperty: 'success',
totalProperty: 'total'
},
listeners: {
exception: function(proxy, response, operation){
var error = Ext.JSON.decode(response.responseText);
if(error.error_code == 99999 || error.error_code == '99999')
{
window.location = '/login';
}
else
{
Ext.Msg.alert('Error Code: '+ error.error_code, error.error_message);
}

}
}

});