<!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', { 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` - `...
Ext.create('Ext.container.Viewport', { items: [{ xtype: 'datefield', fieldLabel: '选择年月', pluginConfig: { type: 'yearmonth' }, format: 'Y-m', width: 200 }] }); } }); ``` 在这个示例中，...
**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. **运行并测试**: 现在，你可以通过点击...