首页 / JAVASCRIPT / 学习YUI.Ext基础第一天_YUI.Ext相关

学习YUI.Ext基础第一天_YUI.Ext相关

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了学习YUI.Ext基础第一天_YUI.Ext相关，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4935字，纯文字阅读大概需要8分钟。

内容图文

导言

翻了翻以前的旧贴子，有值得回味的地方共分享：

Post1:

.................
我们现在的大量应用依赖于浏览器（主要是 IE）的脚本处理能力，在有些老机器上跑的时候确实会略显缓慢，但是目前的主流机型处理起来已经没有任何问题了。我们设计了一整套的 Web 开发框架，这套框架将随着应用的锤炼而越来越稳定。JavaScript 用的不好容易造成 IE 的崩溃，我们是靠提高代码的重用度来解决这个问题的，因为重用度越高的代码往往越稳定。有些眼高手低的人往往凭第一眼印象就把 JavaScript 从整体解决方案中完全忽略，但是我们发现 JavaScript 作为解决方案的表示层是非常有价值的，而且通过几层 DOM 树的映射来解决表示层-逻辑层分离比起使用 MVC 要灵活得多。我们的基本思想就是浏览器-服务器间传输的应该只是数据，如何显示（呈现）由浏览器自己决定。我们的中间件很好地体现了这个思想。MVC 的学习成本也是一个重要的考虑因素。我可以毫不脸红地说我不懂 MVC，但是我们确实解决了客户需要我们解决的问题。
.................

Post2:

.................

通过我们这里一年多来对于 XMLHTTP、JavaScirpt、RIA 等技术和架构的讨论，其实我们最终也可以得到完全相同的结论的。AJAX 的可行性是不容置疑的，已经被我们这里一些勇于实践的开发人员的经验（我的经验，还有很多使用 JS+XMLHTTP+XSLT 的人的经验，给自己的脸上贴点金，呵呵），以及最近的 Google Map 等伟大的应用（体验一下 Google Map 的速度，你就知道我为什么说伟大了）所证实，还证实了基于 Web 标准进行创新是一条光明的大路。我的同事 ly 在三年前就采用了这种开发模式，并且把它的好处介绍给我，我后来又在这里一再宣传使用 JS+XMLHTTP 做开发的好处。因此我对于现在出现的 AJAX 一点也不感到奇怪，只是对于这种开发模式到现在才开始流行感觉有些遗憾。以前国内大部分的开发者只知道一味地迷信 J2EE，迷信 .Net，把自己限制在犬儒式的对大厂的盲从上，而不愿意自己去创新。现在出现的 AJAX 对于国内的开发者是一个启示，也是一个教训。共产主义是等不来的，无论是 M$、IBM 还是 Sun 都不会把共产主义的幸福生活拱手相送。并不是技术本身不行（例如在一些人看来似乎已经完全过时了的技术 HTML/CSS/JavaScript），其实还是人不行，再好的技术给你也做不出好东西来。相对来说我更加看好这方面，而不是私有的解决方案如 XAML 或者 Flash 。这些技术的组合现在既然已经有了一个新的名字 AJAX，以后我们就把这些技术叫做 AJAX 好了。

.................

---这是dlee达人在2004在JAVAEYE的贴子片断，其当时的意义到今天可以说已经被证明可行的了---特此为文本借作导言。

下文作者是Brian Moeskau，翻译:Frank 原文出处在这里

教程：Ext简介
无论你是Ext库的新手，抑或是想了解Ext的人，本篇文章的内容都适合你。本文将简单地简单介绍Ext的几个基本概念，和如何快速地做出一个动态的页面并运行起来，假设读者已具备了一些JavaScript经验和初级了解HTML Dom。否则的话，请从阅读初学JavaScript资源开始。

下载Ext
或许你未曾下载过，那应从这里下载最新版本的Ext http://extjs.com/downloads。

