View Full Version : Question on custom component

6 Apr 2010, 1:39 PM
I'm in the process of converting our admin from Dojo to ExtJS and just getting started. Being a long time Java Swing developer, I'm catching on with ExtJS pretty quick. I'm writing some custom components and would like some feedback. One question I had is did I put the createItems() and downloadFile() functions in the correct place? I didn't know if they should be inside the component? Any pointers are appreciated. Thanks.

Admin.LogViewerFiles = Ext.extend(Ext.Panel, {
// Prototype Defaults, can be overridden by user's config object
files: {},

initComponent: function() {
// Called during component initialization

// Config object has already been applied to 'this' so properties can
// be overriden here or new properties (e.g. items, tools, buttons)
// can be added, eg:
var items = createItems(this.files);
var config = {
padding: '5px',
items: items

Ext.apply(this, Ext.apply(this.initialConfig, config));

// Before parent code

// Call parent (required)
Admin.LogViewerFiles.superclass.initComponent.apply(this, arguments);

// After parent code
// e.g. install event handlers on rendered component

// Override other inherited methods
onRender: function() {

// Before parent code

// Call parent (required)
Admin.LogViewerFiles.superclass.onRender.apply(this, arguments);

// After parent code



// Register our component as an xtype
Ext.reg('logviewerfiles', Admin.LogViewerFiles);

function createItems(files) {
var items = new Array();

Ext.each(files, function(file, index) {
var split = file.split("|");
items[index] = {
xtype: 'hyperlink',
text: split[0] + '  (' + split[2] + ' KB)',
listeners: {
'click': function() {
downloadFile(split[1].replace(/\\/g, '\\\\')); return false;

return items;

function downloadFile(file) {

var downloadOption;

var form = Ext.getCmp('logViewerOptions').getForm();
var values = form.getValues();
window.location = "adminAjax/logViewer!logViewerDownload.action?downloadFileName=" + file + "&downloadOption=" + values.downloadOption + "&downloadPercent=" + values.downloadPercent;

6 Apr 2010, 2:34 PM
estesbubba -

If these two functions are related to this LogViewerFiles class they can be included in the prototype of the class.

Immediately after your onRender method, you can do the following:

createItems: function(files) {
// implementation

downloadFile: function(file) {


As a side note, it is generally bad practice to place complex objects in the prototype of a class (the files variable) in this case will be shared across every instance of Admin.LogViewerFiles.

You should setup your files within your initComponent

this.files = {};