ExtJS
前端框架ExtJS
黄晶谛
GIS JAVA
展开
-
ExtJS自定义事件
ExtJS自定义事件类为Ext.util.Observable最简单的自定义事件Ext.onReady(function(){ var win = Ext.create('Ext.window.Window',{ title:'简单的自定义事件', width:400, height:300, renderTo:Ext.getBody(), listeners: { show:function(){ // t3:触发自定义事件的时机 wi原创 2021-01-02 12:33:18 · 288 阅读 · 0 评论 -
ExtJS为组件添加事件监听
利用ExtJS为组件添加事件监听有两种方式,一是在组件内部通过listener配置添加事件监听,二是使用组件的引用为组件绑定事件。在组件内部通过listener配置添加事件监听Ext.onReady(function(){ var win = Ext.create('Ext.window.Window', { title:'UI组件事件', width:500, height:400, renderTo:Ext.getBody(), listeners:{原创 2021-01-02 12:24:13 · 1480 阅读 · 0 评论 -
Ext事件机制
最初的事件处理方式在早期,不存在事件的概念,开发者用javascript的两个函数来模拟事件机制(window.setTimeout和window.setInterval),由于很多原因,如效率低下等,发明了最原始的0级dom事件模型,为元素添加一个事件,在事件上绑定一个处理函数。缺点: 这种模型不能为元素的事件添加多个处理函数例如: var inp = document.createElement('input'); inp.id = 'inp1'; inp.type = 'button'.原创 2021-01-02 12:19:33 · 352 阅读 · 0 评论 -
Ext中常用选择器
基础用例:Ext.create('Ext.Panel',{ title:'Ext.DomQuery示例', width:500, height:400, renderTo:Ext.getBody(), html:'<ul id=u1><li>item1</li><li>item2</li></ul><div id=d1><span id=sp>我是Span内容</span&g原创 2021-01-02 11:58:50 · 532 阅读 · 1 评论 -
Ext中获取节点的方法
利用Ext提供的方法获取Ext.dom.Element <div id="d1" align="center" >div1</div> <div id="d2" align="center" >div2</div> <div id="d3" align="center" >div3</div>Ext.get使用缓存机制,提升获取DOM节点的效率/** * 1、先从Ext.cache缓存中查找,如果缓存中找原创 2021-01-02 11:41:47 · 278 阅读 · 1 评论 -
ExtJS中其它常用方法
操作dom系的方法appendTo 将当前元素追加到指定的元素中appendChild 在当前元素中追加元素createChild 在元素中插入由DomHelper对象创建的元素 span.createChild({ tag:'ol', // order list ul : unorder list children:[ {tag:'li', html:'item1'}, {tag:'li', html:'item2'} ] });insertA原创 2021-01-01 00:21:02 · 329 阅读 · 0 评论 -
ExtJS中元素查找方法
基础定义用例 Ext.create('Ext.panel.Panel', { title:'我的面板', width:'100%', height:400, renderTo:Ext.getBody(), html:'<div id="d1"><span id="span">我是span的内容</span><div id="d2">我是d2的内容</div><input id="inp"></in原创 2020-12-31 23:55:29 · 832 阅读 · 1 评论 -
Ext对原生javaScript对象的扩展
Ext.Object相关的方法使用chain 把当前传入对象作为新创建的对象的原型 var obj = { name:'giserDev', age:10 }; var result = Ext.Object.chain(obj); alert(result.name);// giserDev alert(result.age);// 10 alert(result.hasOwnProperty('name'));// falseeach 迭代 var o原创 2020-12-31 23:40:25 · 192 阅读 · 0 评论 -
Ext中为对象扩展属性和方法
在Ext中可以通过Ext.apply()为对象扩展属性和方法。 apply(object, config, defaults) Copies all the properties of config to the specified object. Note that if recursive merging and cloning without referencing the original objects / arrays is needed, use Ext.Object.mer原创 2020-12-31 23:22:21 · 265 阅读 · 0 评论 -
Ext中类的定义
在ExtJS中定义类的方式Ext.define在Ext中定义一个类: Ext.define(className, properties, callback)Ext.define('Person',{ // 添加配置项 config,配置当前类属性,会自动加上get和set方法 config:{ name:'zs', age:25 }, // 自己定义的方法 sayHello:function(){ alert("自定义的方法"); }, // 给当前类添原创 2020-12-31 23:16:40 · 149 阅读 · 0 评论 -
Ext窗体创建
一、通过Ext.window.Window直接创建并显示 Ext.create('Ext.window.Window', { title:"my first window", height:300, width:500, constrain:true, // 不超出浏览器边界 modal:true, // 模态窗口 icon:"../../js/extjs/icons/used/browser_window.png", x:300, y:200, autoScroll:原创 2020-12-15 22:57:20 · 453 阅读 · 0 评论 -
Ext常用提示框
等待框Ext.onReady(function() { // 等待框 Ext.MessageBox.wait( "提示信息", "hello world", { interval: 400, // 定时循环间隔 duration: 2000, // 总时长 increment: 5, // 执行进度条的次数 text: "更新中",// 提示信息 scope: this, fn: function() { alert("Done!");原创 2020-12-15 22:48:38 · 365 阅读 · 0 评论 -
Ext使用基础配置方式
统一引入ExtJS创建一个共用的JSP,如common.jsp,统一引入需要的文件:<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!-- 获取项目根路径 --><% System.out.println("scheme: " + request.getScheme()); // 返回当前页面使用的协议,如http、https、ftp等原创 2020-12-15 22:34:52 · 304 阅读 · 0 评论 -
在Eclipse中关联ExtJS源码
在利用ExtJS开发或学习中,为了快速了解具体方法或属性用法、含义等,需要查看API或关联源码,这里介绍如何在开发环境中关联ExtJS的源码。1、配置全局的ExtJS的源码库在Eclipse-Window-Preferences-JavaScript-Include Path-User Libraries下,New 新建一个全局的ExtJS的源码库。2、具体项目中引入配置的全局ExtJS库右击项目-Properties-JavaScript-Include Path-Libraries-Add J原创 2020-11-22 21:22:03 · 122 阅读 · 0 评论 -
Web项目中获取项目根路径的方式
在实际开发中会将通用的js引入到一个统一的文件中,便于管理。引入时需要用到项目根路径,有三种引入方式:1)利用相对路径引入<script type="text/javascript" charset="utf-8" src="/js/extjs/ext-all-debug.js"></script>2) 利用绝对路径引入<script type="text/javascript" charset="utf-8" src="${basePath}/js/extjs/ex原创 2020-11-01 13:40:40 · 1068 阅读 · 1 评论 -
Eclipse中集成ExtJS
1、解压spket-1.6.23.zip将其中的文件复制到eclipse文件目录下即可,重启eclipse,会在Window-Preferences下看到Spket,则说明插件集成成功。2、解压extjs-4.1.1.rar放到自己的开发目录中(必须!!!),如我的D:\DevResources\extjs-4.1.1,3、设置ExtJS打开Window-Preferences下的Spket-JavaScript Profile,里面并没有Ext,点击New,添加Ext;点击Ext,选择右原创 2020-10-25 18:49:32 · 324 阅读 · 0 评论