ExtJs基础与常用技巧整理
![](https://csdnimg.cn/release/wenkucmsfe/public/img/star.98a08eaa.png)
"这篇文档是关于ExtJs使用过程中的实用技巧和常见问题的总结,适合初学者参考。" 在深入探讨ExtJs这个强大的JavaScript库之前,我们先了解一下它。ExtJs是一个用于构建富互联网应用程序(RIA)的前端框架,提供丰富的组件库、强大的数据管理和布局系统,以及美观的用户界面。以下是从给定内容中提取的几个关键知识点: 1. **基础布局与文件引用**: - 在使用ExtJs时,首先需要引入必要的CSS和JavaScript文件。例如,`ext-all.css`用于样式,`ext-base.js`是适配器,`ext-all.js`包含所有组件和功能。 - 对于中文支持,需要引入`ext-lang-zh_CN.js`来设置语言环境。 2. **初始化ExtJs应用**: - `Ext.onReady`函数用于在DOM加载完成后执行,这是启动ExtJs应用的常规方式。 - 初始化ExtJs时,可能需要设置一些全局属性,如`Ext.BLANK_IMAGE_URL`,并调用`Ext.QuickTips.init()`以启用提示功能。 3. **按钮的图标与样式**: - 可以通过`iconCls`属性来定义按钮前的小图标,如`'add'`或`'remove'`,并在CSS中定义相应的背景图像。 - 使用`tooltip`属性为按钮添加提示信息,`handler`则定义按钮点击后的处理函数。 4. **Ext.TabPanel组件**: - `Ext.TabPanel`是创建选项卡面板的组件,用于组织多个视图。 - 配置项如`defaults`用于设置所有标签页的默认属性,`autoHeight`和`autoScroll`控制面板的高度和滚动行为。 - `renderTo`指定了TabPanel渲染到的DOM元素,`enableTabScroll`允许选项卡滚动,`autoTabs`自动生成标签,`deferredRender`控制组件渲染时机,`activeTab`指定初始激活的标签,`animScroll`和`layoutOnTabChange`分别控制滚动动画和切换标签时的布局更新。 - `bodyStyle`可以设置TabPanel内部的样式,例如`padding`和`background-color`。 这只是ExtJs使用的一部分基础知识,实际开发中还有更多高级特性和复杂的配置。例如,ExtJs提供了各种各样的组件,如表格(GridPanel)、树形视图(TreePanel)、窗体(FormPanel)等,以及数据绑定和远程数据加载(Ajax和Store)。同时,它还支持自定义组件、扩展和布局。对于初学者来说,理解这些基本概念后,可以逐渐探索更深层次的使用方法和最佳实践,以便更好地利用ExtJs构建功能丰富的Web应用。
![](https://csdnimg.cn/release/download_crawler_static/3008452/bg5.jpg)
剩余23页未读,继续阅读
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)