Showing posts with label ExtJs. Show all posts
Showing posts with label ExtJs. Show all posts

Sunday, December 30, 2012

Be careful when you use extraparams in proxy in ExtjJS 4; you should use baseparams!


Problem with proxy extra params: proxy is common to all stores created with this proxy! Example:

var countries1, countries2;
countries1 = Ext.create( "MyApp.store.Countries");
// add parameter 'countriesId' = 1
countries1.getProxy().setExtraParam( "countriesId", 1)
countries1.load();
countries2 = Ext.create( "MyApp.store.Countries");
// add parameter 'countriesId' = 2
countries2.getProxy().setExtraParam( "countriesId", 2)
countries2.load({
    callback: function(){
        countries1.load(); // 'countriesId' is no more 1, but 2 !!!
    }
});    

I advise you to create your own store class which implements base parameters if you want to set parameters before calling 'load' function with several stores of the same type.

Ext.define( "MyStore",{
    extend: "Ext.data.Store",
    baseParams: null,
    /**
     * add base parameter to store.baseParams
     * @param {Object} key/value object: {key: value}
     */
    addBaseParam: function(obj){
        Ext.apply( this .baseParams, obj);
    },
    /**
     * add several base parameters to store.baseParams
     * @param {Array}: array of key/value object: [{key1: value1, key2: value2,...}]
     */
    addBaseParams: function(objects){
        var me = this ;
        if (Ext.isArray(objects)){
            Ext. each(objects, function (obj){
                me.addBaseParam(obj);
            })
        } else if (objects){
            me.addBaseParam(objects);
        }
    },
    /**
     * reset base parameters
     */
    resetBaseParams: function(){
        this .baseParams = {};
    },
    /**
     * constructor
     * @param {object} config
     */
    constructor: function(config) {
        var me = this ;
        // manage base params
        me.baseParams = me.baseParams || {};
        // call parent
        me.callParent(arguments);
    },
    /**
     * override load method to add base params to request params
     * @param {Object} options
     */
    load: function(options){
        var me = this ;
        options = options || {};
        options.params = options.params || {};
        Ext.applyIf(options.params, me.baseParams);
        me.callParent([options]);
    }
});

Ext.data.Model.load doesn't take car of 'idProperty' of the model


The problem can appear with extended store, the 'load' function doesn't take care of 'idProperty' define in your model. You have to override 'load' method but be careful to look at mapping property of the identity field!

load: function (id, config){
       config = Ext.apply({}, config);

        var me = this ,
              params={},
              fields = me.getFields(),
              nameProperty = me.nameProperty,
              field,
              fieldName,
              i;
       
        // get field of idProperty
        for (i=fields.length-1;i>=0;i--){
               if (fields[i].name == me.prototype.idProperty){
                     field = fields[i];
                      break ;
              }
       }
        // get the field name
        if (field){
              fieldName = field[nameProperty] || field.mapping || field.name;
       } else {
              fieldName = me.prototype.idProperty;
       }
        // set identity param
       params[fieldName] = id;

       config = Ext.applyIf(config, {
              action: 'read',
              params: params
       });

        var operation = Ext.create('Ext.data.Operation' , config),
              scope = config.scope || me,
              record,
              callback;

       callback = function (operation) {
               if (operation.wasSuccessful()) {
                     record = operation.getRecords()[0];
                     Ext.callback(config.success, scope, [record, operation]);
              } else {
                     Ext.callback(config.failure, scope, [record, operation]);
              }
              Ext.callback(config.callback, scope, [record, operation]);
       };

       me.proxy.read(operation, callback, me);
}

Tuesday, October 9, 2012

Stack Trace doesn't appear anymore on Firebug


It seems that stack trace doesn't appear by default in new Firebug version ; but you can easily re-activate the option by checking in "Console > Show Stack Trace  With Errors".

This can be very useful for ExtJS development.



Thursday, August 30, 2012

Ext.data.Model.load doesn't use the idProperty of the current model


When you create you own model by extending 'Ext.data.Model', you can use the function load which take an identity as first parameter and an configuration object as second. The problem is ExtJs 4.1 doesn't use the idProperty of the new model to send the parameter but 'id'.
You can override the static function load from Ext.data.Model to modify this behavior:

load: function(id, config){
      config = Ext.apply({}, config);

       var me = this ,
            params={};
      params[me.prototype.idProperty] = id;

      config = Ext.applyIf(config, {
            action: 'read' ,
            params: params
      });

       var operation = Ext.create('Ext.data.Operation' , config),
            scope = config.scope || me,
            record,
            callback;

      callback = function (operation) {
             if (operation.wasSuccessful()) {
                  record = operation.getRecords()[0];
                  Ext.callback(config.success, scope, [record, operation]);
            } else {
                  Ext.callback(config.failure, scope, [record, operation]);
            }
            Ext.callback(config.callback, scope, [record, operation]);
      };

      me.proxy.read(operation, callback, me);
}

