Ext.onReady(function (){
var tabPanel = new Ext.TabPanel({
//title:'yang chun zhi',
width:500,
height:300,
enableTabScroll:true,
closable:true,
draggable:true,
renderTo:'mainDiv',
bodyStyle:"background-image:url('tree/images/image001.gif')",
items:[new Ext.Panel({
title:'独一无二',
bodyStyle:"background-image:url('tree/images/image001.jpg')",
ctCls :'tabIcon',
height:200,
html:'<input type="button" value="独一无二"/>'
}),new Ext.Panel({
title:'流年往事',
bodyStyle:"background-image:url('tree/images/image001.jpg')",
html:'<input type="button" value="流年往事"/>'
}),new Ext.Panel({
title:'至尊无上',
bodyStyle:"background-image:url('tree/images/image001.jpg')",
html:'<input type="button" value="至尊无上"/>'
}),new Ext.Panel({
title:'沉鱼落雁',
bodyStyle:"background-image:url('tree/images/image001.jpg')",
html:'<input type="button" value="沉鱼落雁"/>'
}),new Ext.Panel({
title:'黑色名单',
bodyStyle:"background-image:url('tree/images/image001.jpg')",
html:'<input type="button" value="黑色名单"/>'
}),new Ext.Panel({
title:'单身神话',
bodyStyle:"background-image:url('tree/images/image001.jpg')",
html:'<input type="button" value="单身神话"/>'
}),new Ext.Panel({
title:'幽灵禁区',
bodyStyle:"background-image:url('tree/images/image001.jpg')",
html:'<input type="button" value="幽灵禁区"/>'
}),new Ext.Panel({
title:'游戏世界',
bodyStyle:"background-image:url('tree/images/image001.jpg')",
html:'<input type="button" value="游戏世界"/>'
}),new Ext.Panel({
title:'葵花宝典',
bodyStyle:"background-image:url('tree/images/image001.jpg')",
html:'<input type="button" value="葵花宝典"/>'
})]
});
var window = new Ext.Window({
title:'春峰科技',
width:513,
height:300,
enableTabScroll:true,
closable:true,
draggable:true,
renderTo:Ext.getBody(),
items:[tabPanel]
});
window.show();
});
分享到:
相关推荐
ExtJS4学习笔记(一)---window的创建 ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(三)---VBox的使用 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ...
1. **组件(Components)**:EXTJS的核心在于其强大的组件系统,如GridPanel(数据网格)、FormPanel(表单)、TabPanel(选项卡)和Window(弹出窗口)等,这些组件都具有丰富的配置项和事件处理机制。 2. **数据...
ExtJs 是一个强大的JavaScript库,专门用于构建富客户端Web应用程序。它提供了丰富的用户界面组件,如数据绑定、网格、表单、菜单、树形结构等,使得开发人员能够创建功能丰富的交互式网页应用。本资源包含ExtJs的...
- `tabpanel`:选项卡面板 - `treepanel`:树形面板 - `viewport`:视口 - `window`:窗口 此外,EXTJS还提供了各种工具栏组件,如`toolbar`、`tbbutton`、`tbfill`等,用于创建复杂的工具栏布局。 #### 四、EXTJS...
Box、Button、ColorPalette、Component、Container、CycleButton、DataView、DatePicker、Editor、EditorGridPanel、Grid、PagingToolbar、Panel、ProgressBar、SplitButton、TabPanel、TreePanel、Viewport、Window...
2. **EXTJS控件应用**:项目涵盖了EXTJS2.2几乎所有的控件,如GridPanel用于数据展示,FormPanel用于用户输入,TabPanel实现多页面切换,TreePanel用于层次结构的数据展示,Window和Dialog则提供弹出窗口功能。...
19. `window` - `Ext.Window`:浮动窗口,可以包含任意组件并提供关闭、最小化等操作。 除了`xtype`,`Ext.QuickTips.init()`是EXTJS中的一个方法,用于初始化快速提示功能。快速提示是EXTJS中的一个小弹出窗口,...
1. **EXTJS组件**:EXTJS的核心是它的组件模型,包括GridPanel、TreePanel、PropertyGrid、EditorGridPanel、TabPanel、FormPanel、Panel、Window、ToolTip和FieldSet等。这些组件可以组合起来创建复杂的用户界面,...
3. `test.windowgroup.html`:可能展示了如何在ExtJS的窗口(Window)组件中嵌入TinyMCE编辑器,窗口组(WindowGroup)则可能涉及到多个窗口的管理和显示。 4. `test.collapse.html`:这个文件可能包含关于如何在...
Ext.create('Ext.window.Window', { title: 'Hello ExtJS', width: 400, height: 200, layout: 'fit', items: [ { xtype: 'panel', html: 'Hello World!' } ] }).show(); ``` 在这个例子中,我们创建了一...
- **EXTJS API**:熟悉EXTJS的核心类库,包括Panel、Window、Form、Grid等组件的API。 - **事件处理**:掌握EXTJS的事件模型,学会编写事件监听器。 - **数据模型和存储**:理解Store和Model的概念,学会使用Proxy与...
- 表单及元素组件:Editor、EditorGridPanel、GridPanel、PagingToolbar、Panel、ProgressBar、SplitButton、TabPanel、TreePanel、Viewport、Window等。 EXTJS通过其强大的组件模型和丰富的API,为开发者提供了...
7. tabpanel - xtype: 'tabpanel', 描述: 选项面板 8. treepanel - xtype: 'treepanel', 描述: 树型面板 9. flash - xtype: 'flash', 描述: 显示 Flash 的组件(Since 3.0) 编辑器 1. editor - xtype: 'editor', ...
窗口Window部分则讲解了如何在ExtJS中创建和管理窗口组件,这包括窗口的创建、配置和事件处理。 对话框部分讨论了ExtJS中对话框组件的使用,以及对话框组件的不同类型和定制方式。 TabPanel部分涉及了选项卡面板的...
### ExtJs2.0简明教程 #### 一、ExtJS简介 ExtJS是一款基于JavaScript的前端框架,它提供了一套完整的用户界面解决方案,能够帮助开发者快速构建高性能、跨浏览器的Web应用程序。ExtJS2.0是该框架的一个重要版本,...
1. **EXTJS视图组件**:EXTJS提供了多种视图组件,如Grid、Panel、Window、TabPanel等,这些组件可以帮助开发者快速构建出美观且交互性强的前端界面。例如,Grid用于展示数据表格,Panel可以组合其他组件,Window...
使用xtype配置时,子组件不会立即实例化,而是在需要时由容器动态创建,如TabPanel中的选项卡页面,仅在用户切换到对应页面时才进行渲染,这样可以优化性能。 组件还支持显示和隐藏操作,EXTJS提供了show和hide方法...