Moving from ExtJS 4 to Ext JS 5

Question

I'm new to ExtJS. I'm having a problem moving from ExtJS 4 to ExtJS 5.

When using ExtJS 4 evrything works fine. CRUD works normaly. But when i switch to ExtJS 5, specific when i just change in index.php from

<link rel="stylesheet" type="text/css" 
    href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">
<script type="text/javascript" 
    src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all.js"></script>

to

<link rel="stylesheet" type="text/css" 
    href="ExtJS5/packages/ext-theme-classic/build/resources/ext-theme-classic-all.css">
  <script type="text/javascript" 
    src="ExtJS5/build/ext-all.js"></script>
  <link rel="stylesheet" type="text/css" 
    href="ExtJS5/packages/ext-theme-classic/build/ext-theme-classic.js">

create new stops working.

In ExtJS 4 JSON looks like this

{id: "",title: "test", author: "test", price: "20", quantity: "20"}

in ExtJS 5

{id: "Books.model.Books-1", title: "test", author: "test", price: "20", qauantity: "20"}

Why did it start adding Books.model.Books-1 to id when all i did is change to ExtJS 5

Answer 1

Check this Upgrade guide http://docs.sencha.com/extjs/5.0/whats_new/5.0/extjs_upgrade_guide.html#Models

In ExtJS5 id field is generated automatically, if value doesn't exist. Here is text from this article:

When a record is created and no “id” is given, one will be generated. This is handled by the Model's “identifier” config (from Sencha Touch and formerly “idgen” in Ext JS 4). This is placed as “id” on the record (accessed using “getId”) as well as in the “data” object as the “idProperty”. In Ext JS 4, the id would often be copied to the internalId. This is no longer the case. The internalId is a separately generated value that is unique across all records and should never be changed. The id, however, may be changed.

Answer 2

Like Nikolay has posted, Model has been changed in ExtJs 5.XA Model instance should always have an identifying field which is "id" by default and if you are not providing a value for that id then Ext will generate it for you. To assign the id to another field you'll have to define the idProperty config and assign the field name to it.

Here's the exaplanation in the Model's source code -

The "id" Field and idProperty * * A Model definition always has an identifying field which should yield a unique key * for each

instance. By default, a field named "id" will be created with a * {@link Ext.data.Field#mapping mapping} of "id". This happens because of the default * {@link #idProperty} provided in Model definitions. * * To alter which field is the identifying field, use the {@link #idProperty} config.

And here's what it does during initialization -

// Must do this after running the initializeFn due to converters on idField
        if (!(me.id = id = data[idProperty]) && id !== 0) {
            if (session) {
                identifier = session.getIdentifier(cls);
                id = identifier.generate();
            } else if (modelIdentifier === identifier) {
                id = internalId;
            } else {
                id = identifier.generate();
            }

            data[idProperty] = me.id = id;
            me.phantom = true;
        }

Check the source code as well - http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/source/Model2.html#Ext-data-Model