Thursday, August 9, 2012

ExtJS 4: Force POST request in forms


To force post request in form, you have to specify the following property in the proxy:

    actionMethods: {
        create : 'POST' ,
        read   : 'POST' ,
        update : 'POST' ,
        destroy: 'POST'
    }

If you want apply this to all your models/stores, you can create your own proxy:

Ext.define( "My.data.AjaxProxy",{
      extend: "Ext.data.proxy.Ajax" ,
      alias: "proxy.myAjaxProxy" ,
      actionMethods: "POST" ,
});

An using it in your model/store:

proxy: {
      type: "myAjaxProxy" ,
      ...
}

Tuesday, February 28, 2012

I would like to use a static member named 'name' in my class

I would like to use a static member named 'name' in my class :

app.js
Ext.define("MyClass", {
      statics: {
            myVar: "toto",
            name: "could not be found"
      }
});
Ext.onReady(function(){
      console.log("MyClass.myVar = ", MyClass.myVar);
      console.log("MyClass.name = ", MyClass.name);
});

output
MyClass.myVar = toto
MyClass.name = 

But this member is not set as you can see if you execute the previous code. "Ext.Base" has a method 'getName()' and I think this is the source of my problem.
The only workaround I have found for the moment is the following:

app.js
Ext.namespace('MyClass');
MyClass.myVar = "toto";
MyClass.name = "Could not be found";
Ext.onReady(function(){
      console.log("MyClass.myVar = ", MyClass.myVar);
      console.log("MyClass.name = ", MyClass.name);
});

Monday, February 13, 2012

Create a child component in a grid cell


This is a useful function that add an Ext component to a grid cell.
The function returns an HTML block and use a deferred function which add a Ext component to this div element.

/**
 * create a Ext component in a grid
 * @param
 *          - className {String}: the class name of the component to create
 *          - config (optional) {Object}: the configuration of the component to create
 */
addGridComponent: function(options){
      if (options.className){
            // create a unique ID
            var id = Ext.id();
            // create a function which the call will be defer
            Ext.defer(function(){
                  var config = {renderTo: id};
                  // add parameter options to render property
                  if (options.config){
                        Ext.apply(config, options.config);
                  }
                  Ext.create(options.className, config);
            }, 25);
            return (Ext.String.format('
', id));
      }
}


Tuesday, December 27, 2011

Ext JS 4: menu appears on the button and not on the top

I try to use a bottom toolbar on a panel. My button has a menu and when the menu is displayed (only the first time) it appears to down and hide the button. This is an example:

Ext.onReady(function(){
 Ext.create("Ext.Viewport", {
  layout: "fit",
  items: {
   xtype: "panel", title: "My Panel",
   bbar: {
    xtype: "toolbar", id: "mybbar",
    items: [{
     id: "myBtn", text: "button 1",
     //menuAlign: 'tl', ... doesn't work
     menu: {
      title: "MENU", 
      //buttonAlign: "left", ... doesn't work
      //defaultAlign: "myBtn", ... doesn't work
      items: [{text: "option 1"}, {text: "option 2"}, {text: "option 3"}]
     }
    }, {text: "button 2"}]
   },
   html: "content"
  }
 });
})

The only way to solve this problem I have found is to add a listener to the button with the following code:

{
 id: "myBtn", text: "button 1",
 menu: {
  title: "MENU", 
  items: [{text: "option 1"}, {text: "option 2"}, {text: "option 3"}]
 },
 listeners: {
  menushow: function(oBtn, oMenu){
   oMenu.alignTo(oBtn);
  }
 }
}

Force the alignment to the button when the menu is displayed.

Friday, December 9, 2011

Ext JS 4: change the tab height of tab panel


I try to change the tab height in Ext JS 4, to display more information inside it (with a carriage return).
This is what I tried to release:



To do this I have modified my CSS page as below:

app.css
.MainPanel .x-tab-bar-strip {
    top: 40px !important/* Default value is 20, we add 20 = 40 */
}
.MainPanel .x-tab-bar .x-tab-bar-body {
    height: 43px !important/* Default value is 23, we add 20 = 43 */
    border: 0 !important/* Overides the border that appears on resizing the grid */
}
.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner {
    height: 41px !important/* Default value is 21, we add 20 = 41 */
}
.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab {
    height: 41px !important/* Default value is 21, we add 20 = 41 */
}
.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab button {
    height: 43px !important
    line-height: 43px !important;
}
.MainPanel .x-tab-center{
      margin-top: -10px
}

app.js
Ext.onReady(function(){
var t = {title: 'line1 <br /> line2'};
    Ext.create("Ext.tab.Panel", {
        renderTo: Ext.getBody(),
        cls: "MainPanel",
        items: [t, t, t, t, t]
    });
});