ExtJs 4.1.1 HasMany Association

Posted By Vitaliy | February 19, 2014 | ExtJS 4.1.1
0 3562
This type of association represents a one-to-many relationship between two models.
For example OOP Class has many Properties.

See how it works on ExtJS 4.2.2 here.

Js Code

Ext.define('Class', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' }
    ],
    hasMany: {
        model: 'Property',
        name: 'properties',
        associationKey: 'properties',
        primaryKey: 'id',
        foreignKey: 'classId'
    },
    proxy: {
        type: 'rest',
        url: '/api/classes'
    }
});

Ext.define('Property', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'classId', type: 'int' },
        { name: 'name', type: 'string' }
    ],
    proxy: {
        type: 'rest',
        url: '/api/properties'
    }
});
            

ExtJs 4 Border Layout: Change Margins After Render

Posted By Vitaliy | March 19, 2013 | ExtJS 4.1.1
0 4029
‚ÄčThere is a private property margin$ which we can change and update layout.

Js Code

{
    text: 'Increment Margin',
    handler: function () {
        var root = this.up('#root'),
            west = root.down('#west'),
            center = root.down('#center'),
            wm = west.margin$,
            cm = center.margin$;

        if (wm.top <= 10) wm.top++;
        if (wm.right <= 10) wm.right++;
        if (wm.bottom <= 10) wm.bottom++;
        if (wm.left <= 10) wm.left++;

        if (cm.top <= 10) cm.top++;
        if (cm.right <= 10) cm.right++;
        if (cm.bottom <= 10) cm.bottom++;
        if (cm.left <= 10) cm.left++;

        root.doLayout();
    }
}
            

ExtJs Template: Using Template Member Functions

Posted By Vitaliy | March 11, 2013 | ExtJS 4.1.1
0 3300
‚ÄčOne or more member functions can be specified in a configuration object passed into the XTemplate constructor for more complex processing.

Js Code

tpl: ['<tpl for=".">',
        '<ul class="details">',
            '<li><b>Name:</b> {Name}</li>',
            '<li><b>Email:</b> {Email}</li>',
            '<tpl if="this.isDisabled(values)">',
                '<li class="warning"><b>Warning:</b> user is disabled</li>',
            '<tpl else>',
                '<li class="comment"><b>Comment:</b> active user</li>',
            '</tpl>',
        '</ul>',
      '</tpl>',
      {
          isDisabled: function (r) {
              return r.Disabled === true;
          }
      }],