似乎Extjs在树选取器上有一个问题，它会在展开/折叠节点时滚动到顶部。我只是将一个树形选择器放入带有存储的表单中，根据我的测试，extjs 4.2.1和最新的5.1.0都存在问题。 设置viewConfig：{preserveScrollOnRefresh：true}对我不起作用。我无权访问extjs论坛，所以请在这里寻求帮助。
位于{extjs} / examples / ux
下的树选择器
/* <debug> */
Ext.Loader.setConfig({
enabled : true,
paths : {
'App' : 'app',
'App.ux' : 'app/ux'
}
});
/* </debug> */
Ext.application({
name : 'App',
requires : [ 'Ext.ux.TreePicker' ],
launch : function() {
Ext.create('Ext.container.Viewport', {
layout : 'vbox',
items : [ {
fieldLabel : 'Tree Picker',
xtype : 'treepicker',
width :'60%',
// queryMode: 'local',
// multiSelect : true,
displayField : 'text',
store : Ext.create('Ext.data.TreeStore', {
root : {
expanded : true,
children : [ {
text : "detention34",
expanded : true,
children : [ {
text : "detention33",
leaf : true
}, {
text : "homework32",
expanded : true,
children : [ {
text : "book report31",
leaf : true
}, {
text : "algebra30",
leaf : true
} ]
}, {
text : "buy lottery tickets29",
children : [ {
text : "detention28",
leaf : true
}, {
text : "homework27",
expanded : true,
children : [ {
text : "book report26",
leaf : true
}, {
text : "algebra25",
leaf : true
} ]
}, {
text : "buy lottery tickets24",
leaf : true
} ]
} ]
}, {
text : "homework23",
expanded : true,
children : [ {
text : "book report22",
leaf : true
}, {
text : "algebra21",
expanded : true,
children : [ {
text : "detention",
leaf : true
}, {
text : "homework20",
expanded : true,
children : [ {
text : "book report19",
leaf : true
}, {
text : "algebra18",
leaf : true
} ]
}, {
text : "buy lottery tickets17",
expanded : true,
children : [ {
text : "detention16",
leaf : true
}, {
text : "homework15",
expanded : true,
children : [ {
text : "book report14",
leaf : true
}, {
text : "algebra13",
leaf : true
} ]
}, {
text : "buy lottery tickets12",
expanded : true,
children : [ {
text : "detention11",
leaf : true
}, {
text : "homework10",
expanded : true,
children : [ {
text : "book report9",
leaf : true
}, {
text : "algebra8",
leaf : true
} ]
}, {
text : "buy lottery tickets7",
expanded : true,
children : [ {
text : "detention6",
leaf : true
}, {
text : "homework5",
expanded : true,
children : [ {
text : "book report4",
leaf : true
}, {
text : "algebra3",
leaf : true
} ]
}, {
text : "buy lottery tickets2",
leaf : true
} ]
} ]
} ]
} ]
} ]
}, {
text : "buy lottery tickets1",
leaf : true
} ]
}
})
} ]
});
}
});<!DOCTYPE html>
<html>
<head>
<title>Welcome to Ext JS!</title>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/css/ext-all.css">
<script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all.js"></script>
<script type="text/javascript">
/**
* A Picker field that contains a tree panel on its popup, enabling selection of tree nodes.
*/
Ext.define('Ext.ux.TreePicker', {
extend: 'Ext.form.field.Picker',
xtype: 'treepicker',
uses: [
'Ext.tree.Panel'
],
triggerCls: Ext.baseCSSPrefix + 'form-arrow-trigger',
config: {
/**
* @cfg {Ext.data.TreeStore} store
* A tree store that the tree picker will be bound to
*/
store: null,
/**
* @cfg {String} displayField
* The field inside the model that will be used as the node's text.
* Defaults to the default value of {@link Ext.tree.Panel}'s `displayField` configuration.
*/
displayField: null,
/**
* @cfg {Array} columns
* An optional array of columns for multi-column trees
*/
columns: null,
/**
* @cfg {Boolean} selectOnTab
* Whether the Tab key should select the currently highlighted item. Defaults to `true`.
*/
selectOnTab: true,
/**
* @cfg {Number} maxPickerHeight
* The maximum height of the tree dropdown. Defaults to 300.
*/
maxPickerHeight: 300,
/**
* @cfg {Number} minPickerHeight
* The minimum height of the tree dropdown. Defaults to 100.
*/
minPickerHeight: 100
},
editable: false,
initComponent: function() {
var me = this;
me.callParent(arguments);
me.addEvents(
/**
* @event select
* Fires when a tree node is selected
* @param {Ext.ux.TreePicker} picker This tree picker
* @param {Ext.data.Model} record The selected record
*/
'select'
);
me.mon(me.store, {
scope: me,
load: me.onLoad,
update: me.onUpdate
});
},
/**
* Creates and returns the tree panel to be used as this field's picker.
*/
createPicker: function() {
var me = this,
picker = new Ext.tree.Panel({
shrinkWrapDock: 2,
store: me.store,
floating: true,
displayField: me.displayField,
columns: me.columns,
minHeight: me.minPickerHeight,
maxHeight: me.maxPickerHeight,
manageHeight: false,
shadow: false,
rootVisible: false,
listeners: {
scope: me,
itemclick: me.onItemClick
},
viewConfig: {
//it's not working
preserveScrollOnRefresh:true,
listeners: {
scope: me,
render: me.onViewRender
}
}
}),
view = picker.getView();
if (Ext.isIE9 && Ext.isStrict) {
// In IE9 strict mode, the tree view grows by the height of the horizontal scroll bar when the items are highlighted or unhighlighted.
// Also when items are collapsed or expanded the height of the view is off. Forcing a repaint fixes the problem.
view.on({
scope: me,
highlightitem: me.repaintPickerView,
unhighlightitem: me.repaintPickerView,
afteritemexpand: me.repaintPickerView,
afteritemcollapse: me.repaintPickerView
});
}
return picker;
},
onViewRender: function(view){
view.getEl().on('keypress', this.onPickerKeypress, this);
},
/**
* repaints the tree view
*/
repaintPickerView: function() {
var style = this.picker.getView().getEl().dom.style;
// can't use Element.repaint because it contains a setTimeout, which results in a flicker effect
style.display = style.display;
},
/**
* Aligns the picker to the input element
*/
alignPicker: function() {
var me = this,
picker;
if (me.isExpanded) {
picker = me.getPicker();
if (me.matchFieldWidth) {
// Auto the height (it will be constrained by max height)
picker.setWidth(me.bodyEl.getWidth());
}
if (picker.isFloating()) {
me.doAlign();
}
}
},
/**
* Handles a click even on a tree node
* @private
* @param {Ext.tree.View} view
* @param {Ext.data.Model} record
* @param {HTMLElement} node
* @param {Number} rowIndex
* @param {Ext.EventObject} e
*/
onItemClick: function(view, record, node, rowIndex, e) {
this.selectItem(record);
},
/**
* Handles a keypress event on the picker element
* @private
* @param {Ext.EventObject} e
* @param {HTMLElement} el
*/
onPickerKeypress: function(e, el) {
var key = e.getKey();
if(key === e.ENTER || (key === e.TAB && this.selectOnTab)) {
this.selectItem(this.picker.getSelectionModel().getSelection()[0]);
}
},
/**
* Changes the selection to a given record and closes the picker
* @private
* @param {Ext.data.Model} record
*/
selectItem: function(record) {
var me = this;
me.setValue(record.getId());
me.picker.hide();
me.inputEl.focus();
me.fireEvent('select', me, record)
},
/**
* Runs when the picker is expanded. Selects the appropriate tree node based on the value of the input element,
* and focuses the picker so that keyboard navigation will work.
* @private
*/
onExpand: function() {
var me = this,
picker = me.picker,
store = picker.store,
value = me.value,
node;
if (value) {
node = store.getNodeById(value);
}
if (!node) {
node = store.getRootNode();
}
picker.selectPath(node.getPath());
Ext.defer(function() {
picker.getView().focus();
}, 1);
},
/**
* Sets the specified value into the field
* @param {Mixed} value
* @return {Ext.ux.TreePicker} this
*/
setValue: function(value) {
var me = this,
record;
me.value = value;
if (me.store.loading) {
// Called while the Store is loading. Ensure it is processed by the onLoad method.
return me;
}
// try to find a record in the store that matches the value
record = value ? me.store.getNodeById(value) : me.store.getRootNode();
if (value === undefined) {
record = me.store.getRootNode();
me.value = record.getId();
} else {
record = me.store.getNodeById(value);
}
// set the raw value to the record's display field if a record was found
me.setRawValue(record ? record.get(me.displayField) : '');
return me;
},
getSubmitValue: function(){
return this.value;
},
/**
* Returns the current data value of the field (the idProperty of the record)
* @return {Number}
*/
getValue: function() {
return this.value;
},
/**
* Handles the store's load event.
* @private
*/
onLoad: function() {
var value = this.value;
if (value) {
this.setValue(value);
}
},
onUpdate: function(store, rec, type, modifiedFieldNames){
var display = this.displayField;
if (type === 'edit' && modifiedFieldNames && Ext.Array.contains(modifiedFieldNames, display) && this.value === rec.getId()) {
this.setRawValue(rec.get(display));
}
}
});
</script>
</head>
<body></body>
<script type ="text/javascript" src="app.js"></script>
</html>
答案 0 :(得分：1)
我最近遇到过这个问题。这是一个已记录的错误：EXTJS-16779
这似乎发生在布局周期中。我无法找到一个可以挂钩的事件（它们或者发生在早期或者太晚），但这似乎运作良好。
dig _webdis-site-m-shop._tcp.marathon.mesos SRV
; <<>> DiG 9.9.5-3ubuntu0.1-Ubuntu <<>> _webdis-site-m-shop._tcp.marathon.mesos SRV
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 6284
;; flags: qr aa rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1
;; QUESTION SECTION:
;_webdis-site-m-shop._tcp.marathon.mesos. IN SRV
;; ANSWER SECTION:
_webdis-site-m-shop._tcp.marathon.mesos. 60 IN SRV 0 0 31720 webdis-site-m-shop-39847-s0.marathon.mesos.
;; ADDITIONAL SECTION:
webdis-site-m-shop-39847-s0.marathon.mesos. 60 IN A 192.168.56.106
;; Query time: 2 msec
;; SERVER: 127.0.0.1#53(127.0.0.1)
;; WHEN: Thu Feb 18 16:55:57 UTC 2016
;; MSG SIZE rcvd: 216
/* <debug> */
Ext.Loader.setConfig({
enabled : true,
paths : {
'App' : 'app',
'App.ux' : 'app/ux'
}
});
Ext.define('Ext.override.ux.TreePicker', {
override: 'Ext.ux.TreePicker',
createPicker: function() {
var me = this,
picker = new Ext.tree.Panel({
shrinkWrapDock: 2,
store: me.store,
floating: true,
displayField: me.displayField,
columns: me.columns,
minHeight: me.minPickerHeight,
maxHeight: me.maxPickerHeight,
manageHeight: false,
shadow: false,
rootVisible: false,
listeners: {
scope: me,
itemclick: me.onItemClick
},
viewConfig: {
listeners: {
scope: me,
render: me.onViewRender,
// Get the current scroll before the click
beforeitemclick: function() {
var vw = picker.getView();
if (Ext.getVersion().major > 4)
picker._scrollY = vw.getScrollY();
else
picker._scrollY = vw.getEl().getScroll().top;
}
}
},
layout: {
// Set the scroll after the layout.
finishedLayout: function() {
var layoutFns = Ext.layout.container.Fit.prototype;
layoutFns.finishedLayout.apply(this, arguments);
if (picker._scrollY) {
picker.getView().getEl().dom.scrollTop
= picker._scrollY;
}
}
}
}),
view = picker.getView();
if (Ext.isIE9 && Ext.isStrict) {
// In IE9 strict mode, the tree view grows by the height of the horizontal scroll bar when the items are highlighted or unhighlighted.
// Also when items are collapsed or expanded the height of the view is off. Forcing a repaint fixes the problem.
view.on({
scope: me,
highlightitem: me.repaintPickerView,
unhighlightitem: me.repaintPickerView,
afteritemexpand: me.repaintPickerView,
afteritemcollapse: me.repaintPickerView
});
}
return picker;
},
});
/* </debug> */
Ext.application({
name : 'App',
requires : [ 'Ext.ux.TreePicker' ],
launch : function() {
Ext.create('Ext.container.Viewport', {
layout : 'vbox',
items : [ {
fieldLabel : 'Tree Picker',
xtype : 'treepicker',
width :'60%',
// queryMode: 'local',
// multiSelect : true,
displayField : 'text',
store : Ext.create('Ext.data.TreeStore', {
root : {
expanded : true,
children : [ {
text : "detention34",
expanded : true,
children : [ {
text : "detention33",
leaf : true
}, {
text : "homework32",
expanded : true,
children : [ {
text : "book report31",
leaf : true
}, {
text : "algebra30",
leaf : true
} ]
}, {
text : "buy lottery tickets29",
children : [ {
text : "detention28",
leaf : true
}, {
text : "homework27",
expanded : true,
children : [ {
text : "book report26",
leaf : true
}, {
text : "algebra25",
leaf : true
} ]
}, {
text : "buy lottery tickets24",
leaf : true
} ]
} ]
}, {
text : "homework23",
expanded : true,
children : [ {
text : "book report22",
leaf : true
}, {
text : "algebra21",
expanded : true,
children : [ {
text : "detention",
leaf : true
}, {
text : "homework20",
expanded : true,
children : [ {
text : "book report19",
leaf : true
}, {
text : "algebra18",
leaf : true
} ]
}, {
text : "buy lottery tickets17",
expanded : true,
children : [ {
text : "detention16",
leaf : true
}, {
text : "homework15",
expanded : true,
children : [ {
text : "book report14",
leaf : true
}, {
text : "algebra13",
leaf : true
} ]
}, {
text : "buy lottery tickets12",
expanded : true,
children : [ {
text : "detention11",
leaf : true
}, {
text : "homework10",
expanded : true,
children : [ {
text : "book report9",
leaf : true
}, {
text : "algebra8",
leaf : true
} ]
}, {
text : "buy lottery tickets7",
expanded : true,
children : [ {
text : "detention6",
leaf : true
}, {
text : "homework5",
expanded : true,
children : [ {
text : "book report4",
leaf : true
}, {
text : "algebra3",
leaf : true
} ]
}, {
text : "buy lottery tickets2",
leaf : true
} ]
} ]
} ]
} ]
} ]
}, {
text : "buy lottery tickets1",
leaf : true
} ]
}
})
} ]
});
}
});
答案 1 :(得分：0)
不设置maxHeight，它会起作用
答案 2 :(得分：0)
尝试为树视图添加侦听器：
SELECT ID, Name, description,
(SELECT COUNT(*) + 1
FROM mytable AS t2
WHERE t2.ID = t1.ID AND t1.Name > t2.Name)
FROM mytable AS t1
ORDER BY ID, Name
它专注于扩展元素。