Ext 3 to 4 Migration

[MrSparks]

Decoding JSON under EXTJS 3

obj = Ext.util.JSON.decode(action.response.responseText);

Would be this under EXTJS 4

obj = Ext.JSON.decode(action.response.responseText);

[stevil]

Hi stevil,

You are correct, there is no longer a hidden field. In fact, one of the big goals for Ext4 forms was to totally decouple all Field components from input elements in the DOM. Many of the components still use a DOM input for display and gathering of user input, but its presence is not required for the field to function. The big advantage of this approach is that it allows fields to be populated, manipulated, and submitted without being rendered; this allows easier use in e.g. tab panels or collapsed fieldsets/panels/etc.

As a result, all submitting of Ext form fields is now programmatic; you can't dump an Ext field into a raw HTML form element and submit that form and expect it to work, because that form will depend on DOM inputs that may not be present. The best way is of course to use FormPanel and its associated Basic form implementation (though it's possible to write custom code that grabs submit values from fields), and we've made sure that these are powerful enough to handle most use cases, including creating and submitting a real form element in the background if that's what you need.

To your specific question: ComboBox's default behavior is to submit only a single value to the form; this value corresponds to the configured valueField if you're picking from the dropdown list. It doesn't seem like a common requirement to also submit the displayField as a second value; however if you wish to do so you could easily override the getSubmitData method to include that second value as well. You don't need to worry about creating a hidden input and syncing its value or anything. This is another advantage of the new architecture; since values are decoupled from DOM elements, it's usually easy to override a method or two and implement custom logic for handling the value(s).

I hope that helps.

jjohnston,

Thanks for the detailed, thoughtful response on this. I can certainly understand the design principles in play here. That said, I think that there will need to be a lot of attention paid to this in the migration guide, as there are two major breaking changes: 1) no more transforming legacy HTML markup, and 2) major changes to the way fields are handled (that is, not nearly so seamless as in 3.x and earlier to get backward compatible behavior). I don't know if you can handle this in the upcoming crutch compatibility file too easily.

As for the ComboBox, my use case is a combo in which I may post a value that doesn't exist in the database (no ID value, but a display value). On the back end, if there's no ID, I add a record based on the display value, generating a new ID that would get picked up in subsequent searches. So the back end needs access to both values.

Also, I looked at the ComboBox source, and I see a getSubmitValue (not getSubmitData) method. Assuming I have the correct method, how would I get the "second value" in there, as it appears to return a simple string. Am I able to pass in an object that has more data pairs, or do you suggest I delimit the value and rip it apart on the back end?

(Update: Never mind, I found getSubmitData() in the base Field class, and that makes sense to me)

Again, thanks for the reply. This aspect of the conversion is giving me fits, as I have a large amount of dynamically generated HTML that I've been transforming. Beyond that, I'm really impressed with what I've seen so far in this refactor - I've already converted all of my components to use the new Ext.define pattern, and I love it. I had already developed a "mixin-like" approach using Ext.apply, and this is so much cleaner and easier to maintain

[brian.moeskau]

Hi ... is there any information for integrating ExtJS 4.0 with Visual Web Developer (VWD) Express 2010 or VS 2010 in the way that JQuery is integrated?

Please see the IDE discussion earlier in this thread. While pertinent to 4.0 in general, it's not really a 3 > 4 migration topic, so your question would be best suited to a new thread specifically about IDE support. Thanks!

[steffenk]

Brian, could we get a list of comparisons for migration? This could be one page as migration guide and would be a table of simple calls / methods for EXT3 and EXT4. Would be very useful.

[brian.moeskau]

Brian, could we get a list of comparisons for migration? This could be one page as migration guide and would be a table of simple calls / methods for EXT3 and EXT4. Would be very useful.

That's part of what I'm working on. It will be a bit larger than what you have in mind though...

[steffenk]

cool, thx.
btw - would be awesome to publish it as draft before finished (like the overview) - many user jump in EXT4 since beta, and they need something like this, it's hard to read all forum threads here to get an idea.

[大漠穷秋]

1.png
And my jsb file:
{
"projectName": "ExtJH",
"deployDir": "ExtJH",
"licenseText":"free nobody ",
"pkgs":[
{
"name":"core",
"file":"Test-min.js",
"isDebug": true,
"fileIncludes": [{
"text": "Test.js",
"path": "src/core/"
}]
}
],
"resources":[]
}

