上图是一个Window最普通的组件
通常我们使用的是ext-all.css,其实它是由许多个组件css组成的一个大css而已,见下图:
对于一个window的窗口,其实只有引入window.css就足够了,我们来看window.css的一个片段
background:transparent url(../images/default/window/top-bottom.png) repeat-x 0 0; background:transparent url(../images/default/window/left-corners.png) no-repeat 0 0; background:transparent url(../images/default/window/right-corners.png) no-repeat right 0; background:transparent url(../images/default/window/top-bottom.png) repeat-x 0 bottom; .x-window-bc.x-window-footer { background:transparent url(../images/default/window/left-corners.png) no-repeat 0 bottom; background:transparent url(../images/default/window/right-corners.png) no-repeat right bottom; font:normal 11px tahoma,arial,helvetica,sans-serif; background:transparent url(../images/default/window/left-right.png) repeat-y 0 0; background:transparent url(../images/default/window/left-right.png) repeat-y right 0; }
注意其中的 tl tc tr ml mc mr bl bc br 分别是上中下的意思
画个草图看下比如,我们拿掉了x-window-tl这个类,那么左上角的图片就会消失
那么x-window-bc x-window-tc 这些类在js文件里面是如何组织起来的呢?和一个很重要baseCls密切联系,在Ext.Window类里面,这个属性的值是”x-window”。在EXT里面CSS类的命名不能自己乱改的,tl tc tr ml mc mr bl bc br 都是写死在代码里的(当然你可以修改源码),我们只能改baseCls的属性值,并且修改相应的css类。比如我们自定义baseCls=”myWindow”,那么EXT会去CSS里面找 myWindow-tl,明白了吧?下面摘录源代码里面,这9个类的组织形式!
<divclass="{0}-tr"> <divclass="{0}-tc"> </div> <divclass="{0}-ml"> <divclass="{0}-mr"> <divclass="{0}-mc"> </div> <divclass="{0}-bl"> <divclass="{0}-br"> <divclass="{0}-bc"> </div>
我这番讲解再结合你的CSS基本功,EXT的CSS就可以轻松玩转啦。其他重要的CSS类继续挖掘中
分享到:
相关推荐
当Panel被用作窗口时,它通常会继承或包含`Ext.window.Window`的一些属性。以下是对`Ext.Panel` API中与`Window`相关的属性的详细解释: 1. **activeItem**: 这个属性用于指定当前活动的子组件,可以是子组件的序号...
在开发过程中,使用调试工具如Chrome DevTools可以方便地查看和修改窗口的CSS样式,以便调整窗口的外观。同时,使用IDE的代码提示和文档功能,可以快速了解Ext.Window的各种配置和方法。 7. **实战应用** - **...
在示例代码中提到,应该使用`Ext.window.Window`而不是`Ext.Window`,因为前者是正确的组件命名空间,使用后者在某些浏览器中可能会导致窗口组件无法正确显示。 以上知识点总结涵盖了ExtJS4组件创建、动态加载、...
这可能包括创建一个新的`Ext.window.Window`,加载一个新的`Ext.container.Viewport`,或者更新现有组件的状态。 4. 使用`show`或`open`方法将新界面呈现给用户。 在提供的压缩包文件"ExtTest"中,可能包含了实现这...
接下来将详细介绍文档中提到的几个核心概念,包括`Ext.MessageBox`、`Ext.Panel`、`Ext.Window`、`Ext.FormPanel`、`Ext.TabPanel`、`Ext.XTemplate`和`Ext.TreePanel`以及如何在Extjs中实现主题(换肤)功能。...
1. **用户界面**:ExtJS提供了多种组件,如`Ext.container.Viewport`用于全屏布局,`Ext.window.Window`用于创建弹出窗口,`Ext.panel.Panel`用于创建面板,以及`Ext.form.field.Text`和`Ext.form.field.TextArea`...
- **Ext.Panel**、**Ext.window.Window**和**Ext.container.Viewport**:面板、窗口和布局控件的使用。 - **Ext.tab.Panel**:详细讲解了选项卡的创建和操作。 - **Ext.ListView**和**Ext.view.View**:数据视图的...
ExtJS的构建过程通常涉及将源代码编译成适合生产环境的版本,如`ext-all.js`,它包含了所有必要的代码,而`ext-all-debug.js`则额外包含了调试信息,便于开发阶段的错误排查。`ext-all-dev.js`则进一步提供了开发...
### ExtJS Chart 柱形...综上所述,这段代码实现了在ExtJS中创建一个柱形图窗口的过程,涵盖了从数据准备到图表渲染的全过程。通过这种细致的配置,开发者可以灵活地调整图表的样式和交互行为,以满足不同的业务需求。
Ext.create('Ext.window.Window', { title: 'Hello World', width: 200, height: 100, layout: 'fit', html: 'Hello World!', renderTo: Ext.getBody() }).show(); }); ``` 通过上述代码,我们创建了一个...
在开发过程中,开发者可以将“ext-3.2.1”解压后引用其中的JavaScript和CSS文件,根据项目需求选择相应的组件和功能。同时,需要注意的是,由于这是一个较旧的版本,可能不包含最新的特性和修复,因此在新项目中建议...
extend: 'Ext.window.Window', alias: 'widget.loginForm', requires: ['Ext.form.*', 'SMS.view.CheckCode'], initComponent: function() { var checkcode = Ext.create('SMS.view.CheckCode', { /* 验证码...
4. **ext.imageviewer.js**:这是项目的核心文件,很可能包含了图片查看器组件的实现代码。EXTJS组件通常由多个部分组成,包括配置选项、事件处理、模板和样式等。开发者可以通过定制这个文件来满足特定需求,如添加...
在EXT Desktop 中,每个应用程序窗口通常是由EXT JS中的Panel或者Window组件创建的。通过Web.sql文件,我们可以推测这个例子可能涉及到数据库的交互。EXT JS 提供了数据绑定机制,使得前端界面可以直接与后端数据库...
这可以通过定义EXTJS组件,如`Ext.container.Viewport`或`Ext.window.Window`来实现。 3. **初始化EditArea**:在EXTJS容器的渲染事件中,调用EditArea的初始化函数,指定编辑器的ID和配置项。配置项可以设置编辑器...
这通常包括`extjs/resources/css/ext-all.css`,`extjs/adapter/ext/ext-base.js`和`extjs/ext-all.js`。`Ext.BLANK_IMAGE_URL`常量用于设置空白图像URL,避免因图像未加载而显示的默认图标。 2. **启动EXTJS应用**...
`ext-all.css`提供了UI的样式,`ext-base.js`是基础的JavaScript库,`ext-all.js`包含了所有ExtJs的组件和功能。如果需要中文支持,还需要引入`ext-lang-zh_CN.js`。 - 初始化:通过`Ext.onReady`函数在DOM加载完成...
- **定义**: 渲染是指含有 ExtJS 程序的页面下载完毕后在浏览器中完全展现的过程。 ##### 3.5 窗口(Window) - **定义**: 这里指的不是操作系统中的窗口,而是在应用程序中像窗口一样的显示区域。 ##### 3.6 ...