`

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

 

 

 

  • 大小: 65.8 KB
分享到:
评论

相关推荐

    JSF中使用BooleanCheckbox实现全选功能

    这篇博客文章“JSF中使用BooleanCheckbox实现全选功能”可能详细讲解了如何利用这种组件在用户界面中创建一个可以勾选的复选框,以便一次性选择或取消选择多个条目。下面我们将深入探讨JSF中的BooleanCheckbox及其在...

    poi读取并导出excel(jsf bean 页面的实现)

    3. 数据表格的实现:在JSF页面中,使用`t:dataTable`标签来展示数据表格,通过绑定JSF Bean的数据,实现数据的展示和操作。 4. 文件下载的实现:通过使用`HttpServletResponse`和`OutputStream`,实现文件的下载。...

    用jsf做的登录注册的组件

    这些组件可以直接在JSP或Facelets页面中使用,简化了前端开发。 3. **登录与注册**:登录注册功能通常包括用户名验证、密码比较、错误处理等。在JSF中,可以通过EL(Expression Language)来绑定组件值到后台Bean的...

    JSF标准的两个实现

    在实际开发中,开发者可以根据项目需求、团队熟悉度、性能要求以及对最新特性的需求来决定使用哪个JSF实现。例如,如果你的项目需要最新的JSF特性,那么官方实现可能是首选;如果重视开源社区的贡献和自定义组件,...

    JSF全套(JSF入门教+ LIB+ Ajax4JSF使用手册 )

    2. **JSF标签**:JSF的UI组件是以标签的形式在JSP页面中使用的,这些标签对应于服务器端的组件。学习JSF标签,你需要理解每个标签的用途,如`h:inputText`用于文本输入,`h:commandButton`用于触发动作,以及如何...

    JSF文件下载实现

    在本文中,我们将深入探讨如何使用JSF来实现在Web应用程序中下载文件的功能。主要涉及的关键知识点包括: 1. **JSF上下文环境获取**: 在`downloadFile`方法中,首先通过`FacesContext.getCurrentInstance()`获取...

    jsf中文使用教程jsf中文使用教程

    5. **国际化支持**:JSF支持多语言,这在“JSF中文使用教程”中可能包含如何设置和使用中文资源的内容。 **学习JSF的关键概念**: 1. **Facelet**:Facelets是JSF的默认视图技术,用于创建和组织用户界面组件。 2. ...

    ajax4jsf使用中文手册

    Ajax4JSF(全称是Ajax for JavaServer Faces)是一种集成在JavaServer Faces(JSF)框架中的Ajax库,它允许开发者在JSF应用程序中轻松实现异步数据更新,提供更流畅的用户体验。这份中文手册详细介绍了如何将Ajax...

    JSF+hibernate实现批量删除

    总的来说,JSF与Hibernate结合使用可以方便地实现Web应用中的批量删除功能。开发者可以通过声明式编程方式构建用户界面,同时利用Hibernate的ORM能力处理数据库操作。在实际开发中,还需要注意错误处理、权限控制、...

    JSF1.2+EJB3实现的一个项目实例

    jsf1.2+ejb3.0实现的员工管理系统,做成了部分:一部分是ejb端,实现业务逻辑;另一部分是web端,实现web浏览。通过这个实例,你可以学会用jsf1.2和ejb3去做企业项目。内附源代码、分析和部署文档。

    jsf实现登录功能

    在这个"jsf实现登录功能"的例子中,我们将探讨如何利用JSF来构建一个基本的用户登录系统。 首先,登录功能通常包括两部分:前端页面和后端逻辑。在JSF中,前端页面通常由XHTML文件(.xhtml)组成,这些文件结合了...

    jsf 中文文档 jsf 中文文档

    - **导航概述**:导航是 JSF 中的一个关键特性,它定义了应用程序中页面间的跳转逻辑。 - **导航规则**:通过在 `faces-config.xml` 文件中定义导航规则来实现页面之间的跳转。 **1.4 导航规则设置** - **导航案例...

    第1部分-增强JSF页面的外观

    在“jsfcssjs_part1_src”文件中,可能包含了一些示例代码,展示了如何结合JSF的Ajax功能和JavaScript来实现局部更新和动态效果。 JSF自身提供了一套Ajax支持,通过使用`&lt;f:ajax&gt;`标签或者PrimeFaces等库,开发者...

    JSF中文教程jsf

    **事件处理** 在JSF中是通过事件监听器实现的。当用户与组件交互时,会触发特定的事件,相应的监听器方法会被调用,从而执行相应的处理逻辑。 **生命周期** 是JSF处理请求的关键过程,包括初始化、恢复视图、应用...

    sun的jsf接口和实现的源文件下载

    你可以在GlassFish的源码库中找到更多关于JSF的实现细节,这将有助于对比和理解Sun官方提供的JSF源码。 总之,JSF 1.2的源代码提供了一个学习和研究JSF内部机制的机会,通过深入研究,开发者可以提高对JSF的理解,...

    jsf页面

    5. **EL(Expression Language)**:JSF使用EL表达式与后台数据交互,EL允许在JSP或Facelets页面中直接访问JavaBean属性。 6. **Facelets**:Facelets是JSF的默认视图表示技术,它取代了早期的JSP,提供了更清晰、...

    JSF1.2+EJB3.0实现的一个项目实例

    项目说明:  本实例是一个用JSF1.2+EJB3.0实现的员工CRUD的一个实例,业务非常简单,主要是为了演示这两种技术的使用。若与商业应用类同,纯属巧合。 &lt;br&gt;2.源码说明: &lt;br&gt; 1)本项目开发环境 操作...

    JSF2 规范的标准参考实现

    在给定的压缩包中,包含的`jsf-api.jar`和`jsf-impl.jar`是JSF 2规范的官方参考实现,由Mojarra项目提供,这是Oracle公司支持的开源实现。 **JSF 2的关键特性** 1. **组件库增强**:JSF 2引入了更丰富的组件库,...

    JSF2.0与Ajax交互实现.pdf

    Ajax是一种使用JavaScript和XML等技术实现页面局部刷新的技术,通过异步方式与服务器通信,而无需重新加载整个页面。这大大提高了用户体验,因为用户可以继续与页面互动而无需等待长时间的页面加载过程。 **3. JSF...

Global site tag (gtag.js) - Google Analytics