`
guoyiqi
  • 浏览: 1010203 次
社区版块
存档分类
最新评论

learning ext js 中文版之在对话框中添加图标和按钮事件

阅读更多

learning ext js 中文版

 

在对话框中添加图标和按钮事件。这只需要在cssconfig里做些修改即可。

首先准备一张milton-head-icon.png的图标图片,与html放在同一目录。

htmlhead里添加style

.milton-icon {

background: url(milton-head-icon.png) no-repeat;

}

然后我们需要在窗口配置里做些更改。图标要用到我们在css里添加的style值:milton-icon。我们还要添加一个函数,当用户点击对话框中的任一按钮时执行。这个函数定义成匿名函数,仅仅用来传递参数,如下:Ext.Msg.show({

title: 'Milton',

msg: 'Have you seen my stapler?',

buttons: {

yes: true,

no: true,

cancel: true

},

icon: 'milton-icon',

fn: function(btn) {

Ext.Msg.alert('You Clicked', btn);

}

});

这个例子中的函数只有一个参数,传递的是被点击的按钮的名称。如果用户点击了Yes按钮,btn参数就传递了yes值。提醒:

对话框中右上角的的关闭按钮和键盘上的esc都是和cancel按钮绑定的,这些类似桌面应用的小功能extjs已经帮我们做好了。

完整原代码:

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

       <style type="text/css">

       .milton-icon {

       background: url(milton-head-icon.png) no-repeat;

       }

      

       </style>

       <title>extjs examples</title>

       <link rel="stylesheet" type="text/css"

           href="extjs/resources/css/ext-all.css" />

       <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>

       <script type="text/javascript" src="extjs/ext-all.js"></script>

       <script type="text/javascript" src="extjs/build/locale/ext-lang-zh_CN.js"></script>

      

<script>

 

Ext.onReady(function(){

Ext.Msg.show({

title: 'Milton',

msg: 'Have you seen my stapler?',

buttons: {

yes: true,

no: true,

cancel: true

},

icon: 'milton-icon',

fn: function(btn) {

Ext.Msg.alert('You Clicked', btn);

}

});

});

 

</script>

    </head>

    <body>

 <!--copyright guoyiqi-->

    </body>

</html>

 

 

 

分享到:
评论

相关推荐

    learning ext js 中文版 之 根据用户操作对话框来给出响应

    你也可以根据需求监听其他事件,如窗口关闭事件,或者在对话框中使用表单时,监听表单的提交事件。 ```javascript dialog.on('close', function() { // 在这里处理对话框被关闭的逻辑,例如清理资源或更新状态 });...

    Learning Ext JS 3.2

    通过阅读《Learning Ext JS 3.2》,读者不仅可以学习到Ext JS 3.2的具体用法,还能理解其设计哲学和开发模式,提升在Web应用开发领域的专业技能。同时,对于那些想要进一步升级到更高版本的开发者,这本书也能提供一...

    Learning_Ext_JS.pdf使用中文文档

    在文档的描述中提到:“Learning_Ext_JS.pdf使用中文文档. 希望能帮助到大家。”这表明该书的目的在于为读者提供一个详尽的学习指南,以帮助他们更好地理解和掌握Ext JS框架。此文档对于那些想要深入学习并应用Ext ...

    Learning Ext JS

    为了帮助开发人员更快地掌握这一框架,有一些书籍和在线资源提供了教程和实例代码,比如《Learning Ext JS 3.2》,该书由Shea Frederick、Colin Ramsay、Steve 'Cutter' Blades和Nigel White联合编写,旨在引导初学...

    Learning Ext JS 4 pdf

    Learning Ext JS 4 by Crysfel Villa and Armando Gonzalez (Oct 8, 2012) $49.99 Paperback Order in the next 13 hours and get it by Tuesday, Mar 19. More Buying Choices - Paperback $46.48 new (17 ...

    Learning Ext JS 4

    在学习Ext JS时,重要的是要了解其组件模型、数据管理、事件处理以及与后端服务的交互方式。 其次,描述部分提到这是一本由外国专家编写的教程,并且是网友分享的PDF格式电子书。这说明了该资源的来源和获取方式。...

    learning ext js 中文版 之 Ext的form功能是无穷的

    NULL 博文链接:https://guoyiqi.iteye.com/blog/322673

    learning ext js

    learning ext js learning ext jslearning ext js learning ext js

    RIA Programming Learning Ext JS

    本书《Learning Ext JS》由Shea Frederick、Colin Ramsay 和 Steve 'Cutter' Blades 共同编写,旨在为读者提供一个系统性的学习指南,帮助开发者掌握使用Ext JS开发RIA(Rich Internet Application)的技术。...

    Learning EXT JS

    Ext JS是一个用于创建交互式用户界面的JavaScript库,它提供了丰富的组件和工具,使得开发者能够轻松地开发出高性能的Web应用。 ### 构建动态用户界面 在现代Web开发中,用户界面的体验对于吸引和保留用户至关重要...

    learning Ext js

    《Learning Ext JS》涵盖了Ext JS的核心概念和技术细节,旨在通过实践案例教会读者如何高效地使用该框架。以下是书中涉及的一些关键知识点: 1. **Ext JS基础**:介绍了Ext JS的历史背景、版本变迁以及为何选择Ext ...

    Packt Learning Ext Js Nov 2008 Ebook-Elohim.pdf

    Ext JS是一种基于JavaScript的库,用于构建交互式和高性能的Web应用程序。它提供了一系列丰富的UI组件,如表格、网格、树、图表等,以及强大的数据管理功能,使得开发者能够快速地创建复杂的用户界面。Ext JS支持...

    Learning TypeScript 中文完整版.pdf

    通过 "Learning TypeScript 中文完整版.pdf" 这本书,读者将全面了解 TypeScript 的各种特性,并学会如何在实际项目中有效地应用它们,提升开发效率和代码质量。无论是初学者还是经验丰富的开发者,都能从中受益匪浅...

    Learning.Ext.JS.3.2

    在《学习Ext.JS 3.2》一书中,作者们(Shea Frederick、Colin Ramsay、Steve 'Cutter' Blades 和 Nigel White)深入探讨了如何利用Ext.JS 3.2版本来构建与传统桌面应用程序相似的用户界面。这包括如何设计和实现复杂...

    Learning ExtJS, Fourth Edition (Ext JS 5+)

    《Learning ExtJS, Fourth Edition (Ext JS 5+)》是关于Ext JS框架的一本经典教程,该书针对Ext JS的5.x版本进行了全面升级。Ext JS是一个成熟的JavaScript框架,用于开发具有丰富交互性的Web应用程序。它最初由Jack...

    Learning Python中文版(Python语言入门)

    《Learning Python中文版》的原作者Mark Lutz和David Ascher都具备丰富的Python编程经验和教学经验,他们在书中融入了大量的实例、练习和答案,使自学成为可能。其中,Mark Lutz是一位资深的软件设计师和Python专家...

    Ext-JS 3.0 Cookbook Packt Publishing PDF

    书中强调了实践操作的重要性,使读者能够在实践中学习并掌握Ext JS的核心概念和技术。 #### 三、适合人群 - **进阶开发人员**:由于本书中的案例较为复杂且深入,因此更适合那些已经熟悉JavaScript基本语法并且对...

    强化学习导论中文版 增强学习导论中文版 Reinforcement learning an introduction 中文版.

    强化学习是人工智能领域的一个重要分支,它通过与环境的交互,让智能体在一系列的决策过程中不断学习,以达到最大化期望的奖励。《强化学习导论》是这方面的经典教材,由Richard S. Sutton和Andrew G. Barto共同撰写...

    An Introduction to Statistical Learning (英文版和中文版)

    An Introduction to Statistical Learning (英文版和中文版),统计学习导论 基于R应用,学习机器学习入门的经典书籍,包括中文版和英文版

Global site tag (gtag.js) - Google Analytics