PDA

View Full Version : Understanding Ext JS 4



bbl5660
5 Oct 2012, 12:50 PM
All,

I'm trying to figure out how I can hold private state & functions in an Ext JS 4 module. Hopefully there is a solution like this (Ext JS 3 example):



/*jshint smarttabs: true */
/*global MY, Ext, jQuery */
Ext.ns("MY.NAMESPACE");

MY.NAMESPACE.Widget = (function($) {
/**
* NetBeans (and other IDE's) may complain that the following line has
* no effect, this form is a useless string literal statement, so it
* will be ignored by browsers with implementations lower than EcmaScript 5.
* Newer browsers, will help developers to debug bad code.
*/
"use strict";

// Reference to the super "class" (defined later)
var $superclass = null;

// Reference to this "class", i.e. "MY.NAMESPACE.Widget"
var $this = null;

// Internal reference to THIS object, which might be useful to private methods
var $instance = null;

// Private member variables
var someCounter, someOtherObject = {
foo: "bar",
foo2: 11
};

///////////////////////
/* Private Functions */
///////////////////////
function somePrivateFunction(newNumber) {
someCounter = newNumber;
}

function getDefaultConfig() {
var defaultConfiguration = {
collapsible: true,
id: 'my-namespace-widget-id',
title: "My widget's title"
};
return defaultConfiguration;
}

//////////////////////
/* Public Functions */
//////////////////////
$this = Ext.extend(Ext.Panel, {
/**
* This is overriding a super class' function
*/
constructor: function(config) {
$instance = this;
config = $.extend(getDefaultConfig(), config || {});

// Call the super clas' constructor
$superclass.constructor.call(this, config);
},
somePublicFunctionExposingPrivateState: function(clientsNewNumber) {
clientsNewNumber = clientsNewNumber + 11;
somePrivateFunction(clientsNewNumber);
},
/**
* This is overriding a super class' function
*/
collapse: function() {
// Do something fancy
// ...
// Last but not least
$superclass.collapse.call(this);
}
});

$superclass = $this.superclass;
return $this;

})(jQuery);?

So, what I'm trying for Ext JS 4 is this :



Ext.onReady(function() {

// Put this in a namespace
var pseudoClass = (function() {
// Private member variable (plain-old JS variable)
var privateThing = "foo";

// Private function
var describeStuff = function() {
alert(privateThing);
};
// Private Ext instance
var someButton = Ext.create('Ext.Button', {
text: 'Click me',
handler: describeStuff
});

return {
extend: 'Ext.panel.Panel',
html: 'This is the content of my custom panel',
config: {
title: 'I am a custom Panel'
},
constructor: function(config) {
privateThing = config.setPrivateStuff;
config.title = privateThing;
this.callParent(arguments);
this.initConfig(config);
},
items: [someButton]
};
}());

// HTML is declared inside the class, title inside the config, constructor overridden
Ext.define('MyCustomPanel', pseudoClass);

var panelInstance1 = Ext.create('MyCustomPanel', {
title: 'I am a custom Panel - 1',
html: 'This is the content of panel 1!',
setPrivateStuff: 'test 1'
});

var panelInstance2 =Ext.create('MyCustomPanel', {
title: 'I am a custom Panel - 2',
html: 'This is the content of panel 2!',
setPrivateStuff: 'test 2'
});

Ext.create('Ext.panel.Panel', {
items: [panelInstance1, panelInstance2],
renderTo: Ext.getBody(),
});

});
?

Yet, when the view renders, only the second panel has a Button. What gives? Here's a JSFiddle : http://jsfiddle.net/b_long/d4Ymk/

skirtle
5 Oct 2012, 2:54 PM
For the button problem see here:

http://skirtlesden.com/articles/config-objects-on-the-prototype

I'd also encourage you to move away from trying to make things private like that, it really isn't in the spirit of writing good ExtJS.

bbl5660
8 Oct 2012, 9:54 AM
@skirtle , thanks very much for sharing that - I definitely want to start doing things in a more prototypal way. That said... shouldn't there be a way to hold private state by combining a vanilla JS module pattern (http://stackoverflow.com/a/6023603/320399) w/ Ext's
Ext.define(...) function ?