PDA

View Full Version : Loading mask into Ext.FormPanel



sinma
30 Jan 2008, 2:58 AM
Hi,

How can I show a 'loading' mask into a formpanel while the form is loading?

There is the same question in this post http://extjs.com/forum/showthread.php?t=23459, but I don't know how to do it yet.

Thanks.

sfwalter
30 Jan 2008, 4:07 AM
1. Add waitMsgTarget:true to the formpanel
2. In the form Loading set the wait message like this:

theFormPanel.getForm().load({url:'someurl', waitMsg:'Loading...'});

sinma
30 Jan 2008, 6:17 AM
Ok. Thank you!

faruq
6 May 2008, 4:05 AM
Hi,
waitmsg is working fine when store have some data,But at the starting time means store data is empty then waitMsg is showing regularly? Can u tell me what can i do to stop the waitMsg, if store data is empty?

jsakalos
6 May 2008, 4:43 AM
http://examples.extjs.eu/?ex=formloadsubmit

sench23
13 Apr 2011, 1:21 AM
Hi,
any way to set loading mask manually without submitting the formpanel? I have some ajax calls in the background, and i would like to display that wait message until it completes.

thanks in advance

jsakalos
13 Apr 2011, 1:09 PM
Yes, you can call el.mask (http://dev.sencha.com/deploy/dev/docs/?class=Ext.Element&member=mask)()/el.unmask (http://dev.sencha.com/deploy/dev/docs/?class=Ext.Element&member=unmask)() on any Ext.Element.

sench23
14 Apr 2011, 2:42 AM
Hi, thanks for replying. I'm a bit confused, can you please help?


<div id='details-form'></div>
<script type="text/javascript">
Ext.onReady(function () {
var form = new Ext.FormPanel({
id:'form1',
applyTo: 'details-form',
title: 'Form 1',
frame: true,
width: 320,
height: 200,
items: [{
xtype: 'textfield',
name: 'Name',
id: 'Name',
fieldLabel: 'Company name'
}]
});


form.on({
actioncomplete: function (form, action) {
if (action.type == 'load') {
var data = action.result.data;
form.setTitle(data.Name + ' - Details');
}
}
});

form.load({ url: 'http://localhost:55284/DataStore/GetStoreJSON/30', waitMsg: 'Loading store details...' });
});
</script>

So here what happens when i try it:

Ext.get('form1') // returns NULL
Ext.getCmp('form1') // returns K object
Ext.getCmp('form1').mask(); // returns error 'Object [object Object] has no method 'mask''

I also see there is no 'actioncomplete' event in the api docs, although i did find it in some extjs 3.0 pdf..

Thanks in advance

jsakalos
14 Apr 2011, 4:01 AM
Ext.getCmp returns Ext component. Each component in turn has its main element that you can get by cmp.getEl() so you could:


Ext.getCmp('cmp-id').getEl().mask(...);


BTW, aren't you looking for the solution like this (http://examples.extjs.eu/?ex=formloadsubmit)?

sench23
14 Apr 2011, 4:15 AM
Not quite, since I'm using Ext.Direct to get the data, and not form.load().. However, I see there is a good number of practical examples, so thanks for sharing it with me.

Thanks for your help on getEl().

nixinliu
16 Apr 2011, 12:53 AM
???EXT?????????????EXT??????????EXT??????
????????EXTJS??????API??????????????










???EXT?????????????EXT??????????EXT??????
????????EXTJS??????API??????????????