EXT_JS入门教程:从基础到窗口组件

需积分: 12 0 下载量 24 浏览量 更新于2024-09-17 收藏 1.19MB DOCX 举报
"EXT_JS实用开发指南" EXT JS是一种流行的JavaScript库,用于构建富客户端Web应用程序。这个实用开发指南将引导你了解EXT JS的基础知识和如何使用它来创建交互式的用户界面。 1. 页面引入EXT JS库 在使用EXT JS框架构建页面时,首先需要在HTML中引入必要的库文件。这通常包括CSS样式表`extjs/resources/css/ext-all.css`,适配器文件`extjs/adapter/ext/ext-base.js`,以及EXT JS的主要库文件`extjs/ext-all.js`。`Ext.BLANK_IMAGE_URL`常量用于设置空白图片URL,这是EXT JS组件在某些情况下使用的。 2. 应用启动与`Ext.onReady` EXT JS的应用程序通常始于`Ext.onReady`函数,它会在EXT JS库完全加载并准备好使用时执行。你可以传递一个函数给`Ext.onReady`,这个函数将在页面DOM准备就绪时运行。例如,你可以创建一个名为`fn`的函数并在其中添加一些初始化逻辑,如弹出一个提示框,以验证EXT JS库是否已经加载。 ```javascript function fn() { alert("ExtJS库已加载!"); } Ext.onReady(fn); ``` 或者,你也可以直接使用匿名函数: ```javascript Ext.onReady(function() { alert("ExtJS库已加载!"); }); ``` 3. 创建EXT JS窗口 EXT JS提供了一套丰富的控件,如窗口(Window)。你可以通过创建一个新的`Ext.Window`实例来显示一个窗口。以下代码展示了一个简单的窗口,带有标题、宽度、高度和内含的HTML文本: ```javascript Ext.onReady(function() { var win = new Ext.Window({ title: "Hello", width: 300, height: 200, html: '<h1>Hello, easyjfopensource</h1>' }); win.show(); }); ``` 4. EXT JS类库结构 EXT JS的类库主要分为以下几个部分: - **底层API (core)**:这是EXT JS的基础,包含DOM操作、事件处理、DOM查询等功能。核心API位于`core`子目录下,如`DomHelper.js`和`Element.js`。 - **控件 (widgets)**:EXT JS提供了大量的可视组件,如按钮、表格、面板等,它们构建在底层API之上。控件使得开发者可以方便地创建复杂的用户界面。 - **布局 (Layouts)**:EXT JS的布局管理器允许你动态调整组件的大小和位置,以适应不同的屏幕尺寸和设备。 - **数据绑定 (Data Binding)**:EXT JS支持数据模型和视图之间的双向绑定,使数据的更新能实时反映到界面中。 - **表格和树形组件 (Grids & Trees)**:EXT JS提供了强大的表格和树形视图,用于显示和操作大量结构化数据。 - **表单 (Forms)**:EXT JS的表单组件支持各种输入类型,并提供了验证和数据提交功能。 - **工具栏和菜单 (Toolbars & Menus)**:用于创建顶部工具栏、底部工具栏和下拉菜单。 - **图表 (Charts)**:EXT JS的图表组件可以创建各种复杂的数据可视化图形。 - **其他组件 (Miscellaneous Components)**:包括分页导航、弹出对话框、提示框等。 EXT JS通过其丰富的组件和API,为开发者提供了构建功能强大且响应式Web应用的工具。通过深入学习和实践,你可以掌握EXT JS的精髓,从而创建出高效、美观的Web应用程序。