`

ExtJs viewPort属性

 
阅读更多

1.xtype属性

xtype                  Class            

基本组件:                                                                 

box                    Ext.BoxComponent                      具有边框属性的组件

button                Ext.Button                                      按钮

colorpalette      Ext.ColorPalette                            调色板

component       Ext.Component                            组件

container          Ext.Container                                容器

cycle                 Ext.CycleButton

dataview          Ext.DataView                                数据显示视图

datepicker       Ext.DatePicker                              日期选择面板

editor                Ext.Editor                                       编辑器

editorgrid         Ext.grid.EditorGridPanel              可编辑的表格

grid                   Ext.grid.GridPanel                         表格

paging              Ext.PagingToolbar                         工具栏中的间隔

panel                Ext.Panel                                        面板

progress          Ext.ProgressBar                            进度条

splitbutton        Ext.SplitButton                               可分裂的按钮

tabpanel           Ext.TabPanel                                 选项面板

treepanel         Ext.tree.TreePanel                        

viewport           Ext.ViewPort                                  视图

window             Ext.Window                                   窗口

工具栏组件:

toolbar              Ext.Toolbar                                    工具栏

tbbutton            Ext.Toolbar.Button                         按钮

tbfill                   Ext.Toolbar.Fill                               文件

tbitem               Ext.Toolbar.Item                            工具条项目

tbseparator      Ext.Toolbar.Separator                  工具栏分隔符

tbspacer          Ext.Toolbar.Spacer                       工具栏空白

tbsplit               Ext.Toolbar.SplitButton                 工具栏分隔按钮

tbtext                Ext.Toolbar.TextItem                     工具栏文本项

表单及字段组件:

form                  Ext.FormPanel Form                     面板

checkbox         Ext.form.Checkbox checkbox       录入框

combo             Ext.form.ComboBox combo         选择项

datefield          Ext.form.DateField                        日期选择项

field                  Ext.form.Field                                 表单字段

fieldset            Ext.form.FieldSet                           表单字段组

hidden             Ext.form.Hidden                             表单隐藏域

htmleditor        Ext.form.HtmlEditor html               编辑器

numberfield     Ext.form.NumberField                   数字编辑器

radio                Ext.form.Radio                               单选按钮

textarea           Ext.form.TextArea                          区域文本框

textfield            Ext.form.TextField                          表单文本框

timefield           Ext.form.TimeField                         时间录入项

trigger              Ext.form.TriggerField                      触发录入项

 

2.region

指定布局模块所在位置

 

3.title:布局块的标题

 

4.collapsible:是否显示关闭和展开模块的按钮

 

5.spilt:是否可以拖放改变宽度或高度

 

6.Wdith,minWidth:设定宽度和最小宽度

 

7.height,minHeight:设定高度和最小高度

 

8.layout:布局模式

 

分享到:
评论

相关推荐

    extJs xtype 类型

    2. **`viewport`:** 视口组件,表示浏览器的可视区域,能够根据浏览器窗口大小自动调整其大小,通过`Ext.ViewPort`类实现。 3. **`box`:** 盒子组件,相当于HTML中的`<div>`元素,由`Ext.BoxComponent`类提供支持。...

    extjs加水印

    1. CSS3滤镜:可以使用CSS3的`filter`属性,通过`drop-shadow`或者`blur`等效果模拟水印。 2. SVG图形:利用SVG矢量图形可以创建透明度可调的水印,适用于现代浏览器。 3. Canvas绘制:在HTML5的Canvas元素上绘制...

    Extjs自动最大化panel

    在传统的EXTJS中,`viewport`是一个特殊的布局,用于将整个页面作为其渲染目标,使得应用可以充满浏览器窗口。然而,`viewport`有其局限性,它只能应用于整个body元素,不能针对特定的HTML元素进行最大化处理。 ...

    Extjs主界面生成导航

    我们需要在 TreeStore 中设置 root 属性,并将其expanded 属性设置为 true,以便在加载时展开根节点。 4. 设置 Proxy:在TreeStore中,我们需要设置Proxy来指定数据的来源。在这里,我们使用ajax类型的Proxy,并将...

    extjs4-教程

    - **创建helloword.js**:这个JavaScript文件将包含ExtJS应用的初始化代码,定义了一个名为HelloExt的应用,并在应用启动时创建了一个Viewport组件,里面包含了一个Panel。 - **创建helloword.html**:这是应用的...

    EXTJS学习文档 适合初学者

    - `viewport`:视口 - `window`:窗口 此外,EXTJS还提供了各种工具栏组件,如`toolbar`、`tbbutton`、`tbfill`等,用于创建复杂的工具栏布局。 #### 四、EXTJS底层API与实用工具 **底层API(Core)**提供了对DOM...

    ExtJS2.0管理后台框架

    ExtJs_Viewport_Example很可能是一个示例,展示了如何使用ExtJS的Viewport配置整个浏览器窗口。Viewport允许开发者将应用全屏展示,确保内容适应不同分辨率和屏幕尺寸。通过设置Viewport,可以确保用户无论在何种...

    ExtJS介绍以及GridPanel

    除了GridPanel,ExtJS还提供了许多其他组件,如FormPanel(用于创建表单)、TreePanel(用于展示树形数据结构)、Viewport(全屏布局容器)等,它们共同构成了一个强大的Web开发工具箱。 在源码层面,ExtJS使用了...

    Extjs生成主界面

    在Sencha Architect中,选择创建一个新的Viewport,并设置其基本属性。 - **Id**:设置Viewport的唯一标识为`MyViewport`。 - **Layout**:选择`border`布局,这种布局非常适合用于构建具有多个区域(如顶部、底部...

    Extjs Combotree

    3. **创建Combotree组件**:使用ExtJS的`Ext.create`方法,指定组件类型为`Ext.tree.Panel`,并配置相关属性,如store(数据源)、displayField(显示字段)、width、height等。 4. **配置TreeStore**:为Combotree...

    ExtJs Tree

    - **视口组件**:`var viewport = new Ext.Viewport({...});`定义了整个应用的视口布局,其中包含了顶部、底部、导航面板及主要内容面板。 ### 扩展功能 - **动态添加Tab页**:虽然示例中没有完整展示,但通过`...

    Extjs4 下拉树 TreeCombo

    ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用,例如在需要用户选择分类或者层级结构的场景中...

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

    - 在ExtJS的组件定义中,你可以直接设置`style`属性来应用内联样式。例如,创建一个红色背景的面板: ```javascript Ext.create('Ext.container.Viewport', { style: { backgroundColor: 'red' }, // ... })...

    EXTJS产品级别管理后台源代码

    7. **响应式设计**:EXTJS支持移动设备,使用`Ext.viewport`和`Ext.layout.container.Box`等布局管理器,可以实现跨平台的响应式设计,确保在不同设备上都能提供良好的用户体验。 在压缩包文件`ysc-APDPlat-5e7a864...

    extjs xtype

    18. `viewport` - `Ext.ViewPort`:视口组件,用于填充整个浏览器窗口。 19. `window` - `Ext.Window`:浮动窗口,可以包含任意组件并提供关闭、最小化等操作。 除了`xtype`,`Ext.QuickTips.init()`是EXTJS中的一...

    Extjs_htmleditor插件

    2. **创建实例**:在ExtJS的配置对象中定义HTML Editor组件,设置宽度、高度、工具栏配置等属性。 3. **事件监听**:通过` listeners `配置项,监听编辑器的事件,实现与业务逻辑的交互。 4. **内容获取和设置**:...

    EXTJS 的 MVC 开发例子

    EXTJS中的`Ext.data.Model`定义了数据对象的结构和规则,可以通过`fields`属性定义字段,通过`proxy`配置与服务器接口进行数据交换。模型还支持监听数据变化的事件,以便在数据更新时通知其他组件。 2. **Store**:...

    ExtjS--accordion布局

    Ext.create('Ext.container.Viewport', { layout: 'accordion', items: [{ title: '面板1', html: '这是面板1的内容' }, { title: '面板2', html: '这是面板2的内容' }, { title: '面板3', html: '这是...

    Extjs treeGrid 本地数据 例子

    你需要定义数据模型(Model),包含节点的属性,以及数据源(store configuration),这可以是JSON对象数组或者其他格式的数据。例如: ```javascript var store = Ext.create('Ext.data.TreeStore', { model: '...

Global site tag (gtag.js) - Google Analytics