[ldonofrio]

Hello that is not complete, but if you want to keep using the actual designer with 4, you can take this at a starting point.
You have to update the designer Ext.reg generated calls (add the clsName (string)).

// start ext3 designer compatibility mode
Ext.reg = function(key, cls, clsName){
 cls.$className = clsName;
 Ext.ClassManager.setAlias(cls, 'widget.' + key);
 //console.log(Ext.ClassManager.maps.nameToAliases);
};
Ext.define('Ext.data.DirectStore', {
    extend: 'Ext.data.Store',
    constructor: function(config) {
        config = config || {};
  if (Ext.isDefined(config.sortInfo)) {
   config.sorters = {};
   config.sorters.property = config.sortInfo.field;
   config.sorters.directrion = config.sortInfo.direction;
   delete config.sortInfo;
  }
  config.model = Ext.regModel('overridedModel-' + (this.storeId || Ext.id()), {
   fields: config.fields,
   idProperty: (config.idProperty || 'id')
  });
  delete config.fields;
  config.proxy = {
            type: 'direct',
   directFn: config.directFn,
            paramOrder: config.paramOrder,
            paramsAsHash: config.paramsAsHash,
            simpleSortMode: true,
            reader: {
                root: config.root,
                totalProperty: (config.totalProperty || 'total'),
                idProperty: (config.idProperty || 'id')
            }
        };
        Ext.data.DirectStore.superclass.constructor.call(this, config);
    }
});
Ext.override(Ext.AbstractComponent, {
    initRef: function() {
        if(this.ref && !this.refOwner){
            var levels = this.ref.split('/'),
                last = levels.length,
                i = 0,
                t = this;
   while(t && i < last){
                t = t.ownerCt;
                ++i;
            }
            if(t){
                t[this.refName = levels[--i]] = this;
                this.refOwner = t;
   }
  }
    },
    recursiveInitRef: function() {
  this.initRef();
  if (Ext.isDefined(this.items)) {
         Ext.each(this.items.items, function(item){
    item.recursiveInitRef();
   }, this);
  }
  if (Ext.isFunction(this.child)) {
   var tbar = this.child('*[dock="top"]');
   if (tbar) {
    tbar.recursiveInitRef();
   }
   var bbar = this.child('*[dock="bottom"]');
   if (bbar) {
    bbar.recursiveInitRef();
   }
  }
    },
    removeRef: function() {
        if (this.refOwner && this.refName) {
            delete this.refOwner[this.refName];
            delete this.refOwner;
        }
    },
    onAdded: function(container, pos) {
  this.ownerCt = container;
        this.recursiveInitRef();
  this.fireEvent('added', this, container, pos);
    },
    onRemoved: function() {
        this.removeRef();
  var me = this;
        me.fireEvent('removed', me, me.ownerCt);
        delete me.ownerCt;
    }
});
Ext.override(Ext.Component, {
    initComponent: function() {
        if (Ext.isDefined(this.layout)) {
         if (Ext.isString(this.layout)) {
          if (this.layout == 'form') {
           this.layout = 'anchor';
           var labelAlign = (this.labelAlign || 'left');
           var labelWidth = (this.labelWidth || 100);
     var items = (this.items || []);
     Ext.each(this.items, function(item){
      item.labelAlign = labelAlign;
      item.labelWidth = labelWidth;
      if (Ext.isDefined(item.width)) {
       item.width += labelWidth;
      }
     }, this);
    }
         }
        }
  var me = this;
        if (me.listeners) {
            me.on(me.listeners);
            delete me.listeners;
        }
        me.enableBubble(me.bubbleEvents);
        me.mons = [];
    }
});
Ext.override(Ext.panel.Panel, {
    initComponent: function() {
        var me = this,
            cls;
        if (me.closeAction == 'close') {
   me.closeAction = 'destroy';
  }
        me.callParent();
        if (me.unstyled) {
            me.baseCls = me.baseCSSPrefix + 'plain';
        }
        if (me.frame) {
            me.ui = 'framed';
        }
        me.collapsedCls = me.collapsedCls || me.baseCls + '-collapsed';
        me.collapseDirection = me.collapseDirection || me.headerPosition || Ext.Component.DIRECTION_TOP;
        // CSC class name to add to Header Component upon Panel collapse
        me.collapsedHeaderCls = Ext.baseCSSPrefix + 'panel-' + (me.border === false ? 'noborder-' : '') + 'collapsed-header';
        // Backwards compatibility
        me.bridgeToolbars();
    }
});
Ext.override(Ext.form.BaseField, {
    initComponent : function() {
  if (Ext.isDefined(this.cls)) {
         if (this.cls != '') {
          this.fieldBodyCls = this.cls;
          delete this.cls;
         }
        }
        var me = this;
        me.callParent();
        me.subTplData = me.subTplData || {};
        me.addEvents(
            'focus',
            'blur',
            'specialkey'
        );
        // Init mixins
        me.initLabelable();
        me.initField();
        // Default name to inputId
        if (!me.name) {
            me.name = me.getInputId();
        }
    }
});
Ext.override(Ext.form.ComboBox, {
    initComponent: function() {
        /* start patch */
        if (Ext.isDefined(this.mode)) {
         this.queryMode = this.mode;
         delete this.mode;
        }
        if (Ext.isDefined(this.hiddenName)) {
         this.name = this.hiddenName;
         delete this.hiddenName;
        }
  /* end patch */
  var me = this,
            isLocalMode = me.queryMode === 'local',
            isDefined = Ext.isDefined;
        //<debug>
        if (!me.store) {
            throw "Ext.form.ComboBox: A valid store instance must be configured on the ComboBox.";
        }
        if (me.typeAhead && me.multiSelect) {
            throw "Ext.form.ComboBox: typeAhead and multiSelect are mutually exclusive options -- please remove one of them.";
        }
        if (me.typeAhead && !me.editable) {
            throw "Ext.form.ComboBox: If typeAhead is enabled the combo must be editable: true.";
        }
        if (me.selectOnFocus && !me.editable) {
            throw "Ext.form.ComboBox: If selectOnFocus is enabled the combo must be editable: true.";
        }
        //</debug>
        this.addEvents(
            'beforequery'
        );
        me.bindStore(me.store, true);
        if (me.store.autoCreated) {
            me.queryMode = 'local';
            me.valueField = me.displayField = 'field1';
            if (!me.store.expanded) {
                me.displayField = 'field2';
            }
        }
        if (!isDefined(me.valueField)) {
            me.valueField = me.displayField;
        }
        if (!isDefined(me.queryDelay)) {
            me.queryDelay = isLocalMode ? 10 : 500;
        }
        if (!isDefined(me.minChars)) {
            me.minChars = isLocalMode ? 0 : 4;
        }
        if (!me.displayTpl) {
            me.displayTpl = new Ext.XTemplate(
                '<tpl for=".">' +
                    '{[typeof values === "string" ? values : values.' + me.displayField + ']}' +
                    '<tpl if="xindex < xcount">' + me.delimiter + '</tpl>' +
                '</tpl>'
            );
        } else if (Ext.isString(me.displayTpl)) {
            me.displayTpl = new Ext.XTemplate(me.displayTpl);
        }
        me.callParent();
     me.doQueryTask = new Ext.util.DelayedTask(me.doRawQuery, me);
        // store has already been loaded, setValue
        if (me.store.getCount() > 0) {
            me.setValue(me.value);
        }
    }
});
Ext.define('Ext.grid.RowSelectionModel', {
    extend: 'Ext.selection.RowModel',
    constructor: function(config) {
        config = config || {};
        if (!Ext.isDefined(config.singleSelect)) config.singleSelect = false;
        config.mode = (config.singleSelect ? 'SINGLE' : 'MULTI');
        delete config.singleSelect;
        Ext.grid.RowSelectionModel.superclass.constructor.call(this, config);
    }
});
Ext.define('Ext.grid.CheckboxSelectionModel', {
    extend: 'Ext.selection.CheckboxModel',
    constructor: function(config) {
        config = config || {};
        if (!Ext.isDefined(config.singleSelect)) config.singleSelect = false;
        config.mode = (config.singleSelect ? 'SINGLE' : 'MULTI');
        delete config.singleSelect;
        Ext.grid.CheckboxSelectionModel.superclass.constructor.call(this, config);
    }
});
Ext.define('Ext.grid.CellSelectionModel', {
    extend: 'Ext.selection.CellModel',
    constructor: function(config) {
        config = config || {};
        if (!Ext.isDefined(config.singleSelect)) config.singleSelect = false;
        config.mode = (config.singleSelect ? 'SINGLE' : 'MULTI');
        delete config.singleSelect;
        Ext.grid.CellSelectionModel.superclass.constructor.call(this, config);
    }
});
Ext.override(Ext.grid.GridPanel, {
    initComponent: function() {
  if (Ext.isDefined(this.store)) {
   if (Ext.isString(this.store)) {
    this.store = Ext.StoreMgr.lookup(this.store);
   }
  }
  if (Ext.isDefined(this.columns)) {
   if (Ext.isArray(this.columns)) {
    var headers = [];
    Ext.each(this.columns, function(item){
     item.text = item.header;
     delete item.header;
     if (Ext.isDefined(item.xtype)) {
      item.xtype = item.xtype.replace(/column/, 'header');
     }
     if (Ext.isDefined(this.autoExpandColumn) && Ext.isDefined(item.id)) {
      if (this.autoExpandColumn == item.id) {
       item.flex = 1;
       delete this.autoExpandColumn;
      }
     }
     headers.push(item);
    }, this);
    this.headers = headers;
    delete this.columns;
   }
  }
  if (Ext.isDefined(this.tbar.xtype)) {
   if (this.tbar.xtype == 'paging') {
    this.tbar.xtype = 'pagingtoolbar';
    if (Ext.isDefined(this.tbar.store)) {
     if (Ext.isString(this.tbar.store)) {
      this.tbar.store = Ext.StoreMgr.lookup(this.store);
      if (this.tbar.pageSize) {
       this.tbar.store.pageSize = this.tbar.pageSize;
      }
     }
    }
   }
  }
  if (Ext.isDefined(this.bbar.xtype)) {
   if (this.bbar.xtype == 'paging') {
    this.bbar.xtype = 'pagingtoolbar';
    if (Ext.isDefined(this.bbar.store)) {
     if (Ext.isString(this.bbar.store)) {
      this.bbar.store = Ext.StoreMgr.lookup(this.store);
      if (this.bbar.pageSize) {
       this.bbar.store.pageSize = this.bbar.pageSize;
      }
     }
    }
   }
  }
  var me = this;
        if (me.columnLines) {
            me.cls = (me.cls || '') + ' ' + Ext.baseCSSPrefix + 'grid-with-col-lines';
        }
        me.callParent();
    }
});
// end ext3 designer compatibility mode 

