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"
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 &ldquo;msg&rdquo; is the waiting-text
2) oncomplete="frm_closeMask();"
call frm_closeMask to hide the mask
页:
[1]