- 浏览: 212209 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
henchong:
如果提示信息全是数字的话,是不会自动换行的,不知道这个该怎么解 ...
用ExtJs为表格单元格增加Tooltips浮动信息 -
李君寻:
自动换行,算是懂了
ColumnLayout的使用方法 -
icrwen:
楼主能解释下为啥要用air技术呢,是不是只用ext就可以了啊
extjs+air开发 -
wenniuwuren:
不能显示图片..
利用session实现一次性验证码 -
追风筝的孩子:
还是没有解决啊
com.ibatis.sqlmap.client.SqlMapException: There is no statement named 语句名 in thi
使用过Ext的Gird(网格)功能的人都知道它的功能非常强大。
也遇到过当需要将GridPanel的宽度设置为100%的时候(width:100%),
这样grid的宽度变得很长,根本就不是百分百。
查找了一下资料,发现用 bodyStyle:'width:100%' 来设置百分比就可以实现我们想要的效果。
但当我们把浏览器窗口缩小后,GridPanel的最右边被截了一部分。
其实这个也很简单,只要在浏览器窗口改变大小的时候重新设置一下GridPanel的宽度就可以解决我们的问题了。
设置 GridPanel 的 bodyStyle:'width:100%' 和 浏览器窗口改变大小时的事件 完成我们设置GridPanel的宽度。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用百分比设置GridPannel宽度的方法(1)</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../examples/examples.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];
// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height:350,
bodyStyle:'width:100%',
title:'Array Grid'
});
grid.render('grid-example');
grid.getSelectionModel().selectFirstRow();
window.onresize=function(){
grid.setWidth(0);
grid.setWidth(Ext.get("grid-example").getWidth());
};
});
</script>
</head>
<body>
<h1>使用百分比设置GridPannel宽度的方法(1)</h1>
<p>使用过Ext的Gird(网格)功能的人都知道它的功能非常强大。<br>
也遇到过当需要将GridPanel的宽度设置为100%的时候(width:100%),<br>
这样grid的宽度变得很长,根本就不是百分百。<br>
查找了一下资料,发现用 bodyStyle:'width:100%' 来设置百分比就可以实现我们想要的效果。</p>
<p>但当我们把浏览器窗口缩小后,GridPanel的最右边被截了一部分。<br>
其实这个也很简单,只要在浏览器窗口改变大小的时候重新设置一下GridPanel的宽度就可以解决我们的问题了。<br>
</p>
<p>设置 GridPanel 的 bodyStyle:'width:100%' 和 浏览器窗口改变大小时的事件 完成我们设置GridPanel的宽度。</p>
<p> </p>
<p><br />
</p>
<div id='grid-example'></div>
</body>
</html>
发表评论
-
extjs+air开发
2009-06-24 21:41 2992一、准备工作 1、下载adobe air install和ad ... -
带复选框(checkbox)的树
2009-03-20 15:05 1834该例子可以满足我们的一般需求。很多时候我们需要用到带check ... -
ExtJs中解决IE的min-width问题
2009-02-27 22:14 752当使用了ExtJs后,脚本documentElement.cl ... -
Ext中的动画处理
2009-02-27 22:13 1153CartoonExt.js //图片宽 var WIDTH=3 ... -
Ext.Ajax
2009-02-27 22:12 1164其实Ext.Ajax的使用并不 ... -
巧妙运用NumberField
2009-01-14 15:02 4559巧妙运用NumberField: 只允许字段输入数字. v ... -
Ext.ux.TabCloseMenu插件的使用
2009-01-14 14:59 1544tab在ext里很常用,在点开N个tab后,是否能通过右键菜单 ... -
直接在页面上显示富文本编辑器
2009-01-14 14:58 3251<html> <head> ... -
带右键菜单的树
2009-01-14 14:58 1176ext树形菜单加上右键菜单是不是很酷,ext当然也能实现。 树 ... -
EXT 二级联动下拉列表
2009-01-14 14:57 2554page.html代码如下 <!DOCTYPE HTM ... -
带搜索功能的grid分页实例
2009-01-09 13:43 1548本实例将在带分页的表格基础上进行扩展,增加搜索功能。由于本实例 ... -
带分页的表格
2009-01-09 13:43 1011主要介绍如何使用ext的表格控件实现ajax分页。 上一节讲了 ... -
树形下拉框
2009-01-09 13:43 2542<!DOCTYPE HTML PUBLIC " ... -
支持手写输入及联想功能的下拉框
2009-01-09 13:42 2854<!DOCTYPE HTML PUBLIC " ... -
让ext项目步入对象化编程
2009-01-09 13:39 808对于一些刚刚接触javascript的人来说大部分都在使用面向 ... -
grid的继承类,构建方便的grid操作
2009-01-09 13:13 1410在以往建立grid的时都要 ... -
ext异步加载树的子节点
2009-01-09 13:12 1944<script> Ext.o ... -
可拖拽的tree实际应用
2009-01-09 12:54 1780ext提供的树本身就有拖 ... -
可直接编辑节点的tree
2009-01-09 12:03 1681其实代码并不是很复杂,只是在原有的树形添加一个TreeEdit ... -
Checkbox与RadioGroup的使用方法
2009-01-09 12:03 7053Ext提供的Checkbox与Radio, ...
相关推荐
文华财经指标公式使用操作指南黄金分割画线方法技巧指标公式百分比线使用方法.doc
sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色,居中,自动换行,宽度,百分数展示等
Div设置最小宽度,下面针对两种情况:body里有浮动元素、当浏览器的宽度小于了1350之后,为大家详细介绍下具体的应付方法
今天小编就为大家分享一篇layui table 列宽百分比显示的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
但page没有设置高度、宽度呀,所以这是后设置百分比就属于失效的,想让它全屏那就直接设置父元素的宽高 (此图片来源于网络,如有侵权,请联系删除! ) 效果是不是出来啦 (此图片来源于网络,如有侵权,
常见地分数、小数及百分数地互化,常用平方数、立方数及各种计算方法.pdf常见地分数、小数及百分数地互化,常用平方数、立方数及各种计算方法.pdf常见地分数、小数及百分数地互化,常用平方数、立方数及各种计算方法....
C#获取CPU、内存、硬盘当前使用百分比函数。
VB使用百分比进度条显示内存使用率,vb简单功能代码
当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果我们不想让他换行显示那要怎么办呢?看到这个标题很容易就会想到截断文字加“…”的做法。 一般的文字截断(适用于内联与块): =======...
方法二:使用format()方法 另一种将数值转换为百分数的方法是使用format()方法。例如,将0.75转换为百分数,可以使用以下代码: ``` python-百分比运算全文共3页,当前为第1页。 x = 0.75 python-百分比运算全文共3...
查看表空间大小及已经使用的百分比 复制代码 select a.tablespace_name,a.bytes/1024/1024 "Sum MB", (a.bytes-b.bytes)/1024/1024 "used MB", b.bytes/1024/1024 "free MB", round(((a.bytes-b.bytes)/a....
我们使用一种方法来计算强子的电荷半径,而无需依赖模型的动量外推。 该方法不需要在扭曲的边界条件下进行额外的夸克繁殖者反演,也不需要计算夸克繁殖者的动量导数,因此易于实现。 我们将此方法应用于介子电荷半径...
关键点:自适应,这个时候就不能使用固定的CSS宽度值,这个时候就只能使用百分比的宽度表达宽度。 关键代码:width:?% 以百分比为单位的百分比值,自然对象会根据设置百分比自动计算该对象宽度。 实例CSS代码...
用百分比设定元素的宽度,一般情况是指参考父元素的宽度,当position是fixed或absolute时,百分比是参考屏幕的宽度
一、当我们用Python matplot时作图时,一些数据需要以百分比显示,以更方便地对比模型的性能提升百分比。 二、借助matplotlib.ticker.FuncFormatter(),将坐标轴格式化。 例子: # encoding=utf-8 import ...
百分比布局的延伸,百分比布局自动适配。
自定义view
jsp中百分比表示方法
通过自定义属性实现控制圆盘的颜色和百分比,