[a.l]

Hi,

Issue/Question 1)
In ExtJS 3.3.1 there is the 'unstyled' config option in the Ext.Panel class.
In ExtJS 4.0 beta 2 this option is missing.

Besides that:
If you set the 'unstyled' config option, in my case a GridPanel, in ExtJS 3.3.1 it works as expected without setting a (default blue) border. When the 'unstyled' option is set in ExtJS 4.0 then the element 'el' in line 30933 of ext-all-debug.js is null and execution stops.
If I instead make use of baseCls: 'x-plain' then I do not get any null reference however the visual 'effect' does not look as expected. These is still blue borders and if in my case I render two grid panels to two ids, then the second grid gets the column headers drawn on top of the other grid :o)

Question 2)
uncaught exception: [Exception... "'GridView: getRowClass body is no longer supported. Use getAdditionalData of the rowbody feature.' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "JS frame :: chrome://firebug/content/spy.js :: callPageHandler :: line 744" data: no]
http://192.168.0.240/ext-4.0-beta2/ext-all-debug.js
Line 6540

, where is it currently possible to read more about implementing those Ext.grid.features ?

Thank you all for your good work and help :-)

[stevil]

I'm trying to get a TreePanel from my existing 3.3.1 application working under 4.0 Beta 2. I'm looking at the XML Tree example, as well as the TreeStore code, and have some migration-related questions:

1. Ext.data.TreeStore comments indicate we're supposed to use a NestedSet representation (http://http://threebit.net/tutorials...tutorial1.html) for our data.
   1. Is this really required?
      1. If so, it implies that all applications that store hierarchical data will need database changes, as well as business process changes to maintain the NestedSet support fields (left, right), instead of just the parent ID we maintain today.
      2. The XML tree example does none of this (or at least I see no indication of left/right in either the store requests or the return XML payload), so is it really required?
      3. If the answer is no (and I suspect it is), what are we giving up by NOT modifying the back end to support this? Drag and Drop?
   2. Since TreeNodeUI is no longer in the framework, what is the recommended means of rendering custom node content?
      1. Do we extend TreeView?
      2. Do we specify a tpl property somewhere?
      3. Something else?

Keep up the great work on 4.0!

stevil