extjs 改变gridPanel 底部分页栏方框的大小及一页可展示的分页数方法 - JavaScript当前位置:& &&&extjs 改变gridPanel 底部分页栏方框的大小及一页可extjs 改变gridPanel 底部分页栏方框的大小及一页可展示的分页数方法&&网友分享于：&&浏览：0次extjs 改变gridPanel 底部分页栏方框的大小及一页可显示的分页数方法
改变gridPanel底部分页栏方框的大小在创建的分页工具条加inputItemWidth
var pagingbar = Ext.create('Ext.toolbar.Paging',{
store: unitInfoGridStore,//必须得跟上面的的store来源一样
itemId: 'pagingbar',
displayInfo: true,
pageSize: 10,
dock: 'bottom',
displayMsg:'显示第{0}条到{1}条,一共{2}条',
firstText: '首页',
nextText: '下一页',
prevText: '上一页',
lastText: '最后一页',
refreshText: '刷新',
inputItemWidth: 50,//这里是改变gridPanel底部分页栏方框的大小
items:['-','每页',pagesizeCombo(),'条'],
// plugins : [new Ext.ux.PageSizePlugin()],
emptyMsg:'没有需要显示的记录'
//实现一页可以有选择的显示记录数
var pagesizeCombo = function(){
return new boBox({
store: new Ext.data.SimpleStore({
fields: ['id', 'value'],
data: [['10', 10], ['20', 20], ['30', 30], ['50', 50],['100',100]]
mode: 'local',
displayField: 'id',
valueField: 'value',
editable: false,
allowBlank: false,
triggerAction: 'all',
width: 60,
listeners:{
render: function(comboBox){
comboBox.setValue(comboBox.ownerCt.pageSize);
//使得下拉菜单的默认值是初始值
select: function(comboBox){
var pSize = comboBox.getValue();
comboBox.ownerCt.getStore().pageSize = parseInt(pSize); //改变PagingToolbar的pageSize 值
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有&>&&>&&>&&>&Ext Grid表格的自动宽度及高度的实现
Ext Grid表格的自动宽度及高度的实现
上传大小：2KB
Ext Grid表格的自动宽度及高度的实现
综合评分：3.7（3位用户评分）
所需积分：1
下载次数：4
审核通过送C币
创建者：caozhy
创建者：nigelyq
创建者：stephen1315
课程推荐相关知识库
上传者其他资源上传者专辑
开发技术热门标签
VIP会员动态
android服务器底层网络模块的设计方法
所需积分：0
剩余积分：720
您当前C币：0
可兑换下载积分：0
兑换下载分：
兑换失败，您当前C币不够，请先充值C币
消耗C币：0
你当前的下载分为234。
Ext Grid表格的自动宽度及高度的实现
会员到期时间：
剩余下载次数：
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
在这里是面向程序员的高品质IT技术学习社区,是程序员学习成长的地方。让我们更好地用技术改变世界。请关注新浪微博号： IT国子监（/itguozijian）
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
有三种方法解决此问题：&第一种是：& & &设置grid自适应宽度，首先要清楚grid放在什么容器中，设置该容器的layout:fit就行了。比如页面上如果只放置一个grid，一般改成用 Viewport，再在Viewport中包含grid就能解决问题了。{region:'center',layout:'fit',items:grid}&第二种是：& & &div: &&Js代码&&div&id="divID"&style="width:100%"&&/div&&&&&&&&&&&var&width&=&Ext.get("divID").getWidth();&&&&&&&&&&&alert(width);//&此时宽度为div的数字宽度。如1265&&&&&&&&&&&//&赋值到grid上相当于&&&&&&&&new&Ext.grid.GridPanel({&&&&&&&&&&&width:&1265....&&&&&&&}); &第三种是：& &在GridPanel里加上 bodyStyle:'width:100%',&例子：Js代码Js代码&&pre&class="js"&name="code"&&&&&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%',这个也试成功了&&/pre&&&& &(记得关注噢)&
阅读(3163)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'Extjs Grid表格的自动宽度及高度的实现(适应不同显示器的方法)',
blogAbstract:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}> 博客详情
刚才纠结的调整新项目的页面，其中的一个gridpanel一直没有办法正确显示
var reviewTaskPaenl = new Ext.Panel({
layout:'border',
region:'north',
height:300,
layout:'fit',
title:'文件列表',
border:false,
reviewFilePanel
region:'center',
layout:'fit',
border:false,
sqlStatementTabPanel
tbar:taskHandlePanel
外层的panel是border类型的，内部三个部分，顶部是tbar栏，然后是filepanel，接下来是statementpanel
filepanle是一个gridpanel
var reviewFilePanel = new Ext.grid.GridPanel({
cm:reviewFileStoreCm,
store:reviewFileStore,
stripeRows:true,
loadMask:true,
trackMouseOver:true,
//bodyStyle:"height:100%;width:100%",
autoScroll:true
现象就是下图这样
试了各种布局都不好使，网上的解决方案是在最外层的panel中使用viewport，然后viewport用fit布局，内部在嵌入gridpanel，是可以自适应了，但是viewport就是整页都显示一个paenl了。
最终的解决方案是在gridpaenl中加bodystyle，通过CSS来调整
var reviewFilePanel = new Ext.grid.GridPanel({
cm:reviewFileStoreCm,
store:reviewFileStore,
stripeRows:true,
loadMask:true,
trackMouseOver:true,
bodyStyle:"height:100%;width:100%",
autoScroll:true
最终终于实现了要求
总结一下，EXT的layout其实挺讨厌的，之前没有做个swing的程序，一直都是用div或者table来布局，这两天画界面各种纠结。ext的文档上有一些常用的布局和demo，没事的时候多看看。
人打赏支持
码字总数 286708
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥
& 开源中国(OSChina.NET) |
开源中国社区(OSChina.net)是工信部
指定的官方社区