Tutorial:Playing With Ext The Easy Way (Chinese)
From Learn About the Ext JavaScript Library
<!-- start content -->
<script type="text/javascript"> if (window.showTocToggle) { var tocShowText = "show"; var tocHideText = "hide"; showTocToggle(); } </script>
蹒跚学步
第一步 - 入门
想必您已经听说过 Ext、浏览了在线演示,并且尝试阅读API文档。不过,面对复杂的API文档,您却不知如何下手?!
第二步 - 起步
通览过API文档,并且找到了所要立刻尝试的功能,面对混杂的网页源代码,如何开始一个简单的测试页面?那么……
不论您的目标是什么,您都可以依照本文快速的开始使用Ext。不,不用搭建服务器,您所需要的仅仅是Firefox浏览器和Firebug调试插件。如果还没有安装,那么现在就是一个好机会。
牛刀小试
- 打开Ext API文档,您已经上路!
- 单击 F12 打开 Firebug 控制台。
- 如果您的 firebug 控制台处于单行模式(以 '>>>' 开头),那么请单击右下角的红色上箭头以开启多行编辑模式。
- 输入以下代码,并敲击 Ctrl-Enter 来运行:
Ext.get(document.body).update('<div id="test"></div>');
上边这行代码的作用是将当前DOM body元素用一个ID为test的div元素替换。刚才那些API文档已经被删除,但 Ext 代码依旧生效,并且随时为您效劳。
现在,我们假设您希望简单的添加一个面板元素(Panel),但对Ext.Panel的API冗繁的说明无能为力。那么试着将这些代码添加到 firebug 的控制台中:
Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
renderTo: 'test',
width: '200px',
title: 'My Title',
html: 'My HTML content'
});
再次敲击 Ctrl-Enter 。嗨!您的面板元素已经诞生。
很好,不过如果修改一些选项呢?用下边的代码替换刚才的那些代码:
Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
renderTo: 'test',
width: '200px',
title: 'My Title',
html: 'My HTML content',
collapsible: true
});
敲击 Ctrl-Enter 。怎么样,一个可以伸缩的面板就配置好了。(注意面板右上角的小图标)
每次敲击 Ctrl-Enter ,第一行代码都会移除现有的内容,这样您就可以有一个干净的调试环境。这是一个简单的小技巧,十分方便您尝试各种配置选项。
您可以为update()函数添加所需要的 HTML 代码,无论多少。然后编写或多或少的 Javascript 来探索 Ext API。
还等什么?现在就去亲自实践 Ext Api 吧。
<!-- Pre-expand include size: 1285 bytes
Post-expand include size: 2423 bytes
Template argument size: 1537 bytes
Maximum: 2097152 bytes
-->
分享到:
相关推荐
9. **兼容性**:EXT 2.0兼容主流的浏览器,包括IE6+、Firefox、Chrome、Safari等,确保了广泛的用户覆盖。 10. **国际化**:EXT支持多语言,方便开发面向全球用户的Web应用。 EXT 2.0的压缩包文件可能包含以下内容...
在JavaScript的世界里,ExtJS是一个广泛应用的前端框架,它提供了丰富的组件和强大的数据管理功能。...通过调试和日志记录,定位出问题的具体位置,然后针对性地修改代码,以适应Firefox或其他浏览器的行为。
- **Mozilla Firefox** 4+ 版本,并建议安装 Firebug 插件以便于调试。 ##### 2. 服务器 Web Servers 对于服务器的选择,只要能够提供基本的 HTTP 服务即可。常见的服务器软件包括 Apache、Nginx 或 IIS 等。 ####...
在开发过程中,如果遇到 Firefox 中字体过小的问题,可以通过修改 CSS 来调整字体大小。例如,引入一个定制的 CSS 文件并应用到 JSP 页面中。此外,可以使用 `fn()` 函数来检查 EXT 是否已成功加载,如果已加载,`...
- **跨浏览器兼容性**:ExtJS 被设计为能够在多种现代浏览器中稳定运行,包括但不限于 Chrome、Firefox 和 Safari。 - **易于集成**:可以轻松地与其他前端技术和后端系统进行集成。 - **社区支持**:拥有活跃的...
为了调试应用程序,推荐使用一些特别的浏览器,例如Chrome、Safari和Firefox。在开发过程中,我们推荐使用最新版本的浏览器,以确保最佳的兼容性和最新的技术特性。 接着,服务器配置是Web开发的基础之一。ExtJS4...
### EXT培训教程知识点详解 #### 一、EXT简介 **ExtJS** 是一款高级的...通过以上步骤,您可以成功地搭建起基于Eclipse和Spket的ExtJS开发环境以及基于IE和Firefox的调试环境,为后续的学习和开发打下坚实的基础。
1. **浏览器开发者工具**:如Chrome DevTools或Firefox Developer Tools,用于调试JavaScript代码和查看元素样式。 2. **IDE/编辑器**:例如Visual Studio Code、WebStorm,提供代码补全、语法高亮等特性,提高开发...
- **Firebug**: Firefox的插件,提供强大的调试功能。 - **Sencha Cmd**: 官方提供的命令行工具,支持项目管理、构建和部署等功能。 #### 7. 总结 - ExtJS是一款功能强大且高度可定制的前端框架,适合构建复杂的...
6. **源码调试技巧**:使用浏览器的开发者工具,如Chrome DevTools或Firefox Developer Tools,结合特定的Ext JS调试插件,可以更高效地定位和解决问题。 7. **错误日志**:理解和解析Ext JS的错误信息,能快速定位...
- 浏览器:推荐使用Firefox,因为它配合Firebug能提供强大的JavaScript调试功能。对于跨浏览器兼容性测试,IE仍然是不可忽视的一部分。 - Firebug: 作为Firefox的插件,提供源代码查看、断点调试、性能分析等功能。 ...
目前,这意味着Firefox,因为它是我使用的支持侧边栏API的主要浏览器。 发展历程 要开始开发,请运行: yarn install yarn build # In one terminal yarn start # In another terminal 要在Firefox中查看调试消息...
[关于兼容性] 建议使用chrome firefox ie9+ 体验更完整。ie8以下基本上不做兼容处理。chrome支持文件夹拖拽上传。 [文件打开] office文件在线预览功能,服务器必须在公网(外部能访问该服务器) [忘记密码] 修改data...
9. **兼容性**:EXTJS 2.2设计时考虑了跨浏览器兼容性,支持主流的浏览器如IE6+、Firefox、Chrome、Safari等,确保应用在各种环境下都能正常运行。 10. **性能优化**:EXTJS 2.2对组件的渲染和数据加载进行了优化,...
后台界面采用ajax框架ext非常漂亮。...还用自定义的过滤器实现后台登陆权限的实现,还改了一部分代码,既能在IE上展现,又能在Firefox下展现同时项目也可以在Weblogic下部署,我已经改好了。(原来是在tomcat下).