`
raymond.chen
  • 浏览: 1432938 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Ext.Viewport

阅读更多

Ext.Viewport代表浏览器窗口的整个显示区域,将document body作为渲染对象,它会根据浏览器窗口的大小自动调整自身的尺寸。
 在一个页面中只允许出现一个Viewport实例,没有提供对滚动条的支持。

 

Ext.onReady(function(){
	var accordion = new Ext.Panel({
		title: "功能分组",
		layout: "accordion",
		layoutConfig: {
			animate: true
		},
		width: 250,
		minWidth: 100,
		region: "west",
		split: false,
		collapsible: true,
		items: [
			{title:"嵌套面板一", html:"嵌套面板一", iconCls:"save"},
			{title:"嵌套面板二", html:"嵌套面板二", iconCls:"search"},
			{title:"嵌套面板三", html:"嵌套面板三", iconCls:"back"}
		]
	});
	
	new Ext.Viewport({
		title: "Viewport",
		layout: "border",
		defaults: {
			bodyStyle: "background-color: #FFFFFF;",
			frame: true
		},
		items: [
			accordion,
			{region:"north", height:100},
			{region:"center"}
		]
	});
});

 

 

  • 大小: 23.4 KB
分享到:
评论
2 楼 zzg16 2011-09-21  
lingfenfei 写道
items: [  
14.            {title:"嵌套面板一", html:"嵌套面板一", iconCls:"save"},  
15.            {title:"嵌套面板二", html:"嵌套面板二", iconCls:"search"},  
16.            {title:"嵌套面板三", html:"嵌套面板三", iconCls:"back"}  
17.        ]

请问如何让这些成为动态的




可以请求一个servlet,servlet生成JSON数据,然后用JS处理JSON数据即可.
1 楼 lingfenfei 2011-01-14  
items: [  
14.            {title:"嵌套面板一", html:"嵌套面板一", iconCls:"save"},  
15.            {title:"嵌套面板二", html:"嵌套面板二", iconCls:"search"},  
16.            {title:"嵌套面板三", html:"嵌套面板三", iconCls:"back"}  
17.        ]

请问如何让这些成为动态的

相关推荐

    Ext.Viewport布局

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

    ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页

    使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展的,或者他会与其他控件之间有关系。 面板由一个工具栏、一个底部工具栏、面板头部、面板...

    Ext.ux.SwfUploadPanel.js

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

    Ext组件描述,各个组件含义

    **2.13 Viewport (Ext.Viewport)** - **xtype**: `viewport` - **功能描述**:Viewport 是一个全屏的容器,可以作为应用程序的主要容器。 - **主要用途**:作为应用的主要布局容器,管理整个页面的内容。 **2.14 ...

    Ext.JS.4.First.Look_第1版__._Ext.JS.4.First.Look_.Loiane.Groner.文字版

    - **改进的组件库**:Ext.JS 4.0 对组件库进行了大量的改进和扩展,新增了许多高级组件,如卡片式布局(Card Layout)、视图分组(Viewport Grouping)等,使得开发者能够构建更加复杂的用户界面。 - **样式定制**:通过...

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

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

    ExtJs_xtype一览

    - `viewport`:`Ext.ViewPort`,全屏容器,与浏览器视口大小一致,可以自动调整大小。 - `box`:`Ext.BoxComponent`,基本的HTML元素容器,类似于一个`<div>`。 - `component`:`Ext.Component`,基础组件类,...

    Ext.ux.form.TinyMCETextArea

    Ext.create('Ext.container.Viewport', { layout: 'fit', // 全屏布局 items: [{ xtype: 'form', items: [{ xtype: 'tinymcetextarea', // 使用TinyMCE的textarea组件 fieldLabel: '富文本编辑', name: '...

    extJs xtype 类型

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

    ext实例 ext操作步骤

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

    extjs xtype

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

    Ext combo 下拉框级联

    Ext.Viewport.add(form); } }); ``` 以上代码示例展示了如何在Ext JS中创建级联下拉框的基本流程。在实际应用中,可能还需要考虑其他因素,比如错误处理、数据分页、异步加载等。理解并掌握这些知识点对于构建高效...

    Extjs4 Grid分页与自动刷新

    Ext.create('Ext.Viewport', { layout: 'fit', items: [ grid, refreshBtn ] }); ``` #### 三、综合案例分析 结合以上两部分的内容,我们可以构建一个更完整的示例代码: ```javascript Ext.onReady...

    ExtJS3总结内容

    - `viewport`: `Ext.ViewPort` - `window`: `Ext.Window` - `toolbarcomponents`: `paging`, `toolbar`, `tbbutton`, `tbfill`, `tbitem`, `tbseparator`, `tbspacer`, `tbsplit`, `tbtext` - `menucomponents`: `...

    Extjs实用教程

    - **Viewport**: `Ext.ViewPort`,视口组件,通常作为整个页面的主要容器。 - **Window**: `Ext.Window`,弹出窗口。 2. **工具栏组件** - **Toolbar**: `Ext.Toolbar`,工具栏组件。 - **Button**: `Ext....

    ExtJs组件类的对应表

    2. **`viewport`** - `Ext.ViewPort`,视口组件,代表浏览器的可视区域,可以响应浏览器的大小变化。 3. **`box`** - `Ext.BoxComponent`,盒子组件,类似于HTML的`<div>`标签,用于布局和结构设计。 4. **`...

    Ext.Direct.Mvc是ASP.NET Mvc.的Ext Direct服务器端堆栈的实现.zip

    Ext.widget('viewport', { layout: 'fit', items: { xtype: 'grid', store: { proxy: { type: 'direct', directFn: 'test.getData' }, fields: ['name'], autoLoad: true }, columns: [ { text: 'Data...

    ext中播放声音

    Ext.Viewport.add(panel); } }); ``` 5. **交互控制**: 在EXTJS应用中,你可以通过事件监听来控制音频播放。例如,添加按钮来播放或暂停音频: ```javascript var playButton = Ext.create('Ext.button....

Global site tag (gtag.js) - Google Analytics