`
liuye066
  • 浏览: 266383 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

Ext3.0学习笔记messageBox和grid

    博客分类:
  • ext
阅读更多

html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">
  Ext.onReady(function(){
    var myDiv = Ext.get("myDiv");
 //高亮显示,然后渐退
 //myDiv.highlight();
 myDiv.addClass("red");
 //使层居中(上下左右都居中)
 //myDiv.center();
 myDiv.setOpacity(.25);
 //Ext.select('p').highlight();
 
 Ext.get("myButton").on("click",function(){
   alert("You click the button!");
 });
 
 /*
 //使用匿名函数
 Ext.select("p").on("click",function(){
    alert("You click the p");
 });
 //使用有名字的函数,有利于代码重用。
 var paragraphclicked = function(){
   alert("You click the paragraph");
 }
 Ext.select("p").on("click",paragraphclicked);*/
 
 //得到事件响应所在的DOM节点
 var paraClicked = function(e){
   //Ext.get(e.target).highlight();
   var paragraph = Ext.get(e.target);
   paragraph.highlight();
   Ext.Msg.show({
     title:'paragraph clicked',
  msg:paragraph.dom.innerHTML,
  width:400,
  //buttons设置:Ext.Msg.OK,Ext.Msg.OKCANCEL,Ext.Msg.CAMCEL,Ext.Msg.YESNO,Ext.Msg.YESNOCANCEL
  buttons:Ext.Msg.OK,
  //对话框弹出和关闭时的动画效果。
  animEl:paragraph,
  //关闭对话框后执行的函数
  fn:okalert,
  //icon:弹出框内容前面的图标,取值为Ext.MessageBox.INFO,Ext.MessageBox.ERROR,Ext.MessageBox.WARNING,Ext.MessageBox.QUESTION
  icon:Ext.MessageBox.INFO,
  multiline:true
   });
 }
 Ext.select("p").on("click",paraClicked);
  });
  function okalert(){
   alert("关闭对话框后显示!");
  }
 
  Ext.onReady(function(){
    var myData = [
   ['Apple',29.89,0.24,0.81,'9/1 12:00am'],
   ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
   ['Google',71.72,0.02,0.03,'10/1 12:00am'],
   ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
   ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
 ];
 var ds = new Ext.data.Store({
   proxy:new Ext.data.MemoryProxy(myData),
   reader:new Ext.data.ArrayReader({id:0},[
     {name:'company'},
  {name:'price',type:'float'},
  {name:'change',type:'float'},
  {name: 'pctChange', type: 'float'}, 
  {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
   ])
 });
 ds.load();
 var colModel= new Ext.grid.ColumnModel([
   {header:"company",width:120,sortable:true,dataIndex:"company"},
   {header: "Price", width: 90, sortable: true, dataIndex: 'price'},
   {header: "Change", width: 90, sortable: true, dataIndex: 'change'}, 
   {header:  "%  Change",  width:  90,  sortable:  true,  dataIndex: 'pctChange'}, 
      {header: "Last Updated", width: 120, sortable: true, renderer:  Ext.util.Format.dateRenderer('m/d/Y'),  dataIndex: 'lastChange'}
 ]);

 /*
 //grid没有这个构造方法
 var grid1 = new Ext.grid.Grid('grid-example', {ds: ds, cm: colModel});
 grid1.render();
 grid1.getSelectionModel().selectFirstRow();*/
 var grid = new Ext.grid.GridPanel({
  //当grid初始显示在el:Ext.getBody()时,renderTo无效;当el设为某个控件时,renderTo正常;当el不设置时,renderTo显示出来的内容应用了myDiv的样式。
  //el:Ext.getBody(),
  el:'gridDiv',
  //renderTo:指出grid构造出来之后要在哪里呈现,
  //renderTo: "myDiv",
  width:514,
  height:160,
     ds: ds,
  //间隔行
  stripeRows: true,
  title: 'Array Grid',
     cm: colModel
    });
   grid.render();

  });
</script>
<style type="text/css">
<!--
  .red{
  color:#FF0000;
  }
  #myDiv{
  width:500px;
  }
  #gridDiv{
  position:relative;
  left:100px;
  }
-->
</style>
</head>

<body>
<div id="myDiv">sdfsdf
</div>
<p>aaaaaaaaaaaaaaaaa</p>

<p>bbbbbbbbbbbbbbbbbb</p>
<input type="button" id="myButton" value="Click Me" />
<div id="gridDiv">&nbsp;</div>
</body>
</html>

效果:

见附件。效果图

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

相关推荐

    Ext3.0 api帮助文档

    Ext3.0 API是Ext JS库的一个重要版本,它提供了丰富的JavaScript组件和接口,用于构建交互式的Web应用程序。这个API帮助文档包含了详细的功能说明、示例代码和类库结构,帮助开发者更好地理解和利用Ext3.0的功能。 ...

    Ext_MessageBox

    下面将详细介绍`Ext.MessageBox`的各种功能和用法。 ### 一、`Ext.MessageBox.alert`— 显示警告信息 `Ext.MessageBox.alert`函数用于显示一个简单的警告对话框,通常用于向用户传递一条信息或通知。 **示例代码...

    Ext--MessageBox教程

    EXT JS是一个强大的JavaScript库,专为构建富客户端Web应用程序设计,而`MessageBox`则是EXT JS提供的一种轻量级的提示对话框,它提供了多种类型的提示,如信息、警告、确认和错误,以增强用户界面的交互性。...

    ext 学习笔记 ext 学习笔记

    根据提供的文件信息,我们可以归纳出一系列关于EXT框架的学习知识点,主要围绕EXT框架的基本概念、安装与使用、核心组件以及高级特性展开。 ### EXT框架简介 #### 1. 下载Ext EXT是一个开源的JavaScript框架,它...

    Ext 添加功能form表单实例

    根据给定的信息,本文将详细解释“Ext 添加功能form表单实例”的知识点,这主要针对Ext初学者。...对于初学者来说,这是一个很好的学习资源,可以帮助他们快速掌握如何使用Ext构建复杂的Web应用程序。

    Ext messageBox hide 小应用

    为了进一步学习`Ext.messageBox`和`hide`方法,解压这个文件并查阅其中的文档或者示例代码会非常有帮助。 总的来说,`Ext.messageBox`的`hide`功能是Ext JS开发中一个实用的组件,用于管理用户界面中的提示信息。...

    ext js学习文档

    ### Ext JS 学习文档详解 #### 极致体验与技术背景 Ext JS,作为一套卓越的 AJAX 控件集合,自问世以来便以其强大的功能、优雅的界面设计赢得了广泛赞誉。它不仅提供了一系列丰富的 UI 组件,还拥有高度可定制性,...

    extjs3.0 API 中英

    CHM是Microsoft的 Compiled HTML Help 格式,是一种常见的帮助文档格式,包含索引、目录和内容,方便用户快速查找和学习ExtJS 3.0的相关知识。 总之,无论你是初学者还是经验丰富的开发者,拥有这两份API文档都将极...

    Extjs Ext.MessageBox.confirm 确认对话框详解

    Ext.MessageBox.confirm&#40;&#41;详解 显示一个确认对话框,用来代替JavaScript标准的confirm&#40;&#41;方法,具有两个按钮“是”和“否”如果为其提供一个回调函数,则该函数将在单击按钮后被调用(包括右上角的...

    ext 教材 ext js 教程

    EXT JS 是一种流行的JavaScript库,专门用于构建富客户端Web应用程序。它提供了丰富的用户界面组件和...通过深入学习和实践 EXT JS 教程,开发者可以更加熟练地利用这些功能来提升他们的Web应用程序的质量和用户体验。

    EXT组件一些属性与方法(MessageBox)[文].pdf

    EXT组件在软件开发中扮演着重要的角色,尤其是其 MessageBox 工具类,它提供了一种简单易用的方式来创建用户交互的对话框。MessageBox 继承自 Object 对象,并且有一个别名 Ext.Msg,使得调用更为简洁。接下来,我们...

    Extjs学习笔记

    ExtJS 学习笔记 ExtJS 是一个功能强大且流行的 JavaScript 库,用于构建富互联网应用程序(RIA)。本文将通过一个简单的示例,介绍如何使用 ExtJS 构建一个 Hello World 网页,并且详细讲解 Ext.MessageBox 的使用...

    ext学习文档

    - 示例中的`MessageBox`和`Grid`都是常用的Widget。 - **使用Ajax**: - EXT提供了强大的Ajax支持,可以轻松实现异步数据请求。 - 支持多种服务器端技术,如PHP、ASP.NET和ColdFusion。 #### 4. EXT源码概述 - ...

    MessageBox MessageBox MessageBox MessageBox

    `MessageBox`函数是Windows API中用于创建、显示和操作消息框的一个重要组件。消息框主要用于向用户显示警告信息、询问问题或提供简单的交互。在Windows应用程序开发中,它经常被用作用户界面的一个组成部分,特别是...

    ext学习资料,ext js开发前台页面

    在EXT JS中,`Ext.MessageBox` 是一个非常重要的组件,它提供了多种对话框功能,包括警告、确认和提示信息,以及带有输入框的提示,便于与用户进行交互。 1. `Ext.MessageBox.alert()` `Ext.MessageBox.alert()` ...

    EXT中文手册 Grid Form

    ### EXT中文手册 Grid Form #### EXT简介 EXT是一款强大的JavaScript框架,主要用于开发Web应用程序的前端界面。它提供了丰富的用户界面组件、数据管理功能以及与服务器端进行交互的能力。本手册旨在帮助开发者...

    Ext入门学习实例教程其中包含实例

    为了展示进度条的使用,我们需要了解 `Ext.MessageBox.show()` 和其他两个方法:`Ext.MessageBox.hide()` 和 `Ext.MessageBox.updateProgress(value, "ProgressText", "msg")`。 - **Ext.MessageBox.hide()**:用于...

    Extjs学习笔记之一 初识Extjs之MessageBox

    `Ext.MessageBox`是ExtJS提供的一个功能丰富的对话框组件,它提供了类似于`alert`、`confirm`和`prompt`的JavaScript原生函数,但拥有更丰富的定制选项。例如,`Ext.Msg.alert`用于显示警告对话框,`Ext.Msg.confirm...

    Ext.MessageBox工具类简介

    注意:1 ,Ext.MessageBox是一个工具类,继承自object对象 2 ,实质上它只是当前页面的一个层。 案例如下: 代码如下: Ext.onReady(function(){ Ext.MessageBox.alert&#40;“提示”,”请单击我,确定”,callBack&#41;;...

    非常有用的EXT学习总结

    在EXT的学习中,我们经常会接触到`Ext.MessageBox`,这是一个非常实用的类,它提供了多种弹出对话框的功能,类似于传统的JavaScript警告、确认和提示对话框,但具有更丰富的定制性和用户体验。 1. `Ext.MessageBox....

Global site tag (gtag.js) - Google Analytics