`
yangzisai
  • 浏览: 87580 次
  • 性别: Icon_minigender_1
  • 来自: 东莞
社区版块
存档分类
最新评论

Ext Viewport实例

阅读更多

 <script>
    Ext.onReady(function () {
      new Ext.Viewport({
        enableTabScroll:true,
        layout:"border",
        items:[
         {
          title:"面板",
          region:"north",
          height:50,
          html:"<h1>hi boy</h1>",
          bbar:[
           {text:"按钮一"},
           {pressed:true,text:"按钮二"}
          ]
         },
         {
          title:"菜单",
          region:"west",
          width:200,
          collapsible:true,
          html:"菜单栏"
         },
         {
          xtype:"tabpanel",
          region:"center",
          items:[{title:"面板1"},{title:"面板2"}]
         }
        ]
       }
      );
     }
    );
    </script>

分享到:
评论
1 楼 isaiahzhong 2012-11-13  
            没有效果,运行根本没有出来窗体,官网上的demo也是一样,没有效果,蛋疼

相关推荐

    Ext.Viewport布局

    ### Ext.Viewport布局详解 在前端开发领域,尤其是基于Ext JS框架进行应用设计时,`Ext.Viewport`布局是至关重要的概念。它提供了一个全面的、全屏的容器,用于组织和展示各种UI组件,如面板、表格、图表等。在给定...

    ext实例 ext操作步骤

    var viewport = new Ext.Viewport({ layout: 'border', // 布局,必须是border items: [northPanel, westPanel, centerPanel, eastPanel, southPanel] }); ``` 这里的`northPanel`, `westPanel`, `centerPanel`, `...

    ext4 表格分页实例代码

    Ext.create('Ext.container.Viewport', { layout: 'fit', // 全屏布局 items: [grid] }); ``` 在上述代码中,`data.json`应替换为实际的数据接口,返回JSON格式的数据,包含`data`属性,其值是一个数组,表示当前...

    Ext级联菜单实例

    Ext.create('Ext.container.Viewport', { layout: 'fit', items: [{ xtype: 'button', text: '显示菜单', handler: function () { mainMenu.showBy(this); } }] }); } }); ``` 在这个例子中,我们创建了...

    EXT风格PHP饼状图统计图表实例.7z

    Ext.create('Ext.container.Viewport', { items: [{ xtype: 'chart', width: 600, height: 400, store: { fields: ['value', 'label'], data: Ext.Ajax.request({ url: 'path/to/your/php/script.php', // ...

    EXT下拉框显示树形结构源代码

    - 将COMBO TREE组件添加到一个布局容器(如EXT.container.Viewport或EXT.container.Box) 通过阅读和理解"ComboTree.js"文件的代码,你可以掌握如何在EXT应用程序中实现下拉框显示树形结构的功能,这将对你的EXT...

    ext 颜色改变组件

    Ext.create('Ext.container.Viewport', { layout: 'fit', // 全屏布局 items: [{ xtype: 'colorfield', // 使用颜色选择组件 fieldLabel: '选择颜色', listeners: { select: function (component, newValue) ...

    jsp+ext4(js部分由Ext Designer生成)

    1.Ext Designer生成的代码,如何使用;通过实例化来使用。 2.Ext 的model,store,grid使用,...Ext.container.Viewport .... 希望能给初学者一点启示吧。 如果有不明白的请我QQ:243596252;时间允许我会帮助大家。。。

    Ext的gridpanel控件二次加载问题

    Ext.container.Viewport.add(myGrid); } else { // 重新加载数据 myGrid.store.loadData(newData); } } ``` 在这个例子中,`initGrid`函数会检查`myGrid`是否已经存在,如果不存在则创建一个新的GridPanel实例...

    Ext MVC 项目示例

    通过`Ext.container.Viewport`或`Ext.Component`创建视图,并通过数据绑定将模型数据呈现到界面上。 3. **控制器(Controller)**: 控制器作为模型和视图之间的纽带,处理用户交互,更新模型数据,以及管理视图的...

    extTree例子点击出现等

    这可能包括创建一个新的`Ext.window.Window`,加载一个新的`Ext.container.Viewport`,或者更新现有组件的状态。 4. 使用`show`或`open`方法将新界面呈现给用户。 在提供的压缩包文件"ExtTest"中,可能包含了实现这...

    EXt 可以编辑的grid

    6. **实例化Panel**:最后,我们需要实例化这个Grid Panel,并将其添加到容器(如Viewport或一个Panel)中,使其在页面上显示。 在描述中提到的"自己写的editpanel实例"可能是指开发者自定义了一个编辑面板,这通常...

    Ext4.0教程

    1. **创建Hello World应用**:在WebRoot目录下建立一个名为`helloworld.js`的文件,输入Ext4.0的`application`配置代码,定义应用名称和启动函数,创建一个带有标题和内容的`Viewport`容器。 2. **HTML结构**:创建`...

    extjs实例 入门,提供ext所需要的资源文件,详细叙述怎么改变文件颜色

    Ext.create('Ext.container.Viewport', { style: { backgroundColor: 'red' }, // ... }); ``` - 对于更复杂的样式更改,可以使用`cls`(class)属性添加自定义CSS类,然后在CSS文件中定义这些类。 3. **...

    Ext Js权威指南(.zip.001

    9.2.3 将body元素作为容器:ext.container.viewport / 435 9.3 面板 / 436 9.3.1 面板的结构 / 436 9.3.2 构件的放置:dockeditems / 438 9.3.3 面板标题栏构件:ext.panel.header与ext.panel.tool / 438 9.3.4...

    Ext2.0的学习笔记

    在Ext2.0中,每个页面只能有一个`ViewPort`实例,这通常作为应用程序的根容器,用来组织和布局所有的UI组件。通过使用`ViewPort`,开发者可以轻松地创建响应式设计,确保Web应用在不同设备和屏幕尺寸上都能正常工作...

    ext 中嵌入CKEditor 实现代码

    var mainViewport = Ext.create('Ext.container.Viewport', { layout: 'fit', items: [editorPanel] }); ``` `ckeditor`目录可能包含了CKEditor的完整资源包,包括皮肤、语言文件等。这些资源通常需要被正确引用...

    Ext.ux.SwfUploadPanel.js

    Ext.container.Viewport.add(uploadPanel); ``` 总的来说,`Ext.ux.SwfUploadPanel.js`是一个强大而灵活的文件上传解决方案,它结合了ExtJS的组件化和SwfUpload的高级上传功能,使得在Web应用中实现多文件上传变得...

    Ext中CKEditor应用事例

    Ext.create('Ext.container.Viewport', { layout: 'fit', // 使用适合布局,让CKEditor充满整个窗口 items: [{ xtype: 'ckeditor', // 指定CKEditor类型 id: 'myEditor', // 设置唯一ID以便后续操作 height: ...

Global site tag (gtag.js) - Google Analytics