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

         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"

         onclick="frm_loadMask({msg:'Save quotation,please wait!!'})"

         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)     onclick="frm_loadMask({msg:'Save quotation,please wait!!'})"
call frm_loadMask, and the parameter “msg” is the waiting-text

2)     oncomplete="frm_closeMask();"
call frm_closeMask to hide the mask