网上找了好久并没有找到相关案例,在官网论坛上看到一个讨论。可将代码拷贝到fiddle中使用。
转载于官网论坛https://www.sencha.com/forum/showthread.php?299025#top
方法一:
Ext.define('logAreaController', {
extend: 'Ext.app.ViewController',
alias: 'controller.log',
updateLog: function(data) {
// simulated data
data = 'Button was clicked';
var vm = this.getViewModel();
vm.setData({
logText: vm.data.logText + data + '\n'
});
//Get the text area component, the textarea input element and
//dom scroll height
var txtArea = Ext.ComponentQuery.query('#myTextArea')[0],
inputElDom = txtArea.inputEl.dom,
scrollHeight = inputElDom.scrollHeight;
//Set the input element dom scroll top to the height to force
//it to scroll to the bottom
inputElDom.scrollTop = scrollHeight;
}
});
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.window.Window', {
controller: 'log',
viewModel: {
data: {
logText: ""
}
},
items: [{
xtype: 'textarea',
itemId: 'myTextArea',
height: 100,
width: 200,
bind: {
value: '{logText}'
}
}, {
xtype: 'button',
text: 'click me',
handler: 'updateLog'
}]
}).show();
}
});
方法二:
Ext.define('logAreaController', {
extend: 'Ext.app.ViewController',
alias: 'controller.log',
updateLog: function(data) {
// simulated data
data = "Button was clicked";
var log = this.lookupReference('LogText');
log.update({logText: data});
log.getTargetEl().scroll('b', 100000, true);
}
});
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.window.Window', {
controller: 'log',
items: [{
xtype: 'panel',
reference: 'LogText',
scrollable: true,
bodyPadding: 5,
tpl: '<p style="margin: 3px 0 0 0">{logText}</p>',
tplWriteMode: 'append',
height: 100,
width: 200,
}, {
xtype: 'button',
text: 'click me',
handler: 'updateLog'
}]
}).show();
}
});
希望有所启发。