针对你的下载需求，有几个不同的弹性选项。通常地，最稳定的版本，是较多人的选择。下载解包后，那个example文件夹便是一个探险的好地方！

开始！
我们将使用Ext，来完成一些常见的JavaScript的场合。

Zip文件包括三个文件：ExtStart.html, ExtStart.js和ExtStart.css。解包这三个文件到Ext的安装目录中（例如，Ext是在“C:\code\Ext\v1.0”中，那应该在"v1.0"里面新建目录“tutorial”。双击ExtStart.htm，接着你的浏览器打开启动页面，应该会有一条消息告诉你配置已完毕。如果是一个Javascript错误，请按照页面上的指引操作。

在你常用的IDE中或文本编辑器中，打开ExtStart.js看看：

Ext.onReady可能是你接触的第一个方法。这个方法是指当前DOM加载完毕后，保证页面内的所有元素能被Script引用（reference）。你可删除alert()那行，加入一些实际用途的代码试试：

代码如下:

Ext.onReady(function() {  
    alert("Congratulations!  You have Ext configured correctly!");  
}); 

Element：Ext的核心
大多数的JavaScript操作都需要获取页面上的某个元素（reference）,好让你来做有趣的事情。传统的JavaScript方法，是通过ID获取Dom节点的：

var myDiv = document.getElementById('myDiv');这毫无问题，不过这样单单返回一个对象（DOM节点），用起来并不是太强大和好用。为了要用那节点干点事情，你将会要写不少自定义的代码；另外，对于不同类型浏览器之间的差异，要你处理起来可真头大了。

进入Ext.element对象。元素（element）的的确确是Ext的心脏地带，--无论是访问元素（elements）还是完成一些动作，都要涉及它。Element的API是整个Ext库的基础，如果你时间不多，只想了解Ext中的一个类的话，Element一定是首选！

由ID获取一个Ext Element如下（首页ExtStart.htm包含一个div，ID名字为“myDIv”，然后，在ExtStart.js中加入下列语句）：

Ext.onReady(function() {var myDiv = Ext.get('myDiv');});再回头看看Element对象，发现什么有趣的东东呢？

Element包含了常见的DOM方法和属性，提供一个快捷的、统一的、跨浏览器的接口（若使用Element.dom的话，就可以直接访问底层DOM的节点。）；
Element.get()方法内置缓存处理（Cache)，多次访问同一对象效率上有极大优势；
内置常用的DOM节点的动作，并且是跨浏览器的定位的位置、大小、动画、拖放等等（add/remove CSS classes, add/remove event handlers, positioning, sizing, animation, drag/drop）。
这意味着你可用最小的代码来做各种各样的事情，这里仅仅是一个简单的例子（完整的列表在elementAPI中）。

继续在ExtStart.js中，在刚才我们获取好myDiv的位置中加入：

代码如下:

myDiv.highlight();      //黄色高亮显示然后渐退  
myDiv.addClass('red');  // 添加自定义CSS类 (在ExtStart.css定义)  
myDiv.center();         //在视图中将元素居中  
myDiv.setOpacity(.25);  // 使元素半透明 

内容总结

以上是互联网集市为您收集整理的学习YUI.Ext基础第一天_YUI.Ext相关全部内容，希望文章能够帮你解决学习YUI.Ext基础第一天_YUI.Ext相关所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/306418.html

来源：【匿名】

【上一篇】HTML在线编辑器的基本概念与相关资料第1/2页_javascript技巧【下一篇】javascript 怎么调用php方法

更多 ►

【学习YUI.Ext基础第一天_YUI.Ext相关】教程文章相关的互联网学习教程文章

javascript --学习基础总结【代码】

