`
yangchunzhi
  • 浏览: 23925 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

extjs tabPanel window

阅读更多
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中文教程2 开发笔记 chm

    ExtJS4学习笔记(一)---window的创建 ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(三)---VBox的使用 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ...

    extjs3.0开发包含示例api

    1. **组件(Components)**:EXTJS的核心在于其强大的组件系统,如GridPanel(数据网格)、FormPanel(表单)、TabPanel(选项卡)和Window(弹出窗口)等,这些组件都具有丰富的配置项和事件处理机制。 2. **数据...

    ExtJs + api + 笔记 + 完整包

    ExtJs 是一个强大的JavaScript库,专门用于构建富客户端Web应用程序。它提供了丰富的用户界面组件,如数据绑定、网格、表单、菜单、树形结构等,使得开发人员能够创建功能丰富的交互式网页应用。本资源包含ExtJs的...

    基础到实战ExtJs全程精通培

    课程大纲覆盖了ExtJS的基础组件和功能,包括信息提示框、面板(Panel)、工具栏、菜单栏、窗口(Window)等。此外,还详细讲解了布局方式,如ViewPort和TabPanel,以及FormPanel、TreePanel、GridPanel等关键组件的...

    EXTJS学习文档 适合初学者

    - `tabpanel`:选项卡面板 - `treepanel`:树形面板 - `viewport`:视口 - `window`:窗口 此外,EXTJS还提供了各种工具栏组件,如`toolbar`、`tbbutton`、`tbfill`等,用于创建复杂的工具栏布局。 #### 四、EXTJS...

    EXTJS实用开发指南_个人整理笔记.pdf

    Box、Button、ColorPalette、Component、Container、CycleButton、DataView、DatePicker、Editor、EditorGridPanel、Grid、PagingToolbar、Panel、ProgressBar、SplitButton、TabPanel、TreePanel、Viewport、Window...

    extjs2.2开发实战项目 已经发布运行

    2. **EXTJS控件应用**:项目涵盖了EXTJS2.2几乎所有的控件,如GridPanel用于数据展示,FormPanel用于用户输入,TabPanel实现多页面切换,TreePanel用于层次结构的数据展示,Window和Dialog则提供弹出窗口功能。...

    extjs xtype

    19. `window` - `Ext.Window`:浮动窗口,可以包含任意组件并提供关闭、最小化等操作。 除了`xtype`,`Ext.QuickTips.init()`是EXTJS中的一个方法,用于初始化快速提示功能。快速提示是EXTJS中的一个小弹出窗口,...

    extjs扩展标记

    1. **EXTJS组件**:EXTJS的核心是它的组件模型,包括GridPanel、TreePanel、PropertyGrid、EditorGridPanel、TabPanel、FormPanel、Panel、Window、ToolTip和FieldSet等。这些组件可以组合起来创建复杂的用户界面,...

    TinyMce For Extjs

    3. `test.windowgroup.html`:可能展示了如何在ExtJS的窗口(Window)组件中嵌入TinyMCE编辑器,窗口组(WindowGroup)则可能涉及到多个窗口的管理和显示。 4. `test.collapse.html`:这个文件可能包含关于如何在...

    extjs实践大量实例讲解

    Ext.create('Ext.window.Window', { title: 'Hello ExtJS', width: 400, height: 200, layout: 'fit', items: [ { xtype: 'panel', html: 'Hello World!' } ] }).show(); ``` 在这个例子中,我们创建了一...

    掏钱学extjs完全版

    - **EXTJS API**:熟悉EXTJS的核心类库,包括Panel、Window、Form、Grid等组件的API。 - **事件处理**:掌握EXTJS的事件模型,学会编写事件监听器。 - **数据模型和存储**:理解Store和Model的概念,学会使用Proxy与...

    EXTJS实用开发指南

    - 表单及元素组件:Editor、EditorGridPanel、GridPanel、PagingToolbar、Panel、ProgressBar、SplitButton、TabPanel、TreePanel、Viewport、Window等。 EXTJS通过其强大的组件模型和丰富的API,为开发者提供了...

    extjs中的xtype的所有类型介绍

    7. tabpanel - xtype: 'tabpanel', 描述: 选项面板 8. treepanel - xtype: 'treepanel', 描述: 树型面板 9. flash - xtype: 'flash', 描述: 显示 Flash 的组件(Since 3.0) 编辑器 1. editor - xtype: 'editor', ...

    ExtJS快速入门指南.pdf

    窗口Window部分则讲解了如何在ExtJS中创建和管理窗口组件,这包括窗口的创建、配置和事件处理。 对话框部分讨论了ExtJS中对话框组件的使用,以及对话框组件的不同类型和定制方式。 TabPanel部分涉及了选项卡面板的...

    ExtJs2.0简明教程

    ### ExtJs2.0简明教程 #### 一、ExtJS简介 ExtJS是一款基于JavaScript的前端框架,它提供了一套完整的用户界面解决方案,能够帮助开发者快速构建高性能、跨浏览器的Web应用程序。ExtJS2.0是该框架的一个重要版本,...

    EXTJS+Domino的应用例子-修正

    1. **EXTJS视图组件**:EXTJS提供了多种视图组件,如Grid、Panel、Window、TabPanel等,这些组件可以帮助开发者快速构建出美观且交互性强的前端界面。例如,Grid用于展示数据表格,Panel可以组合其他组件,Window...

    EXTjs组件.pdf

    使用xtype配置时,子组件不会立即实例化,而是在需要时由容器动态创建,如TabPanel中的选项卡页面,仅在用户切换到对应页面时才进行渲染,这样可以优化性能。 组件还支持显示和隐藏操作,EXTJS提供了show和hide方法...

Global site tag (gtag.js) - Google Analytics