Ext.ux.form.ItemSelector 数据项超过高度时，出现X轴滚动条 -
- ITeye技术网站
博客分类：
使用过【Ext.ux.form.ItemSelector】的扩展地球人都知道，这个组件还是比较好用的，然而数据项过多超过它显示高度时
，就有两个自带的问题
一、多余的数据项就不显示，这个问题到歌谷、百度一搜就知道了，修改ext-all.css，结果Y轴就出现滚动条。
.x-fieldset-body {
OVERFLOW: auto
效果图如下所示（X与Y轴滚动条）
二、组件的X轴的滚动条也出现了，而正常是应该只会有Y轴滚动条，当然每条显示的数据项长度都比较少，解决方法依然修改ext-all.css
.x-fieldset-body {
overflow-x:
overflow-y:
效果图如下所示（Y轴滚动条）
这样就比较好看了，当然如果数据项比较长的话，也会不显示，自己可以根据实际调整显示的宽度或样式。
qingfeng200468
浏览: 26296 次
来自: 上海
这个模板有没有说明呢，启是启动了，可是访问不了啊color=r ...
jackra 写道josico 写道jackra 写道webs ...
josico 写道jackra 写道webservice这个东 ...
jackra 写道webservice这个东西比较鸡肋尤其是相 ...
支持，很有用处EXTJS滚动条的问题的相关文章推荐-javascript-电脑编程网我在一个window里面嵌套了一个toolbar和一个panel我设置window的autoScroll为true，但是滚动条滚动的时候toolbar就不显示了！我需要在panel里面显示滚动条，求解决方案！------回答---------------其他回答（10分）---------CSS code将toolbar设置成window的对象，不要设置panel的toolbar也可以改变布局方式，window里放一个panel，panel放一个toolbar、panel最后一个panel设置滚动条即可------其他回答（10分）---------如果toolbar 和 panel 同级的话，估计是panel高度或宽度过大，压盖了toolbar， 你调整下两者的位置和大小。测试可以在两者之间加个其他明显的标记，比如使panel的border显示出来呀。------其他回答（10分）---------路过，积点分------其他回答（10分）---------自己测试下哈将window和...作者：yuan1238　和相关　相关专题文章：例如DIV的宽度和高度分别是500*400初始化的时候就有一个tab且宽和高占满了DIV但新增一个tab的时候宽度和高度都比原先的数值大，出现了滚动条，而我想让它占满DIV代码：var tab = new Ext.TabPanel({width : divWidth,//返回500height :
divHeight,//返回400renderTo: listDivId,autoDestroy:false,title : 'fffff...作者：M2276699　和相关　在有些网站（比如）的评论是在滚动条滚动到评论的位置才去加载评论的，这用到了JS的什么事件，怎么实现的？------回答---------------其他回答（30分）---------&body onscroll=&这里写个函数判断滚动条到哪了，是否继续加载评论&&另外，那些都是客户端的js实现的，你可以查看他们的源代码即可------其他回答（10分）---------scr...作者：daniel_duan　和相关　用JS模拟了一个滚动条。理想状态是：用户在该DIV里滚动鼠标的滚轮，那么浏览器的滚动条是不动的。但如果用户在DIV外滚动鼠标的滚轮，那么滚动的将是浏览器的滚动条。目前出了一个问题IE下，我只需要onmousewheel事件里return false，浏览器的滚动条是会不动的。但其它浏览器下，我鼠标在DIV里滚动滚轮，浏览器的滚动条一起动了，怎么解决。------回答---------------其他回答（40分）---------HTM...作者：guoerwei　和相关　jquery的autocomolete插件，设置了滚动属性，在Chrome里正常，但是在IE8里不出现滚动条，有没有遇到类似问题的，怎么解决？/problems/35407这里有个一样问题的，但是解答看不明白------回答---------------其他回答（15分）---------这个插件倒是用过，但没碰到那个问题。------其他回答（20分）---------IE6,firefox...作者：Silence_Smile　和相关　ExtJs 就是把显示层（html）的东西交给客户端业务层（javascript）做了。这合理吗？页面代码严重耦合了。比如想给网站换个样子，一般思路是换个.css即可，但如果使用extjs需要重写javascript啊！ 我=菜鸟；菜鸟=发表谬论；return 大家的高见！------回答---------------其他回答（20分）---------顶楼上的，一般如果是要发布到网上的网站我建议最好就是不要全部用 ext 来做界面，1...作者：wupengfei1987　和相关　有Ext.ux.plugins.GroupHeaderGrid表头的grid 能不能实现LockingGrid的效果? 怎样实现?------回答---------------其他回答（20分）---------不懂EXTJS,帮顶...------回答---------------其他回答（20分）---------不懂EXTJS,帮顶......作者：kael_fk_　和相关　到网上查资料给ext的文本框添加了一个点击事件（该文本框在window1中），处理这个事件的函数写上window.open(.....),这个窗口中显示的一个grid（这个窗口为window2），里面的数据是从后台获得。事件的添加方法：form_name.findById('type').getEl().dom.attachEvent('onclick',choiceType);但是现在出现了一个问题：我第一次点击这个文本框是，数据显示...作者：kakaroot_cl　和相关　我在一个window里面嵌套了一个toolbar和一个panel我设置window的autoScroll为true，但是滚动条滚动的时候toolbar就不显示了！我需要在panel里面显示滚动条，求解决方案！------回答---------------其他回答（10分）---------CSS code将toolbar设置成window的对象，不要设置panel的toolbar也可以改变布局方式，window里放一个panel，pan...作者：yuan1238　和相关　我要在页面上面用livegird显示100W条数据,在IE7下面显示都很正常,但是在IE8下把滚动条拉到最下面来，最多只能显示到17-18W条，大家有这样的经历吗,请遇到过的解答哦...谢谢(客户要求不能分页)------回答---------------其他回答（30分）---------崩溃……100万条数据显示一页面上...还真没碰过这样的情况，期待答案------其他回答（10分）---------引用 2 楼 tongbei_...作者：tongbei_stone　和相关　获取GridPanel的总行数.?1. grid.getStore().getCount();??????? //未分页时 , 获取总行数2. grid.getStore().getTotalCount();??? //存在分页时 , 获取总行数3. grid.getView().getRows().? ?grid.getView().getRows() : 返回所有行,这些行不是ExtJS的封装类对象,而是TR元素对象,...作者：明天的昨天　和相关　elbertchen 的BLOG
用户名：elbertchen
文章数：145
评论数：29
访问量：232889
注册日期：
阅读量：26005
[匿名]非常感谢：
51CTO推荐博文
1.申明控制参数
var progressBar = {};//显示窗体
var tcount = 0;var count = 0; //计数器var bartext = ""; var curnum = 0;var beloaded = //是否加载成功
2.申明进度任务
var task = {
run : function() {tcount++;count = count + 5;// 时间大于200秒if (count &= 94) {if (beloaded == false) {count = count - 5;}}if (count &= 100) {progressBar.hide();Ext.TaskMgr.stop(task); //做完停止任务，非常重要count = 0; //清空计数器，及相关变量bartext = "";curnum = 0;tcount = 0;}if (beloaded == true) {count = 100;}curnum = count / 100;bartext = curnum * 100 + "%";progressBar.updateProgress(curnum, bartext);},interval : 500};
3. 开始加载滚动条窗体
function SetProgressBar() {tcount = 0;count = 0;bartext = "";curnum = 0;beloaded =progressBar = Ext.Msg.show({msg : "正在加载数据，请稍候...",progress : true,width : 300});Ext.TaskMgr.start(task);}
4. 在数据加载结束的地方设置beloaded=控制task任务使之为100%，并隐藏滚动条窗体
log_treeloader.on('load', function(obj, node, response) {beloaded =if ((response.responseText.search('db_insert_error_j')) &= 0) {alert(response.responseText);}count = 100;});
了这篇文章
类别：┆阅读(0)┆评论(0)Extjs展开更多内容后滚动条的问题
Extjs4.0.7版本中，有一个例子，能够展开更多内容，使用的是Ext.grid.Panel，并在其中加入了rowexpander组件，实现了展开更多内容。下载extjs4.07包后解压，打开ext-4.0.7-gpl/examples/grid/grid-plugins.html
即可看到该例子。效果如下，点击每一项左侧的加号即可展开更多内容。
js代码如下
var grid1 = Ext.create('Ext.grid.Panel', {
store: getLocalStore(),
columns: [
{text: "Company", flex: 1, dataIndex: 'company'},
{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{text: "Change", dataIndex: 'change'},
{text: "% Change", dataIndex: 'pctChange'},
{text: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
width: 600,
height: 300,
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : [
Company: {company}
Summary: {desc}'
collapsible: true,
animCollapse: false,
title: 'Expander Rows in a Collapsible Grid',
iconCls: 'icon-grid',
renderTo: Ext.getBody()
用起来很简单，但是在我自己使用的时候发生了一个很悲剧的事情，那就是展开的时候，滚动条没有出来，下方的东西无法查看，仔细和官方例子比对了很久，一模一样的，没有任何改动，为啥滚动条就是不出来。
后来经过多次尝试，终于发现问题所在，官方的例子最初滚动条就是存在的，而我实现的表格，最初是没有滚动条，展开更多内容后也没有滚动条，但是把表格最小化然后再最大化显示，滚动条就出现了。
最终得出的结论：如果最初滚动条没有出现，展开后表格大小并没有改变，需要重新加载表格才能正确识别表格的大小，然后正确加载出滚动条（应该是Extjs本身的bug）
解决方案：在展开事件响应函数中加入表格刷新操作；该响应函数在这个js文件中实现RowExpander.js，加入一个刷新操作即可。this.view.up('gridpanel').view.refresh();
Ext.define('Ext.ux.RowExpander', {
& & extend:
'Ext.AbstractPlugin',
& & requires: [
& 'Ext.grid.feature.RowBody',
& 'Ext.grid.feature.RowWrap'
& & alias:
'plugin.rowexpander',
& & rowBodyTpl: null,
& & expandOnEnter:
& & expandOnDblClick:
& & selectRowOnExpand:
& & rowBodyTrSelector:
'.x-grid-rowbody-tr',
& & rowBodyHiddenCls:
'x-grid-row-body-hidden',
& & rowCollapsedCls:
'x-grid-row-collapsed',
& & renderer:
function(value, metadata, record, rowIdx, colIdx) {
& if (colIdx === 0) {
metadata.tdCls = 'x-grid-td-expander';
& return '
& & constructor: function()
& this.callParent(arguments);
& var grid = this.getCmp();
& this.recordsExpanded = {};
& if (!this.rowBodyTpl) {
Ext.Error.raise("The 'rowBodyTpl' config is required and is not
defined.");
& // TODO: if XTemplate/Template receives a
template as an arg, should
& // just return it back!
& var rowBodyTpl = Ext.create('Ext.XTemplate',
this.rowBodyTpl),
& & & features =
& & ftype: 'rowbody',
& & columnId:
this.getHeaderId(),
& & recordsExpanded:
this.recordsExpanded,
& & rowBodyHiddenCls:
this.rowBodyHiddenCls,
& & rowCollapsedCls:
this.rowCollapsedCls,
& & getAdditionalData:
this.getRowBodyFeatureData,
& & getRowBodyContents:
function(data) {
& return rowBodyTpl.applyTemplate(data);
& & ftype: 'rowwrap'
& if (grid.features) {
grid.features = features.concat(grid.features);
& } else {
grid.features =
& // NOTE: features have to be added before init
(before Table.initComponent)
& & init: function(grid)
& this.callParent(arguments);
& // Columns have to be added in init (after
columns has been used to create the
& // headerCt). Otherwise, shared column configs
get corrupted, e.g., if put in the
& // prototype.
& grid.headerCt.insert(0,
this.getHeaderConfig());
& grid.on('render', this.bindView, this, {single:
& & getHeaderId: function()
& if (!this.headerId) {
this.headerId = Ext.id();
& return this.headerId;
& & getRowBodyFeatureData:
function(data, idx, record, orig) {
Ext.grid.feature.RowBody.prototype.getAdditionalData.apply(this,
arguments),
& & & id =
this.columnId;
& o.rowBodyColspan = o.rowBodyColspan - 1;
& o.rowBody = this.getRowBodyContents(data);
& o.rowCls =
this.recordsExpanded[record.internalId] ? '' :
this.rowCollapsedC
& o.rowBodyCls =
this.recordsExpanded[record.internalId] ? '' :
this.rowBodyHiddenC
& o[id + '-tdAttr'] = ' valign="top" rowspan="2"
& if (orig[id+'-tdAttr']) {
o[id+'-tdAttr'] += orig[id+'-tdAttr'];
& & bindView: function()
& var view = this.getCmp().getView(),
& if (!view.rendered) {
view.on('render', this.bindView, this, {single: true});
& } else {
& & & viewEl =
view.getEl();
(this.expandOnEnter) {
& & this.keyNav =
Ext.create('Ext.KeyNav', viewEl, {
& 'enter' : this.onEnter,
& scope: this
(this.expandOnDblClick) {
& & view.on('itemdblclick',
this.onDblClick, this);
& & & this.view
& & onEnter: function(e)
& var view = this.view,
& = view.store,
& = view.getSelectionModel(),
& & & sels =
sm.getSelection(),
& = sels.length,
& for (; i & i++) {
& & & rowIdx =
ds.indexOf(sels[i]);
this.toggleRow(rowIdx);
& & toggleRow:
function(rowIdx) {
& var rowNode = this.view.getNode(rowIdx),
& & & row =
Ext.get(rowNode),
& & & nextBd =
Ext.get(row).down(this.rowBodyTrSelector),
& & & record =
this.view.getRecord(rowNode),
& & & grid =
this.getCmp();
& if (row.hasCls(this.rowCollapsedCls)) {
row.removeCls(this.rowCollapsedCls);
nextBd.removeCls(this.rowBodyHiddenCls);
this.recordsExpanded[record.internalId] =
this.view.fireEvent('expandbody', rowNode, record,
nextBd.dom);
& } else {
row.addCls(this.rowCollapsedCls);
nextBd.addCls(this.rowBodyHiddenCls);
this.recordsExpanded[record.internalId] =
this.view.fireEvent('collapsebody', rowNode, record,
nextBd.dom);
& // If Grid is auto-heighting itself, then
perform a component layhout to accommodate the new height
& if (!grid.isFixedHeight()) {
grid.doComponentLayout();
this.view.up('gridpanel').invalidateScroller();
this.view.up('gridpanel').view.refresh();
& & onDblClick:
function(view, cell, rowIdx, cellIndex, e) {
& this.toggleRow(rowIdx);
& & getHeaderConfig:
function() {
& var me & &
& & & toggleRow
& = Ext.Function.bind(me.toggleRow, me),
selectRowOnExpand = me.selectRowOnE
& return {
this.getHeaderId(),
& & & width:
& & & sortable:
& & & resizable:
& & & draggable:
& & & hideable:
menuDisabled: true,
& & & cls:
Ext.baseCSSPrefix + 'grid-header-special',
& & & renderer:
function(value, metadata) {
& & metadata.tdCls =
Ext.baseCSSPrefix + 'grid-cell-special';
& & return '
processEvent: function(type, view, cell, recordIndex, cellIndex, e)
& & if (type == "mousedown"
&& e.getTarget('.x-grid-row-expander')) {
& var row = e.getTarget('.x-grid-row');
& toggleRow(row);
& return selectRowOnE
然后就OK了 哈哈哈哈哈
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。Extjs gridpanel 出现横向滚动条问题的解决方法
阅读：964次&&&时间： 14:11:31&&
复制代码 代码如下:viewConfig : { layout : function() { if (!this.mainBody) {
// not rendered } var g = this. var c = g.getGridEl(); var csize = c.getSize(true); var vw = csize. if (!g.hideHeaders && (vw & 20 || csize.height & 20)) { // display: // none?
} if (g.autoHeight) { if (this.innerHd) { this.innerHd.style.width = (vw) + 'px'; } } else { this.el.setSize(csize.width, csize.height); var hdHeight = this.mainHd.getHeight(); var vh = csize.height - (hdHeight); this.scroller.setSize(vw, vh); if (this.innerHd) { this.innerHd.style.width = (vw) + 'px'; } } if (this.forceFit) { if (this.lastViewWidth != vw) { this.fitColumns(false, false); this.lastViewWidth = } } else { this.autoExpand(); this.syncHeaderScroll(); } this.onLayout(vw, vh); } }
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
Copyright &
All Rights Reserved