闭包　　下面是百度百科的解释:　　　　闭包是指可以包含自由（未绑定到特定对象）变量的代码块；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）。　　也就是说一个代码块中使用了自由变量var d=10;function df(){console.log(d);//这个时候d就是自由变量了 } 　　那下面来看一个简单的闭包的例子:let t1=(function d(){var dd=1;returnfunction(){return dd++;}; })();//立即执...

javaScript基础【代码】

目录javascript :引入方式:javaScript 语言基础：-- javaScript 中的所有事物都是对象数据类型:运算符流程控制函数函数作用域:词法分析:自定义对象:date对象JSON对象REGExp 对象（re正则）math对象javascript :--脚本语言，插入 HTML 页面后，可由所有的现代浏览器执行。引入方式:#引入方式： 1.script标签内部直接书写 <script> alert(123) </script> zgu 2.通过script标签src书写引入外部js文件 <script src="js.js"></scrip...

JavaScript基础篇最全【代码】【图】

本章内容：简介定义注释引入文件变量运算符算术运算符比较运算符逻辑运算符数据类型数字字符串布尔类型数组Math语句条件语句（if、switch）循环语句（for、for in、while、do-while）label语句异常处理函数定义函数3种方式函数参数（arguments）作用域与作用链闭包面向对象（特性，构造模式，原型模式prototype）prototype 验证方法（isPrototypeOf、hasOwnProperty、in）其它序列化转义eval正则表达式时间处理简介定义　　javasc...

JavaScript之基础-10 JavaScript 正则表达式(概述、定义正则、RegExp对象、用于模式匹配的String方法)【图】

一、JavaScript 正则表达式概述正则表达式概述 - 正则表达式(Regular Expression): 由一些普通字符和特殊字符组成的，用以描述一种特定的字符规则的表达式 - 正则表达式常用于在一段文本中搜索、匹配或替换特定形式的文本。如:词语出现频率统计、验证字符串是否符合邮件格式、屏蔽一篇帖子中的限制性词语等650) this.width=650;" src="/upload/getfiles/default/2022/11/11/20221111052258654.jpg" title="web.png" />正则表达式...

网易前端微专业，JavaScript程序设计基础篇:数组【代码】

任何一种语言数组都是比较重要的，其作为一种基础对象应用很多，如Java你肯定少不了集合（List，Map)这些。因此本篇主要记录JS的数组使用和常用方法。要点如下：1，数组创建两种方式：var stu = new Array();var stu1 = [];这就和定义对象一样：var cat = new Object(); var cat1 = {};推荐用后者，比较简洁。如：var score = [1, 2, 3];数组里的东西可以是不同类型的，数组里面可以是基础类型也可以是对象或数组：var array = [16...

javascript基础（Array）【代码】

1，join()Array.join()，不改变原数组，将数组中所有元素转换为字符串并连接在一起，返回最后生成的字符串let a=[1,2,3]; a.join(); // =>"1,2,3" a.join(" "); // =>"1 2 3" a.join("-"); // =>"1-2-3" let b=new Array(5); b.join("-"); // => "----" 4个连字号 2，reverse()Array.reverse()，改变原数组，将数组中的元素颠倒顺序，返回逆序后的数组let a=[1,2,3]; a.reverse(); // =>[3,2,1]3，sort()Array.sort()，改变原...

Leetcode刷题预备基础知识（JavaScript版）【图】

参考：https://www.bilibili.com/video/BV14f4y1C7hg 宝藏up主！1.时间复杂度O(1)O(n)复杂度看最高的O(n2) 如果只是两个并列的for循环，时间复杂度还是O（n），100个并列的for循环，也是O(n)这里有继承，两个循环分摊一个任务O(logn)二分搜索O(nlogn)排序优化的方法:从低-级的复杂度寻找灵感O(n)->O(logn)使用二分搜索O(nlogn) -> O(n)遇到需要排序的题，想想能否通过数组,set, map,heap解O(n2)-> O(nlogn)遇到嵌套循环，想想能不能...

JavaScript语言基础14【图】

JavaScript循环语句------------------while循环语句。while在循环条件为true时，一直保持循环状态，直到循环条件为false时退出循环。模板如下：<HTML> <HEAD><TITLE>Hello World</TITLE> </HEAD> <BODY BGCOLOR="WHITE"> <SCRIPT Language="JavaScript" TYPE="text/javascript">var value=10;while(value>1){document.write(value+"<br>");value--;} </SCRIPT> </BODY> </HTML> while循环语句包含一个循环条件和循环体，上述当va...

JavascriptDom的基础知识回顾【代码】

1. 节点及其类型: 1). 元素节点2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 3). 文本节点: 是元素节点的子节点, 其内容为文本. 2. 在 html 文档的什么位置编写 js 代码? 0). 直接在 html 页面中书写代码. <button id="button" onclick="alert(‘hello world‘);">Click Me!</button> 　　缺点: ①. js 和 html 强耦合, 不利用代码的维护 ②. 若 click 相应函数是比较复杂的, 则需要先定义一个函数, 然...

