似乎Extjs在树选取器上有一个问题，它会在展开/折叠节点时滚动到顶部 . 我只是将一个树形选择器放入带有存储的表单中，根据我的测试，extjs 4.2.1和最新的5.1.0都有问题 . 设置viewConfig：{preserveScrollOnRefresh：true}对我不起作用 . 我无权访问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>
3 回答
我最近遇到过这个问题 . 这是一个记录的错误：EXTJS-16779
这似乎发生在布局周期中 . 我无法找到一个事件（他们要么发生在早期还是太晚），但这似乎运作良好 .
不要设置maxHeight，它会起作用
尝试为树视图添加侦听器：
它专注于扩展元素 .