Jsf使用Extjs中的loadMask实现页面等待效果

gaolixu

Introduce a technology to use Ext waiting dialog for better user-friendly. Please see the following picture. When click a button, a mask will be shown until get response from server. This is AJAX feature.




How to use it? Just add two method into the button’event


JavaScript：

<link
   href="#{seamRequest}/resources/ext/ext/resources/css/ext-all.css"
   rel="Stylesheet" type="text/css" />
  <script
   src="${facesContext.externalContext.requestContextPath}/resources/ext/ext/ext-base.js"
   type="text/javascript"></script>
  <script
   src="${facesContext.externalContext.requestContextPath}/resources/ext/ext/ext-all-debug.js"
   type="text/javascript"></script>
  <script>
frm_mask_obj=null;

function click_open(option){
  if(Ext.isEmpty(frm_mask_obj)) {
     frm_mask_obj=new Ext.LoadMask(Ext.getBody(),{msg:'plese wait for a while'});
  }
  Ext.apply( frm_mask_obj, option);
  frm_mask_obj.show();  
};
function click_close(){
  if(!Ext.isEmpty(frm_mask_obj)) {
    frm_mask_obj.hide();
  }
};
</script>
页面代码：

<a4j:commandButton id="quot_input_save_input" value="Save"
         action="#{inputBean.save}" style="width:70px"
         data="#{inputBean.allMessages}"
         binding="#{inputBean.saveButton}" ajaxSingle="false"
         
         oncomplete="frm_closeMask();checkValidationMessage('form_input');showResponseMessages(data);"
         reRender="panel_all"
         rendered="#{talui:checkSecurityForUiComponent('quot_input_save_input',2)}"
         disabled="#{!talui:checkSecurityForUiComponent('quot_input_save_input',1)}" />


please take note
1)     
call frm_loadMask, and the parameter “msg” is the waiting-text
2)     oncomplete="frm_closeMask();"
call frm_closeMask to hide the mask