0
Похоже, что Extjs имеет проблему при сборщике деревьев, он будет прокручиваться вверх, когда разворачивает/сворачивает узел. Я просто поместил сборщик деревьев в форму с магазином, и для моего тестирования extjs 4.2.1 и последние 5.1.0 обе имеют проблему. Настройка viewConfig: {preserveScrollOnRefresh: true} не работает для меня. У меня нет доступа к сообщению на форуме extjs, поэтому отправьте сюда помощь.Extjs Tree Picker, дерево прокручивается вверх, когда расширяется/сворачивается узел
ловильного дерево находится под {} ExtJS/примеры/Ux
/* <debug> */
Ext.Loader.setConfig({
\t enabled : true,
\t paths : {
\t \t 'App' : 'app',
\t \t 'App.ux' : 'app/ux'
\t }
});
/* </debug> */
Ext.application({
\t name : 'App',
\t requires : [ 'Ext.ux.TreePicker' ],
\t launch : function() {
\t \t Ext.create('Ext.container.Viewport', {
\t \t \t layout : 'vbox',
\t \t \t items : [ {
\t \t \t \t fieldLabel : 'Tree Picker',
\t \t \t \t xtype : 'treepicker',
width :'60%',
\t \t \t \t // queryMode: 'local',
\t \t \t \t // multiSelect : true,
\t \t \t \t displayField : 'text',
\t \t \t \t store : Ext.create('Ext.data.TreeStore', {
\t \t \t \t \t root : {
\t \t \t \t \t \t expanded : true,
\t \t \t \t \t \t children : [ {
\t \t \t \t \t \t \t text : "detention34",
expanded : true,
\t \t \t \t \t \t \t children : [ {
\t \t \t \t \t \t \t \t text : "detention33",
\t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t }, {
\t \t \t \t \t \t \t \t text : "homework32",
\t \t \t \t \t \t \t \t expanded : true,
\t \t \t \t \t \t \t \t children : [ {
\t \t \t \t \t \t \t \t \t text : "book report31",
\t \t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t \t }, {
\t \t \t \t \t \t \t \t \t text : "algebra30",
\t \t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t \t } ]
\t \t \t \t \t \t \t }, {
\t \t \t \t \t \t \t \t text : "buy lottery tickets29",
\t \t \t \t \t \t \t \t children : [ {
\t \t \t \t \t \t \t \t \t text : "detention28",
\t \t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t \t }, {
\t \t \t \t \t \t \t \t \t text : "homework27",
\t \t \t \t \t \t \t \t \t expanded : true,
\t \t \t \t \t \t \t \t \t children : [ {
\t \t \t \t \t \t \t \t \t \t text : "book report26",
\t \t \t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t \t \t }, {
\t \t \t \t \t \t \t \t \t \t text : "algebra25",
\t \t \t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t \t \t } ]
\t \t \t \t \t \t \t \t }, {
\t \t \t \t \t \t \t \t \t text : "buy lottery tickets24",
\t \t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t \t } ]
\t \t \t \t \t \t \t } ]
\t \t \t \t \t \t }, {
\t \t \t \t \t \t \t text : "homework23",
\t \t \t \t \t \t \t expanded : true,
\t \t \t \t \t \t \t children : [ {
\t \t \t \t \t \t \t \t text : "book report22",
\t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t }, {
\t \t \t \t \t \t \t \t text : "algebra21",
expanded : true,
\t \t \t \t \t \t \t \t children : [ {
\t \t \t \t \t \t \t \t \t text : "detention",
\t \t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t \t }, {
\t \t \t \t \t \t \t \t \t text : "homework20",
\t \t \t \t \t \t \t \t \t expanded : true,
\t \t \t \t \t \t \t \t \t children : [ {
\t \t \t \t \t \t \t \t \t \t text : "book report19",
\t \t \t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t \t \t }, {
\t \t \t \t \t \t \t \t \t \t text : "algebra18",
\t \t \t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t \t \t } ]
\t \t \t \t \t \t \t \t }, {
\t \t \t \t \t \t \t \t \t text : "buy lottery tickets17",
expanded : true,
\t \t \t \t \t \t \t \t \t children : [ {
\t \t \t \t \t \t \t \t \t \t text : "detention16",
\t \t \t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t \t \t }, {
\t \t \t \t \t \t \t \t \t \t text : "homework15",
\t \t \t \t \t \t \t \t \t \t expanded : true,
\t \t \t \t \t \t \t \t \t \t children : [ {
\t \t \t \t \t \t \t \t \t \t \t text : "book report14",
\t \t \t \t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t \t \t \t }, {
\t \t \t \t \t \t \t \t \t \t \t text : "algebra13",
\t \t \t \t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t \t \t \t } ]
\t \t \t \t \t \t \t \t \t }, {
\t \t \t \t \t \t \t \t \t \t text : "buy lottery tickets12",
expanded : true,
\t \t \t \t \t \t \t \t \t \t children : [ {
\t \t \t \t \t \t \t \t \t \t \t text : "detention11",
\t \t \t \t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t \t \t \t }, {
\t \t \t \t \t \t \t \t \t \t \t text : "homework10",
\t \t \t \t \t \t \t \t \t \t \t expanded : true,
\t \t \t \t \t \t \t \t \t \t \t children : [ {
\t \t \t \t \t \t \t \t \t \t \t \t text : "book report9",
\t \t \t \t \t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t \t \t \t \t }, {
\t \t \t \t \t \t \t \t \t \t \t \t text : "algebra8",
\t \t \t \t \t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t \t \t \t \t } ]
\t \t \t \t \t \t \t \t \t \t }, {
\t \t \t \t \t \t \t \t \t \t \t text : "buy lottery tickets7",
expanded : true,
\t \t \t \t \t \t \t \t \t \t \t children : [ {
\t \t \t \t \t \t \t \t \t \t \t \t text : "detention6",
\t \t \t \t \t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t \t \t \t \t }, {
\t \t \t \t \t \t \t \t \t \t \t \t text : "homework5",
\t \t \t \t \t \t \t \t \t \t \t \t expanded : true,
\t \t \t \t \t \t \t \t \t \t \t \t children : [ {
\t \t \t \t \t \t \t \t \t \t \t \t \t text : "book report4",
\t \t \t \t \t \t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t \t \t \t \t \t }, {
\t \t \t \t \t \t \t \t \t \t \t \t \t text : "algebra3",
\t \t \t \t \t \t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t \t \t \t \t \t } ]
\t \t \t \t \t \t \t \t \t \t \t }, {
\t \t \t \t \t \t \t \t \t \t \t \t text : "buy lottery tickets2",
\t \t \t \t \t \t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t \t \t \t \t \t } ]
\t \t \t \t \t \t \t \t \t \t } ]
\t \t \t \t \t \t \t \t \t } ]
\t \t \t \t \t \t \t \t } ]
\t \t \t \t \t \t \t } ]
\t \t \t \t \t \t }, {
\t \t \t \t \t \t \t text : "buy lottery tickets1",
\t \t \t \t \t \t \t leaf : true
\t \t \t \t \t \t } ]
\t \t \t \t \t }
\t \t \t \t })
\t \t \t } ]
\t \t });
\t }
});<!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">
\t \t <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all.js"></script>
\t \t <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>
\t <script type ="text/javascript" src="app.js"></script>
</html>
У меня такая же проблема. Вы нашли решение для этого? – scebotari66