<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>使用ViewPort(可视窗口区域)</title> <link rel="stylesheet" href="ext-4.2.1/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script> <script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.create('Ext.container.Viewport',{ //也可以写成 Ext.create('Ext.Viewport',{ layout:'border',//表格布局 items:[{ title:'north Panel', html:'上边', region:'north',//指定子面板所在区域为north height:100 }, { title:'west Panel', html:'左边', region:'west',//指定子面板所在区域为west width:50 }, { title:'Main Content', html:'中间', region:'center'//指定子面板所在区域为center } ] }); }); </script> </head> <body> </body> </html>
开发者博客:www.developsearch.com
相关推荐
- `viewport`:`Ext.ViewPort`,全屏容器,与浏览器视口大小一致,可以自动调整大小。 - `box`:`Ext.BoxComponent`,基本的HTML元素容器,类似于一个`<div>`。 - `component`:`Ext.Component`,基础组件类,...
例如,`Ext.container.Viewport`用于定义整个浏览器窗口的内容,`Ext.grid.Panel`用于创建数据网格,`Ext.window.Window`则可以创建弹出式窗口。 2. **数据绑定**:在4.1.1a版本中,ExtJS强化了数据绑定功能,使得...
- **Ext.container.Viewport**:全屏容器,用于包裹整个应用界面。 - **Ext.tab.Panel**:页签面板,用于展示多个页面内容,每个页面作为一个单独的Tab。 6. **Tree 组件** - **Ext.tree.Panel**:用于展示树形...
- `container`: `Ext.Container` - `cycle`: `Ext.CycleButton` - `dataview`: `Ext.DataView` - `datepicker`: `Ext.DatePicker` - `editor`: `Ext.Editor` - `editorgrid`: `Ext.grid.EditorGridPanel` - `flash`:...
1.Ext Designer生成的代码,如何使用;通过实例化来使用。 2.Ext 的model,store,grid使用,...Ext.container.Viewport .... 希望能给初学者一点启示吧。 如果有不明白的请我QQ:243596252;时间允许我会帮助大家。。。
9.4.11 表格布局:ext.layout.container.table / 454 9.4.12 列布局:ext.layout.container.column / 455 9.4.13 自适应布局:ext.layout.container.abstractfit与ext.layout.container.fit / 456 9.4.14 卡片...
现在你可以尝试在JavaScript文件中输入Ext JS的相关代码,如`Ext.create('Ext.container.Viewport', {`,看看是否会出现代码提示。如果一切正常,你应该能看到类、方法和属性的智能提示。 ### 注意事项 1. 如果...
- 将COMBO TREE组件添加到一个布局容器(如EXT.container.Viewport或EXT.container.Box) 通过阅读和理解"ComboTree.js"文件的代码,你可以掌握如何在EXT应用程序中实现下拉框显示树形结构的功能,这将对你的EXT...
var container = new Ext.container.Viewport({ layout: 'border', items: [{ region: 'north', html: '北部内容' }, { region: 'south', html: '南部内容' }, { region: 'east', html: '东部内容' }, { ...
Ext.container.Viewport.add(uploadPanel); ``` 总的来说,`Ext.ux.SwfUploadPanel.js`是一个强大而灵活的文件上传解决方案,它结合了ExtJS的组件化和SwfUpload的高级上传功能,使得在Web应用中实现多文件上传变得...
Ext.create('Ext.container.Viewport', { items: [{ xtype: 'datefield', fieldLabel: '选择年月', pluginConfig: { type: 'yearmonth' }, format: 'Y-m', width: 200 }] }); } }); ``` 在这个示例中,...
Ext.create('Ext.container.Viewport', { layout: 'fit', items: [{ xtype: 'panel', title: '我的EXT应用', html: '欢迎使用EXT!' }] }); } }); ``` **二、EXT开发文档** EXT的开发文档是学习EXT的...
Ext.create('Ext.container.Viewport', { layout: 'fit', items: [{ title: 'Hello Ext', html : 'Hello! Welcome to Ext JS.' }] }); } }); ``` - 创建helloworld.html,引入必要的CSS和JavaScript文件...
2. **Ext.container.Container**: 用于组合其他组件,如`Ext.container.Viewport`可以作为整个应用的容器,包含登录表单。 3. **Ext.form.Panel**: 专门用于创建表单的容器,可以包含多个字段、验证规则等。在登录...
var mainViewport = Ext.create('Ext.container.Viewport', { layout: 'fit', items: [editorPanel] }); ``` `ckeditor`目录可能包含了CKEditor的完整资源包,包括皮肤、语言文件等。这些资源通常需要被正确引用...
- `container`: `Ext.Container` - `cycle`: `Ext.CycleButton` - `dataview`: `Ext.DataView` - `datepicker`: `Ext.DatePicker` - `editor`: `Ext.Editor` - `editorgrid`: `Ext.grid.EditorGridPanel` - `...
**1.5 Container (Ext.Container)** - **xtype**: `container` - **功能描述**:Container 是一个可以包含其他组件的容器,可以定义布局和其他高级属性。 - **主要用途**:用作布局管理器,组织和管理子组件。 ###...
使用`Ext.container.Viewport`作为应用程序的主要容器。 4.2、报表页面 报表页面应使用`Ext.grid.Panel`或`Ext.tree.Panel`展示数据,结合`Ext.data.Store`和`Ext.data.Model`进行数据处理。利用`Ext.toolbar....
2. **层级结构**:类名中体现组件的层级关系,如`Ext.container.Viewport`表示视口容器。 3. **功能描述**:类名会包含组件的主要功能,如`Ext.toolbar.Toolbar`表示工具栏。 4. **继承关系**:EXT类名有时会体现出...
Ext.create('Ext.container.Viewport', { layout: 'fit', items: [{ xtype: 'panel', title: '我的第一个Ext JS程序', html: '欢迎使用Ext JS 4.2!' }] }); ``` 7. **运行并测试**: 现在,你可以通过点击...