Ext 3 to 4 Migration

[DHainzl]

I don't know if this has changed, but try to listen to the beforeadd-event of the tabpanel. Check in this function, if a tab with this id already exists and return false if it does. See: http://docs.sencha.com/ext-js/4-0/#/...vent-beforeadd

-- Dave

[ShaneMc]

@Hainzl, Thank you for your prompt response.

I have another problem.
I am trying to extend Ext.form.field.ComboBox, however I get the following error when I try to add the extended Combo to a form:

Uncaught TypeError: Cannot read property 'dom' of null

This is on line 61802 of ExtJs4.1 ext-all-debug.js inside the renderActiveError method.
Can you help me with this please?

Below is an example of my code:

Ext.define('GenericCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.genericcombo',

    //the constructor
    constructor: function(config) {

        var store = new Ext.data.JsonStore({
            fields: ['Key', 'Value'],
            data : config.combodata || []
        });//new Ext.data.Store
        
        Ext.apply(this, config, {
            store: store,
            displayField: 'Value',
            valueField: 'Key',
            queryMode: 'local',
            emptyText:'Select a value...'
        });

        this.callParent([this]);
    }//end constructor

});//end Ext.define

The config.combodata for the store looks like below:

"combodata":[
            {"Key":"","Value":"<None>"},
            {"Key":"!#","Value":"Dr"},
            {"Key":"!$","Value":"Miss"}
        ]

I instantiate the genericcombo like below:

{
    "anchor":"50%",
    "autoScroll":false,
    "border":false,
    "combodata":[
          {"Key":"","Value":"<None>"},
          {"Key":"!#","Value":"Dr"}
        ],
    "fieldLabel":"Title",
    "name":"3820",
    "value":"!)",
    "xtype":"genericcombo"
 }

[DHainzl]

Hmm, the only thing I notice is that you use

this.callParent([this]);

at the end of the constructor. As far as I know, the new way of calling the parent method is

this.callParent(arguments);

but I may be wrong, and maybe this is not your problem, but you could try

-- Dave

[ShaneMc]

@Hainzl: Thanks very much I have been trying to solve that for ages. Little did I know, It was something so simple.

[ShaneMc]

I have a combo box which holds values like <None> <All> Which beacause of the <> do not display in the combo box.
In ExtJs3 I solved the problem with the following line:

tpl: '<tpl for="."><div class="x-combo-list-item">{Value:htmlEncode}</div></tpl>'

This answer and further discussion can be found
http://www.sencha.com/forum/showthre...a-lt-select-gt

I have tried the below in ExtJs 4 but does not work

tpl:'<tpl for="."><div class="x-boundlist-item">{Value:htmlEncode}</div></tpl>'

Any ideas?

[brian.moeskau]

I use JsonStore objects extensively in my development but I am not seeing where they exist in the latest v4 release of ExtJS. In ExtJS 3.x version I could do the following:

    var custStore =
      new Ext.data.JsonStore({
        storeId:'custStore',
        autoLoad:true,
        url:'/pgm/custmaint',
        baseParams:{action: 'loadCustList'},
        root:'list',
        totalProperty:'totalProperty',
        fields:['CHG','DEL','CUSTID','NAM','CTY','STT']
      }); 

Now in version 4 it is not making a request to the server when the page loads as expected. Do I *need* to make syntactical changes in this case? (i.e. use Ext.create('Ext.data.JsonStore'.....) )

I am not seeing simple ways to do json communication to/from the server in ExtJS4 and that is concerning me. Even more concerning is the fact that there was a huge shift in how things work yet there is hardly any examples for v4 in the Learn link at the top of this page.

AaronBartell.com

JsonStore is still there, though it's not really needed. You can simply create a Store with an AjaxProxy and JsonReader, which is how Ext 4 code does it. If JsonStore is not working as expected for you please provide more info on what the issue is.

[vlads]

This is just for the Sencha team. Guys, you really need to update your API documentation - SO MANY configuration options have been omitted! One needs to constantly look at the code to find out what to do when migrating an application. There are mistakes in the API documentation too.

[brian.moeskau]

This is just for the Sencha team. Guys, you really need to update your API documentation - SO MANY configuration options have been omitted! One needs to constantly look at the code to find out what to do when migrating an application. There are mistakes in the API documentation too.

We are constantly working to try and improve the docs. If you can suggest specific improvements or specific API calls that are missing or incorrect, please post those separately to the bugs forum and we'll be sure to get them fixed.

[ShaneMc]

In ExtJs3 I created a window like below:

var window = new Ext.Window({
    title: 'My Window'
    .....
    renderTo: 'panel.getEl()'
    modal: true
});
window.show()

Because I used the windows renderTO property, this would cause whatever the window has been rendered to, to be masked.
However if I do the same in ExtJs 4, the whole screen gets masked regardless of what I have rendered the window to?

[ap]

I realise it relates to combobox shadow or something similar, but not sure on the details.

Another error I am getting is : -

config is undefined      if (config.trackMouseOver !== undefined) {        ext3-compat.js (line 476) 

Thanks

If you application extends some Ext panel and it has internally configured options (defaults) which does not require the 'new' call to pass any config options, you will still have to pass on a blank config object. Because the Ext.Compat intercepts the constructors before you component is called.

someCustomCmp = new MyApp.MyPanel( {} );  //pass a blank obj, even if your custom obj contains all the required values to call it's parent component.