Những chú ý khi viết ExtJs 4

1) Để trả về 1 Model ta search thử các cách như:

method : getRecord
event : itemClick

2) Thay vì dùng association để tạo relationship, ta dùng filter (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-filter) để thay thế.

3) Để load 1 view trong Controllers ta dùng :

refs : [{
		ref : 'panelCenter',
		selector: 'panelcenter'
}]
...
init: function() {
...
this.getPanelCenter()
...
}

4) Mọi requires store,model nên viết trong controllers. Mọi requires view nên viết trong Viewport

Controllers :

stores: ['Persons'],
models: ['Person'],

View :

requires: [
'Person.view.panelLeft',
'Person.view.PeopleDataView'
]

5) Cứ mỗi 1 items nào đó của view mà được dùng để lập trình sau này thì phải tạo 1 file view cho nó, đồng thời cung cấp alias. VD: file formPerson.js thì cung cấp : alias: ‘widget.formperson’

6) Itemid thì nên đăt bên trong viewport. VD: Viewport -> panelCenter thì ta đặt itemId: ‘panelCenter’

7) 1 button muốn dễ nhận ra thì thêm properties action cho nó. Để gọi action thì ta gõ như sau:

button[action="save"]

8) Để load data lên form thì ta dùng hàm form.loadRecord(record)

9) Để lấy data từ trong form thì ta dùng hàm form.getValues(). Để lấy model đang dùng trong form thì ta dùng form.getRecord()

10) Để load 1 store trong Controllers : this.getStore(‘Persons’).load();

11) Name của 1 alias nên là đường dẫn tới nó + tên file. VD: file Form, đặt tại thư mục user/Form.js =>

alias='widget.UserForm'

12) Để cấu hình cho 1 layout thì ta phải viết như sau:

layout: {
type: 'vbox',
align: 'stretch'
}

13) Dùng sự kiện tabchange để bắt event click vào tab.

14) Khi muốn setActivetab, ta có thể truyền tham số vào là : Index/ItemId/tabPanel

15) Lấy ra 1 store, model khi ở trong View (Vì mặc định chỉ có Controllers là load được store, model):

Ext.data.StoreManager.lookup('Roles').findRecord('id', id_role).get('name')

Hàm lookup sẽ tìm ra store là Roles, hàm findRecord sẽ trả về 1 model, và hàm Get sẽ trả về valuecủa field name

16) Comboxbox là xtype :

xtype: 'combo',
queryMode: 'local', // load local

name: 'id_role', // name
fieldLabel: 'Role', 
allowBlank: false,
displayField: 'name',
valueField: 'id',
value: '1',
store: 'Roles'

17) Giải thích vtypes :
Cùng phân tích vtypes daterange như sau :

Ext.apply(Ext.form.field.VTypes, {
    daterange: function(val, field) {
        var date = field.parseDate(val);
        if (!date) {
            return false;
        }
        if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
            var start = field.up('form').down('#' + field.startDateField);
            start.setMaxValue(date);
            start.validate();
            this.dateRangeMax = date;
        }
        else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
            var end = field.up('form').down('#' + field.endDateField);
            end.setMinValue(date);
            end.validate();
            this.dateRangeMin = date;
        }
        /*
            * Always return true since we're only using this vtype to set the
            * min/max allowed values (these are tested for after the vtype test)
            */
        return true;
    },
    daterangeText: 'Start date must be less than end date',
});

Form như sau :

{
    xtype: 'datefield',

    name: 'date_start',
    fieldLabel: 'From',
    altFormats: 'm/d/Y',
    format: 'm/d/Y',
    allowBlank: false,
    vtype: 'daterange',
    id: 'startdt',
    endDateField: 'enddt', // id of the start date field
    minValue: new Date(),
}, {
    xtype: 'datefield',

    name: 'date_end',
    fieldLabel: 'To',
    altFormats: 'm/d/Y',
    format: 'm/d/Y',
    vtype: 'daterange',
    id: 'enddt',
    startDateField: 'startdt', // id of the end date field
    minValue: new Date()  // limited to the current date or prior
}

Ta thấy được đầu tiên vtypes sẽ kiểm tra xem field nào được gọi bằng cách if(field.startDateField…). Sau khi xác định được field nào được gọi, nó sẽ tìm đến field kia bằng cách đi trong DOM

var start = field.up('form').down('#' + field.startDateField);

Sau đó gán giá trị max vào field đó. Ngược lại cũng làm tương tự với endDateField

Advertisements