PnlCustom = Ext.extend(Ext.Panel, 
{
        title: "Title",
        html: "spam",

        initComponent : function(){
                PnlCustom.superclass.initComponent.call(this);
                if (null == this.someVal)       {
                        this.someVal = "NOTHING";
                }
                console.log("#" + this.someVal + "#");
        }
});

Ext.onReady(function()  {

        var pnlCustom = new PnlCustom({
                someVal: "3"
        });
        var pnlCustom2 = new PnlCustom({});

        var pnlPlain = new Ext.Panel({
                title: "TITLE",
                items: [
                        pnlCustom,
                        pnlCustom2
                ],
                renderTo: "uiHook"
        });
        //Ext.Msg.alert("test","test"); // compulsory test that Ext is set up correctly.
});

Labels: code, ExtJS, javascript

JavaScript is very dynamic and relies on “prototypal inheritance,” which is a significantly different paradigm than class-based inheritance.
...
Perhaps you’re not familiar with languages that treat functions as first-order values, in which case the line var fx = john.greet; may seem weird. This does not call the greet method, but creates a reference to it—an alias of sorts, if you will.

Labels: ExtJS, javascript

toolbars in the current version [ExtJS 2.2 in this case] aren't implemented as containers. I believe this is planned in 3.0

Labels: ExtJS, javascript

I'm coming from ExtJS 2.2 [sic] to 4, and the Model behavior and terminology threw me for a loop too.

The best quick explanation I can find is from this post in the "Countdown to ExtJS 4" series on Sencha's blog. Turns out a Model acts like it does because it's "really" a Record.

The centerpiece of the data package is Ext.data.Model. A Model represents some type of data in an application - for example an e-commerce app might have models for Users, Products and Orders. At its simplest a Model is just a set of fields and their data. Anyone familiar with Ext JS 3 will have used Ext.data.Record, which was the precursor to Ext.data.Model.

Here's the confusing part: A Model is both a model for the data you're using and a single instance of an object following that model. Let's call its two uses "Model qua model" and "Model qua Record".

This is why its load method requires a unique id (full stop). Model qua Record uses that id to create RESTful URLs for retrieving (and saving, etc) a single Record worth of data. The RESTful URL convention is described here and is linked to in this post on Sencha's blog that talks specifically about Model usage.

Here are a few RESTful URLs formed to that standard to get you familiar with the format, which it appears ExtJS' Model does use:

Operate on a Record with id of 1

GET /people/1 <<< That's what's used to retrieve a single record into Model

return the first record with id of 2

DELETE /people/2

destroy the first record with id of 7

POST /people/7?_method=DELETE

Etc etc.

This is also why Models have their own proxies, so that they can run RESTful operations via that URL modified to follow the conventions described in that link. You might pull 100s of records from one URL, which you'd use as your Store's proxy source, but when you want to save what's in the single Model (again, think "Model qua Record" here), you might perform those Record-specific operations through another URL whose backend messes with one record at a time.

So When Do I use Stores?

To store more than one instance of that Model, you'd slap them into a Store. You add lots of Models quaRecords into Stores and then access those "Models" to pull data out. So if you have a grid you'll naturally want to have all that data locally, without having to re-query the server for each row's display.

From the first post:

Models are typically used with a Store, which is basically a collection of Model instances.

And, of course, the Stores apparently pull info from Model qua Model here to know what they're carrying.

Labels: ExtJS

Ext.onReady(function(){
    Ext.Msg.confirm('Hey!', 'Is this ok?', function(btn, text){
        if (btn.toLowerCase() == 'yes'){
            alert('go ahead');
        } else {
            alert('abort');
        }
    });
});

Labels: ExtJS, noteToSelf

The issue with the code is a TableLayout is not a "fitting" layout. It provides no dimensions to underlying components. Your TabPanel has no width defined, and no layout that provides a width, and so it can't calculate the scroll sizes correctly.

Labels: ExtJS

