Ext.Viewport用了TabPanel
如
js代码:
Ext.Viewport建立center,里面包含一个Ext.TabPanel
{
region:'center',
layout:'fit',
split:true,
collapsible: true,
margins:'0 0 0 0',
frame:true,
items:tabPanel
}
Ext.TabPanel里建立一个新的Ext.TabPanel,包含GridPanel
var tabPanel = new Ext.TabPanel({
id:'tabPanel',
region:'center',
deferredRender:false,
activeTab:0,
enableTabScroll:true,
defaults: {autoScroll:true},
items:[{
contentEl:'center_context_desktop',
title: '桌面',
autoScroll:true
}]
});
这里,试过好多方法,都无法把grid设置为自适应宽度,快发疯了.
tabPanel.add({
id: 'user_list_grid',
title: '用户列表',
iconCls: 'userIco',
closable:true,
items:grid
})
刚通过以下方式试成功了.
gygcloud 写道
width: Ext.get("divname").getWidth(),
这样就可以了.
刚得到的.
使用这位仁兄的方法成功了.分享给大家
var grid = new Ext.grid.GridPanel({
//autoWidth:true,
border:false,
width: Ext.get('center_context_desktop').getWidth(),
ds: new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]),
data: Ext.grid.dummyData
}),
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{id:'company',header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 70, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 95, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]),
viewConfig: {
forceFit:true
},
autoExpandColumn:'company'
});
//autoWidth:true,
这一行一定要隐藏,在ie7和ff下试了,是没有问题的.
同时还有bodyStyle:'width:100%',这个也试成功了
分享到:
- 2008-05-14 02:14
- 浏览 5296
- 评论(3)
- 论坛回复 / 浏览 (3 / 11160)
- 查看更多
相关推荐
Ext.Viewport、 Ext.TabPanel布局
使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展的,或者他会与其他控件之间有关系。 面板由一个工具栏、一个底部工具栏、面板头部、面板...
9.8.2 在单页面应用中使用卡片布局实现“页面”切换 / 496 9.9 本章小结 / 498 第10章 重构后的grid / 500 10.1 grid的基类及其构成 / 500 10.1.1 概述 / 500 10.1.2 表格面板的运行流程:ext.panel.table / ...
1.Ext Designer生成的代码,如何使用;通过实例化来使用。 2.Ext 的model,store,grid使用,store如何接收json数据 3.form.Panel的分离,如何引用。 4.Ext.define的命名包含了namespace。 *本例子是简单的实现了一下...
第九章 Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件 72 一、面板控件 Ext.Panel 72 二、窗口控件 Ext.window.Window 74 三、布局控件 Ext.container.Viewport 77 第十章 ...
本篇文章主要介绍了详解jquery插件jquery.viewport.js学习使用方法,具有一定的参考价值,有兴趣的可以了解一下
那个深入浅出ext作者比我还懒 viewport存放Ext.panel对象,其容器中的成员可以以borderlayout方式布局
1. Renamed Coolite.Ext.Web project to Ext.Net 2. Renamed Coolite.Examples project to Ext.Net.Examples 3. Renamed Coolite.Ext.UX project to Ext.Net.UX 4. Renamed Coolite.EmbeddedResourceBuilder ...
16. `tabpanel` - `Ext.TabPanel`:选项卡面板,用于组织内容到不同的选项卡中。 17. `treepanel` - `Ext.tree.TreePanel`:树形面板,展示层次结构的数据。 18. `viewport` - `Ext.ViewPort`:视口组件,用于填充...
5.3 使用ViewPort 5.4 Ext.tab.Panel页签 5.5 本章小结 第6章 常用工具类与函数 6.1 非常有用的Ext.core.Element 6.2 Ext常用函数 6.2.1 Ext.onReady() 6.2.2 Ext.get() 6.2.3 Ext.select() 6.2.4 ...
- `tabpanel`:`Ext.TabPanel`,分页容器,每个页签代表一个单独的面板。 - `treepanel`:`Ext.tree.TreePanel`,显示树形结构的数据。 - `flash`:`Ext.FlashComponent`,自3.0版本起支持展示Flash内容的组件。 ...
5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert() 5.2.3 Ext.MessageBox.confirm() 5.2.4 Ext.MessageBox.prompt() 5.2.5 Ext.MessageBox.wait() ...
NULL 博文链接:https://kai2008.iteye.com/blog/350192
5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert() 5.2.3 Ext.MessageBox.confirm() 5.2.4 Ext.MessageBox.prompt() 5.2.5 Ext.MessageBox.wait() ...
本节介绍 Ext的Border布局以及如何创建一个Viewport。 1、Viewport介绍: Viewport 是一类特殊的容器。它创建后会自动填充到整个页面区域,并能自动适应页面缩放。一般作为用用程序全局容器使用。 2、Border布局...
使用EXTJS 开发的DEMO 含有Ext.container.Viewport 使用 使用EXTJS 封装JQUERY的插件 Ext.dashboard.Dashboard 看板布局使用 Ext.tree.Panel 树型控件使用 ACE代码编辑器 在EXTJS中的使用
除了布局之外,Ext还提供了大量的UI组件,如GridPanel,用于创建数据网格。GridPanel允许你显示和操作结构化的数据,支持排序、分页和各种自定义功能。 总的来说,Ext是一个功能强大的工具,能够帮助开发者构建功能...
【EXT4.0使用指南】 EXT4.0是Ext JS框架的一个重要版本,它提供了丰富的用户界面组件和强大的数据管理功能,广泛应用于Web应用程序的开发。这篇指南将着重于EXT4.0的基础知识,帮助初学者快速入门EXT JS的开发。 1...
4.8. 关于表单内部控件的布局问题 4.8.1. 什么都不做,默认的平铺布局 4.8.2. 分裂,分列 4.8.3. fieldset是个神奇的东西 4.8.4. 当某一天,需要往form加个图片什么的,该咋办? 4.9. 还要做文件上传哟 4.10. 非想非...