- 浏览: 212637 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
henchong:
如果提示信息全是数字的话,是不会自动换行的,不知道这个该怎么解 ...
用ExtJs为表格单元格增加Tooltips浮动信息 -
李君寻:
自动换行,算是懂了
ColumnLayout的使用方法 -
icrwen:
楼主能解释下为啥要用air技术呢,是不是只用ext就可以了啊
extjs+air开发 -
wenniuwuren:
不能显示图片..
利用session实现一次性验证码 -
追风筝的孩子:
还是没有解决啊
com.ibatis.sqlmap.client.SqlMapException: There is no statement named 语句名 in thi
bodyStyle:'width:100%',
autoWidth:true,
淘汰的方法有下面二种实现:
不知是Ext的Bug还是其他原因,当初始化grid并将宽度设为100%时,其宽度会变成10000px宽,高度100%则grid高度根据grid内容自适应,而不是根据其所在容器自适应,一直没有很好的办法,只能使用绝对宽高,但有时这是很不方便的。
对此问题一直耿耿于怀,后来终于想出了一个办法,还真的可行,但就是感觉有点蹩脚。
一般我们都通过render到指定id的层上来展现grid,虽然不能让grid宽高自适应,但层还是可以的。
如我们这里要用到的层是<div id="orgGrid"></div>。我们可以在这个层上设置高宽。
如<div id="orgGrid" style="width:100%;height:250px"></div>。
则在初始化grid的时候让其宽高与orgGrid宽高相同即可,并在页面resize时重新计算器宽度即可(一般高度固定还是比较好)。
js代码如下:
//..前面若干行代码省略,如ds/colmodel等
var orgGrid=Ext.get("orgGrid"); //展示grid的容器
var grid = new Ext.grid.GridPanel({
title:"人员管理",
ds: ds, //数据源
cm: colModel, //列模式
sm:selMode, //选择模式
width:orgGrid.getComputedWidth(),
height:orgGrid.getComputedHeight(),
autoExpandColumn:"memory", //自动扩展宽度的列
autoScroll:true,
loadMask:{msg:"数据加载中,请稍等..."}
});
ds.load();
grid.render(orgGrid); //把grid铺到id为grid的容器中
window.onresize=function(){
grid.setWidth(0);
grid.setWidth(orgGrid.getComputedWidth());
};
这样不论页面宽度怎么变化grid都会自适应页面容器了。
========================================================================
Ext.grid.grid的宽度100%的问题2007-08-24 10:20找了很久,终于是实现了。部分代码如下,希望能给大家提供帮助:
var Result_234=function(){
var grid;
return {
init : function() {
var CW=Ext.get("div_displayResult").getWidth();//容器宽度
var C1Width=CW*20/100-10;
var C2Width=CW*20/100-10;
var C3Width=CW*20/100-10;
var C4Width=CW*20/100-10;
var C5Width=CW*20/100-10;
var recordType = Ext.data.Record.create([
{name: "id", type: "int"},
{name: "agentCity", mapping: "vo.agentCity", type: "string"},
{name: "arrivalAirport", mapping:"vo.arrival", type: "string"},
{name: "departureAirport", mapping:"vo.departure", type: "string"},
{name: "date", mapping: "vo.date",type: "string"},
{name: "passengerQuantity", mapping: "vo.passengerQuantity",type: "int"}
]);
var ds = new Ext.data.Store({
proxy: new Ext.data.DWRProxy(CTResult.domLsodOsldPaxReport, true),
reader: new Ext.data.ListRangeReader({
totalProperty: 'totalSize',
id: 'id'
}, recordType),
remoteSort: true
});
var cm = new Ext.grid.ColumnModel(
[
{
id: 'agentCity',
header: '销售城市',
width: 250,
sortable: true,
dataIndex: 'agentCity',
width: C1Width
},
{
header: '到达',
width: 250,
sortable: true,
dataIndex: 'arrival',
width: C2Width
},
{
header: '出发',
width: 250,
sortable: true,
dataIndex: 'departure',
width: C3Width
},
{
header: '日期',
width: 250,
sortable: true,
dataIndex: 'date',
width: C4Width
},
{
header: '比例',
width: 250,
sortable: true,
dataIndex: 'passengerQuantity',
width: C5Width
}
]
);
grid = new Ext.grid.EditorGrid('mygrid', {
ds: ds,
cm: cm,
trackMouseOver: true,
loadMask: true,
autoExpandColumn: 'agentCity',
fitContainer: true
});
grid.render();
var gridFoot = grid.getView().getFooterPanel(true);
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 5,
displayInfo: true,
displayMsg: 'display {0} - {1} of {2}',
emptyMsg: "no record"
});
ds.on('beforeload', function() {
ds.baseParams = {
param1: 'test111',
param2: true
};
});
ds.load({params:{start:0, limit:5}});
},
testx:function(){
AMAR.displayQueryResultT(grid);
}
};
}();
gridPanel=new Ext.GridPanel(grid, {closable: false, fitContainer: true})
发表评论
-
extjs+air开发
2009-06-24 21:41 2995一、准备工作 1、下载adobe air install和ad ... -
带复选框(checkbox)的树
2009-03-20 15:05 1837该例子可以满足我们的一般需求。很多时候我们需要用到带check ... -
ExtJs中解决IE的min-width问题
2009-02-27 22:14 755当使用了ExtJs后,脚本documentElement.cl ... -
Ext中的动画处理
2009-02-27 22:13 1159CartoonExt.js //图片宽 var WIDTH=3 ... -
Ext.Ajax
2009-02-27 22:12 1168其实Ext.Ajax的使用并不 ... -
使用百分比设置GridPannel宽度的方法
2009-01-14 15:03 1622使用过Ext的Gird(网格)功 ... -
巧妙运用NumberField
2009-01-14 15:02 4562巧妙运用NumberField: 只允许字段输入数字. v ... -
Ext.ux.TabCloseMenu插件的使用
2009-01-14 14:59 1546tab在ext里很常用,在点开N个tab后,是否能通过右键菜单 ... -
直接在页面上显示富文本编辑器
2009-01-14 14:58 3253<html> <head> ... -
带右键菜单的树
2009-01-14 14:58 1179ext树形菜单加上右键菜单是不是很酷,ext当然也能实现。 树 ... -
EXT 二级联动下拉列表
2009-01-14 14:57 2558page.html代码如下 <!DOCTYPE HTM ... -
带搜索功能的grid分页实例
2009-01-09 13:43 1552本实例将在带分页的表格基础上进行扩展,增加搜索功能。由于本实例 ... -
带分页的表格
2009-01-09 13:43 1013主要介绍如何使用ext的表格控件实现ajax分页。 上一节讲了 ... -
树形下拉框
2009-01-09 13:43 2548<!DOCTYPE HTML PUBLIC " ... -
支持手写输入及联想功能的下拉框
2009-01-09 13:42 2860<!DOCTYPE HTML PUBLIC " ... -
让ext项目步入对象化编程
2009-01-09 13:39 812对于一些刚刚接触javascript的人来说大部分都在使用面向 ... -
grid的继承类,构建方便的grid操作
2009-01-09 13:13 1415在以往建立grid的时都要 ... -
ext异步加载树的子节点
2009-01-09 13:12 1949<script> Ext.o ... -
可拖拽的tree实际应用
2009-01-09 12:54 1783ext提供的树本身就有拖 ... -
可直接编辑节点的tree
2009-01-09 12:03 1684其实代码并不是很复杂,只是在原有的树形添加一个TreeEdit ...
相关推荐
Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作
Ext的gridpanel控件二次加载时丢失解决方案
将页面的GridPanel中的数据导出到Excel中 测试Ext:版本2.2.1 支持GridSummary,GroupSummary和GroupHeaderPlugin插件 使用方法: 1)把三个JS文件引入到页面中 2)调用例句: var data2Excel = new Ext.icss.Data2...
EXT GridPanel获取某一单元格的值
Ext.grid.GridPanel 删除线 放到example文件夹下运行
使用ext.net代码动态创建gridpanel后任意显示在各种窗口中
EXT实例GridPanel. 实现简单的。
ext.net gridpanel 弹出窗
NULL 博文链接:https://shenhaiquan.iteye.com/blog/1474328
Ext.grid.GridPanel属性祥解, 表格部门的详解,通俗易懂,适合初学人员,以及想对GridPanel有个精析认识的Web开发人员
Ext GridPanel加载完数据后进行操作,比如load数据之后选定某些行数据,下面有个示例,需要的朋友可以参考下
该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
tapestry4.02中封装ext的GridPanel组件
环境:Windows XP sp3、IE 7.0、MS SQL Server 2000、MyEclipse5.5、 Ext 3.2、Tomcat 6.0 使用步骤: 1、下载解压之后,使用IDE打开工程 2、在工程中找到“数据库脚本.sql”文档,然后在查询分析器中生成数据与测试...
NULL 博文链接:https://wv1124.iteye.com/blog/741559
Ext修改GridPanel数据和字体颜色等,不是单指EditGridPanel 首先获取选中的行(当然也可以获取单元格): 代码如下: var selectedRow = grid.getSelectionModel().getSelected(); 修改设置: 代码如下: selectedRow....
Ext.grid.ColumnModel显示不正常
Ext grid panel 滚动条位置不变,适用于实时数据的刷新
详细介绍GridPanel各项属性,ExtJS 普通表格:Ext.grid.GridPanel属性详解