Code:
Ext.namespace('Ext.ux');
Ext.ux.Viewer = Ext.extend(Ext.Panel, {
perfid: 0,
filerid: 0,
iteration: 1,
section: 'root',
initComponent: function(){
var me = this;
var loadData = function(){
// filer combo value and info text update
var combo = Ext.getCmp('filerCombo');
if (!combo.getValue()) return;
else host = combo.getValue();
var record = combo.store.getAt(combo.store.find('host', host));
var info = record.data.text+', '+record.data.model+', '+
'Release '+record.data.rel+', Serial Number: '+
record.data.serial;
var bbar = Ext.getCmp('bottomBar');
Ext.fly(bbar.items.items[1].getEl()).update('<b>'+info+'</b>');
var tree = Ext.getCmp('navTree');
var node = (tree.getSelectionModel().getSelectedNode()
|| tree.root);
//if (!node.id || node.id == 'root') return;
//if (!node.attributes.perfid) return;
var iteration = Ext.getCmp('iterationCombo').getValue();
if(!iteration) return;
// handle iteration combo changes
me.iterCombo.on({
scope: this,
// reload the nav tree if the iteration changed
beforeselect: function () {
alert('inside select method');
var tree_panel = Ext.getCmp('navTree');
tree_panel.enable();
//tree_panel.getLoader().dataUrl = '/viewcma/viewer_init_nav';
//tree_panel.getLoader().load(tree_panel.root);
tree_panel.root.reload();
}
});
var params = {
perfid: record.store.baseParams.perfid,
section: node.id,
iteration: iteration,
host: host
};
var viewerStatus = Ext.getCmp('viewerStatus');
viewerStatus.showBusy();
Ext.Ajax.request({
url: '/perfstatquickview/section',
method: 'POST',
params: params,
autoAbort: true,
success: function(response, opt){
var panel = Ext.getCmp('perfData');
var viewerStatus = Ext.getCmp('viewerStatus');
if (response.responseText) {
// NB: wrap this in a pre tag becuase of FF bugzilla # 116083
panel.body.update('<pre>'+response.responseText+'</pre>');
}
viewerStatus.clearStatus();
}
});
};
var updateFilerInfo = function () {
var combo = Ext.getCmp('filerCombo');
var idx = store.find('host', combo.getValue());
var record = store.getAt(idx);
};
var filerStore = new Ext.data.JsonStore({
storeId: 'filerStore',
url: '/viewcma/viewer_init_filer',
baseParams: {perfid: this.perfid},
fields: ['host', 'text', 'serial', 'rel', 'model'],
root: 'data'
});
// form combo for selecting an iteration
this.iterCombo = new Ext.form.ComboBox({
width: 260,
mode: 'local',
id : 'iterationCombo',
editable: false,
displayField: 'text',
valueField: 'iteration',
triggerAction: 'all',
store: new Ext.data.JsonStore ({
storeId: 'iterationStore',
url: '/viewcma/viewer_init_iteration',
baseParams: {perfid: this.perfid},
fields: ['iteration', 'text'],
root: 'data',
listeners: {
scope: this,
beforeload: function (store) {
store.baseParams = {
perfid: this.perfid,
hostname: this.hostname
}
},
load: function (store, combo) {
this.iterCombo.setValue(this.iteration);
}
}
})
});
var tbar = new Ext.ux.StatusBar({
id: 'viewerStatus',
//statusAlign: 'right',
items: [this.iterCombo,' ',' ',{
xtype: 'combo',
id: 'filerCombo',
editable: false,
valueField: 'host',
displayField: 'text',
mode: 'local',
store: filerStore,
triggerAction: 'all',
emptyText: 'Loading ...',
listeners: {
select: loadData
}
}]
});
var bbar = new Ext.Toolbar({
id: 'bottomBar',
items: [{
xtype: 'tbfill'
},{
xtype: 'tbtext',
id: 'filerText',
text: ' '
}]
});
var keyNavHandler = function(key, event) {
var combo = Ext.getCmp('iterationCombo');
var iteration = combo.getValue();
combo.collapse();
// handles the J and K keys
if (key == 74 || key == 75) {
if (key == 74) iteration--;
else iteration++;
if (combo.store.find('iteration', iteration) == -1) return;
combo.setValue(iteration);
combo.fireEvent('select');
return;
}
// handles the M key
if (key == 77) {
this.layout.west.panel.toggleCollapse();
return;
}
// handles the G key
if (key == 71) {
var dialog = {
title: 'Jump to Iteration',
msg: 'Enter the iteration number to view',
scope: this,
prompt: true,
buttons: Ext.MessageBox.OK,
combo: combo,
fn: function(btn, value, opt){
map.enable();
if (value == '' || btn != 'ok') return;
if (opt.combo.store.find('iteration', value) != -1){
opt.combo.setValue(value);
opt.combo.fireEvent('select');
}
}
};
map.disable();
Ext.Msg.show(dialog);
return;
}
};
var map = new Ext.KeyMap(document, [
{
key: Ext.EventObject.J,
fn: keyNavHandler,
scope: this
},{
key: Ext.EventObject.K,
fn: keyNavHandler,
scope: this
},{
key: Ext.EventObject.G,
fn: keyNavHandler,
scope: this
},{
key: Ext.EventObject.M,
fn: keyNavHandler,
scope: this
}
]);
// root node of our navtree
var root = new Ext.tree.AsyncTreeNode({
text: 'perfstat',
id: 'source'
});
Ext.apply(this, {
layout: 'border',
defaults: {
collapsible: true,
split: true
},
items: [{
region: 'west',
margins: '0 0 0 0',
cmargins: '0 5 0 0',
width: 250,
minSize: 100,
maxSize: 500,
xtype: 'treepanel',
id: 'navTree',
title: 'Section Data',
autoScroll: true,
animate: true,
containerScroll: true,
border: true,
lines: false,
rootVisible: false,
root: root,
listeners: {
render: function(tree){
var sm = tree.getSelectionModel();
sm.on('selectionchange', loadData);
}
},
loader: new Ext.tree.TreeLoader({
dataUrl: '/viewcma/viewer_init_nav',
requestMethod: 'POST',
baseParams: {perfid: this.perfid, iteration: this.iteration}
})//,
// root: {
// nodeType: 'async',
// text: 'root node',
// id: 'root',
// expanded: true,
// visible: false
// }
},{
region: 'center',
tbar: tbar,
bbar: bbar,
id: 'perfData',
collapsible: false,
margins: '0 0 0 0',
bodyStyle: 'padding:5px; white-space:pre;font-family:monospace;',
html: 'Select a section to view',
autoScroll: true
}]
});
Ext.ux.Viewer.superclass.initComponent.apply(this, arguments);
},
onRender: function(){
var store;
store = Ext.StoreMgr.get('filerStore');
store.on('load', function(store){
var combo = Ext.getCmp('filerCombo');
if (store.find('host', this.filerid) != -1) {
combo.setValue(this.filerid);
} else {
combo.setValue(store.getAt(0).data.host);
}
combo.fireEvent('select');
}, this);
store.load();
store = Ext.StoreMgr.get('iterationStore');
store.on('load', function(store){
var combo = Ext.getCmp('iterationCombo');
if (store.find('iteration', this.iteration) != -1) {
combo.setValue(this.iteration);
} else {
combo.setValue(store.getAt(0).data.iteration);
}
combo.fireEvent('select');
}, this);
store.load();
Ext.ux.Viewer.superclass.onRender.apply(this, arguments);
}
});
Ext.reg('perfviewer', Ext.ux.Viewer);
Thanks,
Problem while loading Ext.tree.TreeLoader on demand??
Reply With Quote