ExtJS实例1

1.创建一个Extjs的Window,用ajax请求HTML文件,并执行HTML的代码和脚本

窗体中文字是从一个HTML中获取,并且HTML中执行脚本使窗体高亮1秒

主页面:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../../extjslib/resources/css/ext-all.css" >    extjs样式
        <script type="text/javascript" src="../../extjslib/adapter/ext/ext-base-debug.js"></script> extjs基础库
        <script type="text/javascript" src="../../extjslib/ext-all-debug-w-comments.js"></script> extjs组件库
        <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = "../../extjslib/resources/images/default/s.gif"; //占位图片,应在应用代码执行前指定
        </script>
        <script type="text/javascript" src="autoload.js"></script>
    </head>
</html>

这个里注意js加载顺序,要是基础要先加载,别写反了,造成js报错,对于想一窥究竟的人,每个js库都有对应的debug脚步

autoload.js

function buildWindow(){
    var win = new Ext.Window({//创建一个窗口实例
        id:‘myWindow‘,//实例id,通过Ext.getCmp方法可以查询
        title:‘Window Demo AutoLoad‘,
        width:300,
        height:150,
        layout:‘fit‘,//布局为使窗体内容填满窗口
        autoLoad:{//自动加载
            url:‘sayHi.html‘,//加载页面url,这里只会显示html片段
            scripts:true//执行加载页面脚本,但是执行块和行级脚本
        }
    });
    win.show();//显示窗口
}
Ext.onReady(buildWindow);//onReady方法是在DOM就绪后加载图片之前执行

sayHi.html

<div>Hello from the <b> world</b> of Ajax</div>
<script type="text/javascript">
    function highlightWindow(){
        var win = Ext.getCmp(‘myWindow‘);//获取窗口实例
        var winBody = win.body;//
        winBody.highlight();
    }

    highlightWindow.defer(1000);//1秒以后执行
</script>

这里的亮点在于defer,它比setTimeout方便原因在于

1.更简单,任何一个function都可以这样做,只要传一个时间

2.可以对被延迟执行的方法和执行的作用域进行控制,并传入制定参数(原话,还不太理解)

时间: 11-29

ExtJS实例1的相关文章

struts2 结合extjs实现的一个登录实例

一.先搭建好struts2,能够通过myeclipse高速搭建. 二.再导入extjs所需的库文件. 三.写一个实体类User package com.ext.model; public class User { private Integer id; private String username; private String password; public Integer getId() { return id; } public void setId(Integer id) { thi

ExtJS:文件上传实例

var ext_dateFormat = 'Y-m-d H:i:s'; var dateFormat = 'yyyy-MM-dd HH:mm:ss'; var date = new Date(); Ext.onReady(function() { var fifp =Ext.create('Ext.form.Panel', { renderTo: 'fi-form', width: 500, frame: true, title: '文件上传', bodyPadding: '10 10 0',

ExtJS:Grid数据导出至excel实例

导出函数ExportExcel() var config={ store: alldataStore, title: '测试标题' }; var tab=tabPanel.getActiveTab();//当前活动状态的Panel ExportExcel(tab,config);//调用导出函数 ExportGridToExcel.js var Base64 = { // private property _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghi

ExtJs在页面上window再调用Window的事件处理

今天在开发Ext的过程中遇到了一个恶心的问题,就是在ext.window页面,点击再次弹出window时,gridpanel中的store数据加载异常,不能正常被加载,会出现缓存,出现该问题,是因为window窗口弹出时,两个window同时存在,并且在两个window交替使用时,需要先将一个窗口关闭,关闭时,会对window的缓存进行清理,这样就能保证store数据的正确加载.分享给大家,供参考. var actInfoWindow2; function showCallFlowInfoWin

JQuery 学习总结及实例 !! (转载)

出自 new:http://www.jianshu.com/users/1967b163cb61/latest_articles 1.JQuery简介 普通JavaScript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦.因此出现了很多对JavaScript的封装库,比如Prototype.Dojo.ExtJS.JQuery等,这些库对JavaScript进行了封装,简化了开发.这些库是对JavaScript的封装,也就是咱们调用JQuery的一句函数,JQ

ExtJs之Ext.data.Store

ExtJs之Ext.data.Store Posted on 2009-07-21 09:09 linFen 阅读(44912) 评论(5) 编辑 收藏 Store.getCount()返回的是store中的所有数据记录,然后使用for循环遍历整个store,从而得到每条记录. 除了使用getCount()的方法外,还可以使用each()函数,如下面的代码所示. store.each(function(record) { alert(record.get('name')); }); Each()

ExtJS的面向对象编程(继承、重写)

<link rel="stylesheet" type="text/css" href="<%=basePath %>/ext-3.4/resources/css/ext-all.css"> <script type="text/javascript" src="<%=basePath%>/ext-3.4/adapter/ext/ext-base.js">&l

ExtJS笔记 Tree

The Tree Panel Component is one of the most versatile Components in Ext JS and is an excellent tool for displaying heirarchical data in an application. Tree Panel extends from the same class as Grid Panel, so all of the benefits of Grid Panels - feat

ExtJS 4 Grids 详解

Grid Panel是ExtJS最常用的组件之一,它的功能非常丰富,提供了非常便捷的方法执行排序,分组,编辑数据. Basic Grid Panel 基本表格面板 让我们创建一个简单的表格,这有创建和运行表格的全部知识. Model and Store 模型和存储器 Grid Panel展现Store中的数据,Store可以被认为是records的集合,或者模型(Model)实例的集合.更多关于Store和Model的内容请查看<ExtJS 4 数据(包)详解>,讲这些是为了明确一下概念,Gr