pagingToolbar求高手

Question

      bbar: {
                 xtype: 'paging',
                 pageSize: 5,
                 displayInfo: true,
                 displayMsg: 'Record <b>{0}</b> to <b>{1}</b> of <b>{2}</b>',
                 buttonAlign: 'right',
                 style : {
                  textAlign:'left'},
                 labelStyle : 'text-align:left',
                 autoWidth: true,
                // id: idPrefixMonitorRepoPlanSrchCri + 'pagingToolbar'
                 }
是这样的，想实现一个分页条，然后我把按钮放在右边（buttonAlign: 'right'）,而显示的dispalyMsg想放在左边，但是用实现不了 style : {textAlign:'left'},labelStyle : 'text-align:left'这两个都实现不了，求高手解决。

Answer 1

http://zha-euc03-w7.corp.oocl.com:7001/wls_prs_bcr/secured/errortab/errorintab/display

Answer 2

反正就是一个pagingtoolbar的样子，不是有一堆换页和一个'displayMsg'两个field嘛，把换页的功能居右边就是buttonAlign: 'right',‘displayMsg’居左边该怎么做？

Answer 3

查了下api，没发现toolbar组件支持displayMsg属性配置，是什么？
你的意思是要在按钮左边显示一个文本提示是不？bbar: new Ext.Toolbar({buttonAlign: 'right',
items:[
{
xtype:'label',
text:'提示',
},
{
xtype: 'paging',
pageSize: 5,
displayInfo: true
}
]
})这样行么？

Answer 4

有支持dispalyMsg这个属性的，你写上去就知道是什么了。。那个加图片怎么用URL的啊，要不然我插个图片给你看下你应该就明白了。

Answer 5

我的ext版本可能低了（3.0），试了的确不支持该属性
插图可以先上传到自己的空间相册，然后直接复制地址过来

Answer 6

还是传一把xx，无语，要右键图片属性，copy他的url

Answer 7

右边底下会不会给遮住了，你打开整个URL看下。

Answer 8

看到图片了，但看不出什么来
是想把No data to display 弄左边去么？ 

Answer 9

如果看到图片了，如果有数据会显示‘Record 1 to 13 of 13’，没数据则会显示‘No data to display'，
现在我就是想把'No data to display'这个移到最左边，也就是'searchResult'字体的上边。

Answer 10

我当时是想修改.x-toolbar-cell .xtb-text这个div的CSS的margin-right属性就行了，但是我发现toolbar里那个'page'这个field的CSS类是一样的，就像你早上说的一改动一个全部都会变了，所以'page'这个field也会自动margin-right了。

Answer 11

要实现这个实在没必要动css
直接在前面加两个label组件（box也可以，实际只要可以配置html的都行，方法就像我上面贴的代码里面那样），配置其html或text属性，左边一个就放No data to display的文本，中间一个不配置内容，控制好宽度，把左边一个label挤到左边searchResult那儿就行了

Answer 12

这个dispalyMsg不是一个普通的label组件来的，它是记录你的数据量来显示的，所以不能用普通的label去代替，唯一能做的是只有修改CSS了，真的没有其它办法的了。只是正好它的CSS类名和'page'这个field的类名是一样的，让我不知道怎么去修改它。我现在只是一名实习生，这个问题是我的头让我去修改的，如果你也没办法就算了，麻烦了你一天也挺不好意思的，很感谢你。

Answer 13

gridPanel.on('rowclick',function(grid,index,row){//gridPanel为GridPanel对象
var tables=Ext.getDom(grid.body).getElementsByTagName('table');
var defColor="#ffffff";//这个是非选中的行背景色
var selectColor="#ff0000";//这个是选中行背景色
for(var i=1;i<tables.length;i++)
{
  var row=tables[i].rows[0];  
  if(i==index+1) row.style.backgroundColor=selectColor;
  else row.style.backgroundColor=defColor;
}
}
虽然实现了，但我很不满意，直接操作html了,不知道可能会出现什么问题

Answer 14

你的问题可以试着用发错的那一楼的思路做，尝试Ext.getDom获取到dom对象（html）来直接操作，但这样操作不能预料可能会引起的问题

Answer 15

嗯，我是通过直接获取dom对象里面的id来实现操作的，但是正如你所说会产生问题的，这种方法肯定是不可取的。