extjs7 classic自定义滚动条导致内容宽度异常
小编:管理员 703阅读 2022.09.06
版本
extjs 7.4.0 classic
原因ext框架会根据浏览器全局滚动条尺寸自动修改内容的style属性以适配宽度,所以局部滚动条样式如果与全局样式不同,会导致异常。
解决设置全局滚动条尺寸
::-webkit-scrollbar { width: 10px; height: 10px; }复制源码
- ext-core/src/layout/ContextItem.js
//修改组件属性 writeProps: function(dirtyProps, flushing) { ... var me = this, el = me.el, target = me.target, styleInfo = me.styleInfo, styles = {}, width = dirtyProps.width, height = dirtyProps.height, styleCount = 0, // used as a boolean, the exact count doesn't matter info, propName, numericValue, hasWidth, hasHeight, isAbsolute, scrollbarSize, style, targetEl, scroller; ... // 当设置宽高且存在滚动条时根据滚动条尺寸调整宽高 if (me.wrapsComponent && Ext.isIE9) { // when we set a width and we have a vertical scrollbar (overflowY), we need // to add the scrollbar width... conversely for the height and overflowX if ((hasWidth = width !== undefined && me.hasOverflowY) || (hasHeight = height !== undefined && me.hasOverflowX)) { // check that the component is absolute positioned. isAbsolute = me.isAbsolute; if (isAbsolute === undefined) { isAbsolute = false; targetEl = me.target.getTargetEl(); style = targetEl.getStyle('position'); me.isAbsolute = isAbsolute = (style === 'absolute'); // cache it } if (isAbsolute) { // 此处获取全局滚动条尺寸 scrollbarSize = Ext.scrollbar.size(); if (hasWidth) { width = parseInt(width, 10) + scrollbarSize.width; styles.width = width + 'px'; ++styleCount; } if (hasHeight) { height = parseInt(height, 10) + scrollbarSize.height; styles.height = height + 'px'; ++styleCount; } } } } // we make only one call to setStyle to allow it to optimize itself: if (styleCount) { el.setStyle(styles); } },复制
- ext-core/src/dom/Element.js
/** * Wrapper for setting style properties, also takes single object parameter of * multiple styles. * * Styles should be a valid DOM element style property. * [Valid style property names](http://www.w3schools.com/jsref/dom_obj_style.asp) * (_along with the supported CSS version for each_) * * //复制Phineas Flynn* * var el = Ext.get('my-el'); * * // two-param syntax * el.setStyle('color', 'white'); * * // single-param syntax * el.setStyle({ * fontWeight: 'bold', * backgroundColor: 'gray', * padding: '10px' * }); * * @param {String/Object} prop The style property to be set, or an object of * multiple styles. * @param {String} [value] The value to apply to the given property, or null if * an object was passed. * @return {Ext.dom.Element} this */ setStyle: function(prop, value) { var me = this, dom = me.dom, hooks = me.styleHooks, style = dom.style, name = prop, hook; // we don't promote the 2-arg form to object-form to avoid the overhead... if (typeof name === 'string') { hook = hooks[name]; if (!hook) { hooks[name] = hook = { name: Element.normalize(name) }; } value = (value == null) ? '' : value; // map null && undefined to '' if (hook.set) { hook.set(dom, value, me); } else { style[hook.name] = value; } if (hook.afterSet) { hook.afterSet(dom, value, me); } } else { for (name in prop) { hook = hooks[name]; if (!hook) { hooks[name] = hook = { name: Element.normalize(name) }; } value = prop[name]; value = (value == null) ? '' : value; // map null && undefined to '' if (hook.set) { hook.set(dom, value, me); } else { style[hook.name] = value; } if (hook.afterSet) { hook.afterSet(dom, value, me); } } } return me; },
相关推荐
- ExtJs七(ExtJs Mvc创建ViewPort) 前言在4.1的时候,要先创建一个扩展于Ext.app.Application的类,然后用create创建它的实例来开始应用程序的。而在4.1.1,则可直接调用application方法开始执行应用程序,简化了。调用application方法,其参数是一个配置对象,主要配置项有以下三个:name:用来…
- 3DMAX提示和技巧 本主题标识使用 Civil View 的一些重要提示和技巧。常规使用屏幕分辨率至少为 1280x1024 的 Civil View。低于此分辨率时,一些面板将占用过多屏幕空间。 将视口设置为线框显示以达到最佳性能。 要尽可能简化用户界面,请在单个视口中工作并关闭 3ds Max 命令面…