ExtJS: delay/buffer event

listeners: {
    keyup: {
        fn: function () {
            //...
        },
        delay: 500 //buffer: 500
    }
}

ExtJS 4: Wrap Renderer

wrapRenderer: function (value, metadata) {
    metadata.style = 'white-space: normal';
    return value;
}

Ext: confirm dialog localization

if (Ext.window.MessageBox) {
    Ext.window.MessageBox.prototype.buttonText = {
        ok: "OK",
        cancel: "Отмена",
        yes: "Да",
        no: "Нет"
    };
    Ext.MessageBox = Ext.Msg = new Ext.window.MessageBox();
}

ExtJS 4.0 GridPanel double-click event

In ExtJS 4.0 you need to listen for events on the GridPanel’s view, via the “viewConfig”:

    viewConfig: {
        listeners: {
           itemdblclick: function(dataview, index, item, e) {
                    console.log('itemdblclick');
                }
            }
      }

ExtJS State

Set provider:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
  expires: new Date(new Date().getTime() + (1000 * 60 * 60 * 24 * 30))//30 days
}));

Field Example:

{
    xtype: 'textfield',
    fieldLabel: 'Логин',
    name: 'UserName',
    allowBlank: false,
    validateOnBlur: false,
    blankText: 'Введите логин',
    stateful: true,
    stateId: 'UserName',
    stateEvents: ['blur'],
    getState: function () {
        return { value: this.getValue() };
    },
    applyState: function (state) {
        this.setValue(state.value);
    }
}

ExtJS получить параметры URL

Add ext-methods:

Ext.apply(Ext, {
    urlParams: function () {
        return Ext.Object.fromQueryString(location.search);
    },
    urlParam: function (name) {
        return this.urlParams()[name];
    }
});

Use:

var query = Ext.urlParams();
var p1 = query.p1;
//or
var p2 = Ext.urlParam('p2');

ExtJS: 3 Value Checkbox

js:

{
    xtype: 'checkbox',
    fieldLabel: 'Active',
    name: 'Active',
    inputValue: 'true',
    cls: 'value-undefined',
    handler: function () {
        if (!this.uncheckedValue) {
            this.removeCls('value-undefined');
            this.uncheckedValue = 'false';
        }
    },
    reset: function () {
        this.setValue(undefined);
        this.addCls('value-undefined');
        if (this.uncheckedValue) this.uncheckedValue = undefined;
    }
}

css:

.x-field.value-undefined input
{
    opacity:0.4;
}

Ext JS 4: localize grid loading message

Ext.view.AbstractView.prototype.loadingText = "Загрузка...";

ExtJs 4 dateFormat M$

ExtJS 3:
{ name: 'SaleDate', type: 'date', dateFormat: "M$" }


ExtJS 4:
{ name: 'SaleDate', type: 'date', dateFormat: "MS" }

Using ExtJs XTemplate

Ext.Ajax.ws({
 url: "WebService.asmx/GetAllClients",
 success: function(data) {
  var tpl = new Ext.XTemplate(
   '<table class="styled"><tr><th>№</th><th>ID</th><th>Name</th></tr>',
   '<tpl for=".">',
   '<tr><td>{#}</td><td>{ID}</td><td>{Name}</td></tr>',
   '</tpl>',
   '</table>'
  );
  tpl.overwrite(Ext.get('container'), data);
 }
});

My result:

ExtJS grid wrap column

Добавляєм в наше апп метод:

App.Globals.wrapRenderer = function(val) {
    return '<div style="white-space:normal !important;">' + val + '</div>';
}

потім використовуємо:

...
{ 
 header: "Описание", 
 dataIndex: "DESCRIPTION",
 renderer: App.Globals.wrapRenderer, 
 width: 200 
},
...

ExtJS app errors handling

Для того щоб будь-які помилки від сервера виводились в спеціальному вікні
можна зробити override метода request:

Ext.override(Ext.data.Connection, {
    request: Ext.data.Connection.prototype.request.createSequence(function(o) {
        if (!o.failure) {
            o.failure = function(response) {
                var msg = "Unknown server error";
                var resp = Ext.decode(response.responseText);

                if (resp && resp.Message) {
                    msg = resp.Message;
                }

                Ext.Msg.show({
                    title: "Server Error",
                    msg: msg,
                    minWidth: 300,
                    buttons: Ext.Msg.OK,
                    icon: Ext.Msg.ERROR
                });
            }
        }
    })
});

ExtJs VS2008 Project Template

Створив непоганий темплейт для студії:





кому цікаво - можу вислати:)

ExtJs store для json web-сервиса

Используя proxy из предыдущего поста, напишем и сохраним в файл
Ext.data.WsJsonStore.js следуючий код:

Ext.data.WsJsonStore = Ext.extend(Ext.data.JsonStore, {
    constructor: function(c) {
        var d = {
            root: 'd',
            proxy: new Ext.data.WsProxy({
                url: c.url
            })
        }
        Ext.data.WsJsonStore.superclass.constructor
         .call(this, Ext.apply(d, c));
    }
});

Потом, подключив оба файла, используем:

var store = new Ext.data.WsJsonStore({
   url:'url',
   fields: [fields],
   ...
});

ExtJs proxy для web-сервиса

В файл Ext.data.WsProxy.js сохраним такой код:

Ext.data.WsProxy = Ext.extend(Ext.data.HttpProxy, {
    constructor: function(c) {
        var d = {
            method: 'POST',
            headers: { 
              'Content-Type': 'application/json;charset=utf-8' 
            }
        }
        Ext.data.WsProxy.superclass.constructor
         .call(this, Ext.apply(d, c));
    }
});

Потом, подключив его, используем:

var proxy = new Ext.data.WsProxy({
    url:'url'
});

JSON запрос к web-сервису на ExtJs

Для удобства создадим метод:

Ext.Ajax.ws = function(o){
   Ext.Ajax.request({
       method      : "POST",
       url         : o.url,
       jsonData    : o.data || "{}",
       headers     : {
           "Content-Type": "application/json;charset=utf-8"
       },
       success     : function(resp){
           o.success(Ext.decode(resp.responseText));
       }
   });
}

Потом используем:

Ext.Ajax.ws({
   url:"url",
   data:"json data",
   success:function(data){
   }   
});