【JavaScript基础笔记】Ajax，同源策略【图】

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。GET 还是 POST？与 POST 相比，GET...

JavaScript基础【代码】【图】

1、JavaScript是个脚本语言，需要有宿主文件，它的宿主文件是HTML文件。2、用法：在HTML中位置有三块：（1）head里面（2）body里面（3）</html>之后为了保险起见，一般写在</html>之后。　　<script language="javascript">代码必须放在这里面</script>3、三个常用对话框 alert("")警告对话框，作用是弹出一个警告对话框。 confirm("")确定对话框，作用是弹出一个可供选择的确定对话框，点击确定之后，它返...

【JavaScript基础】------有待完善

最近开始学习JavaScript，整理了一些相关的基础知识，日后继续完善~~~ JS注释方式：// 单行注释（Ctrl+/ ）/* 段落注释(Ctrl+shift+/ )*/JavaScript基础JavaScript：基于浏览器、基于（面向）对象、事件驱动、脚本语言JavaScript的作用：表单验证,减轻服务的压力，添加页面动画效果，动态更改页面内容，Ajax网络请求（Ajax：可以实现页面局部刷新）JavaScript组成部分；ECMAScript（5.1/6）、DOM、BOMECMAScript脚本程序语言：语法...

JavaScript 基础一

内部： <Script Language="JavaScript" type="text/javascript"> JavaScript代码 </Script>外部引用： <Script Language="JavaScript" src="文件名.js"> JavaScript代码 </Script> 编写规则：JavaScript区分大小写JavaScript脚本程序必须嵌入在HTML文件中JavaScript脚本程序中不能包含HTML标记代码（但是，包含在双引号中就可以用了）四种基本的数据类型：数值（整数和实数）字符串型（用“”号或‘’括起来的字符或数值）布尔...

11-23网页基础--JavaScript基础知识【图】

第一课 JavaScript简介一、定义：JavaScript是脚本语言，需要宿主文件，它的宿主文件是html文件。 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。二、用法：在html中的位置有三块：1）head里面；2）body里面；3）</html>之后，为了保险起见一般写在</html>之后。<script language="javascript">代...

JavaScript基础三【代码】

一、BOM1、windows对象所有浏览器都支持 window 对象。它表示浏览器窗口。一些常用的Window方法：window.innerHeight - 浏览器窗口的内部高度window.innerWidth - 浏览器窗口的内部宽度window.open() - 打开新窗口window.close() - 关闭当前窗口 2.windows子对象navigator对象//web浏览器全程navigator.appCodeName; "Mozilla"// Web浏览器厂商和版本的详细字符串navigator.appVersion; "5.0 (Windows NT 10.0; Win64; x64) AppleW...

首页 / JAVASCRIPT / 学习YUI.Ext基础第一天_YUI.Ext相关

学习YUI.Ext基础第一天_YUI.Ext相关

内容导读

内容图文

内容总结

内容备注

内容手机端

【学习YUI.Ext基础第一天_YUI.Ext相关】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程