// Call createGrid from Ext.onReady() to render the simple grid
// to a div with id of 'divUiHook2'.
function createGrid()   {
        
        //==============================================
        // code from Listing 7.1
        //==============================================
        var arrayData = [
                ['Jay Garcia',    'MD'],
                ['Aaron Baker',   'VA'],
                ['Susan Smith',   'DC'],
                ['Mary Stein',    'DE'],
                ['Bryan Shanley', 'NJ'],
                ['Nyri Selgado',  'CA']
        ];


        var nameRecord = Ext.data.Record.create([
                { name:'name',mapping:0},
                { name:'state',mapping:1}
        ]);

        var memoryProxy = new Ext.data.MemoryProxy(arrayData);
        var arrayReader = new Ext.data.ArrayReader({ id:0 },nameRecord);

        var store = new Ext.data.Store({
                reader:arrayReader,
                proxy:memoryProxy
        });

        store.load();                   // this was missing -mfn
        console.log(store.getCount());  // this is what clued me in -mfn


        //==============================================
        // code from Building_our_simple_gridpanel.html
        //==============================================
        var cm = new Ext.grid.ColumnModel([                          // 1
                {
                        header    : 'Full Name',
                        sortable  : true,
                        
                        // changed this from fullName
                        dataIndex : 'name'         // 2
                },
                {
                        header    : 'State',
                        dataIndex : 'state'
                }
        ]);

        var gridView = new Ext.grid.GridView();                     // 3
        var selModel = new Ext.grid.RowSelectionModel({             // 4
                singleSelect : true
        });

        var dummyGrid = new Ext.grid.GridPanel({                         // 5
                renderTo   : 'divUiHook2',      // changed from getBody.
                //autoHeight : true,            // replace with constant
                height     : 200,               // constant height
                width      : 250,
                store      : store,                                    // 6
                view       : gridView,                                 // 7
                colModel   : cm,                                       // 8
                selModel   : selModel,

                title      : 'Our first grid'
        });
}       // eo fn createGrid 

Labels: code, ExtJS, obo, problem solved

Here’s how you read the input Stream:

public void DoWork(Stream input)

{

    StreamReader sr = new StreamReader(input);

    string s = sr.ReadToEnd();

    sr.Dispose();

    NameValueCollection qs = HttpUtility.ParseQueryString(s);

    string firstName = qs["firstName"];

    string lastName = qs["lastName"];

    // Do work here

}

Labels: ExtJS, problem solved

Nesting ExtJS 2.0 TreePanel inside Accordian
The Accordian panel in ExtJS 2.0 javascript framework, will error out if an item (Ext.Component) does not possess a header. The easiest way to create an header is to set the title property.

Labels: ExtJS, noteToSelf

   1 //==============================================
   2 // Use the reader to create the data store
   3 //==============================================
   4 // note that I've subclassed Store (as MyQueryDataStore) here. 
   5 // No operational difference in this code, however.
   6 var myStore = new MyQueryDataStore({
   7         url: './json/gridValues.json',
   8         reader: myReaderTest
   9 });
  10 
  11 // How to iterate the data once it's returned, remembering that we're
  12 // dealing with an asynchronous paradigm here.
  13 myStore.on("load", function(s,rs) {
  14         console.log("and we're back");
  15         this.each(function(record) {
  16             //var strFieldName = this.fields.get(3).name;
  17             //console.log('record data from callback: ' + record.get(strFieldName));
  18         });
  19 });
  20 myStore.load(); // AJAX call to get the data happens now.
  21 // the Store is going to call the load method of its local
  22 // HttpProxy...
  23 // this.proxy.load(p, this.reader, this.loadRecords, this, options);
  24 // ... the request sent to the server has a callback referenced to
  25 // the store's loadRepsonse method, which includes a call to read
  26 // the response with the referenced DataReader.
  27 //
  28 // Afterwards, the proxy calls the Store's loadRecords method.
  29 // The already Read response is passed with that call as [o] in
  30 // loadRecords' first parameter.
  31 //      loadRecords : function(o, options, success){
  32 //          ...
  33 //          var r = o.records, t = o.totalRecords || r.length;
  34 //
  35 // And voila.  That's the life of a JSON return to DataStore request.

 * In Ext.data.JsonReader, for some reason, the equivalent variable in readRecords
 * for [fieldManager] (in that case, named [f]) was used to perform the tasks of both
 * [fldColumnArchetype] and [fieldCurrent] variables here.  I think it's just an
 * obfuscation technique (like the reused [v] throughout), as the use here seems
 * to have no relationship with the original fieldManager declaration.  That is,
 * you could have used [foo] in either spot if you'd wanted, but they strangely
 * and unintuitively recycled instead. (Or I've missed something important!) The
 * kingdom for a strongly typed language...
 *
 * There were other occurrences of poorly scoped variables and var choices, like...
 *  var s = this.meta;    // This var only made things *less* self-commenting.  Gone.
 * ... that have been removed from the JsonReader codebase.  It's like the code
 * had been minimally minimized and purposely obfuscated, but only partially so --
 * and that obfuscation done by hand.

Labels: code, ExtJS, javascript, noteToSelf