Рендеринг иконки длинных блоков процесса в ExtJS - PullRequest
1 голос
/ 31 июля 2010

Возможность, которую я реализую, на самом деле не является обязательной, поэтому я не буду включать дополнительную библиотеку потоков только для этого. Но если кто-то знает обходной путь, я буду признателен за это.

Итак, у меня есть сетка из 256 строк и 3 столбцов; один из этих столбцов - checkboxColumn (аналогично тому, который использовался здесь ). Но этот плагин checkboxColumn был изменен, чтобы отображать флажок в заголовке, чтобы разрешить некоторые функции Check-All и Check-None.

Поскольку строк так много, процесс проверки занимает много времени. Поэтому я решил поставить «Вращающееся колесо» (жду gif-анимацию). И теперь проблема в том, что анимация не работает. Поэтому я добавил вызов defer, чтобы разрешить рендеринг анимированной иконки, но кажется, что defer недостаточно для запуска анимации. Хотя это defer по крайней мере позволяет показывать первый кадр ожидающего изображения, вместо того, чтобы показывать проверенное состояние в течение приблизительно минуты, пока не будет показано непроверенное состояние, когда все сделано.

Вот дорогой метод:

internalSetAllColumn: function(column, newValue) {
    column.masterValue = newValue;
    column.header = '<div class="x-grid3-check-col-td loading-indicator">&#160;</div>'; // loading icon
    this.grid.getView().updateHeaders();
    (function() {
        this.grid.getStore().each(function(rec) {
            if (this.isCellEditable(rec)) {
                rec.set(this.dataIndex, newValue);
            }
        }, this);
        column.renderHeaderCheck();
        this.grid.getView().updateHeaders();
    }).defer(50, this);
}

И рабочий пример вы можете увидеть в следующем фрагменте кода:

/*global Ext */

Ext.grid.CheckColumn = function(config){
    Ext.apply(this, config);
    if(!this.id){
        this.id = Ext.id();
    }
    this.headerText = this.headerText || this.header || '&#160;';
    this.renderer = this.renderer.createDelegate(this);
};
Ext.grid.CheckColumn.prototype = {
    init: function(grid) {
        this.grid = grid;
        var column = this.grid.getColumnModel().getColumnById(this.id);
        column.masterValue = false;
        if (this.headerCheck) {
            column.renderHeaderCheck();
        }
        this.grid.on('headerclick', this.onHeaderClick, this);
        this.grid.on('render', function() {
            var view = this.grid.getView();
            view.mainBody.on('mousedown', this.onMouseDown, this);
            view.updateHeaders();
        }, this);
    }
    , dataIndex: ''
    , masterValue: false
    , width: 90
    , fixed: true
    , headerCheck: false
    , enableHeaderControl: true
    , onMouseDown: function(e, t) {
        if (!this.readonly) {
            if (Ext.fly(t).hasClass('x-grid3-cc-' + this.id)) {
                e.stopEvent();
                var editEvent = {};
                editEvent.row = this.grid.getView().findRowIndex(t);
                editEvent.column = this.grid.getColumnModel().findColumnIndex(this.dataIndex);
                editEvent.grid = this.grid;
                editEvent.field = this.dataIndex;
                editEvent.record = this.grid.store.getAt(editEvent.row);
                editEvent.originalValue = editEvent.record.data[this.dataIndex];
                editEvent.value = !editEvent.originalValue;
                editEvent.record.set(editEvent.field, editEvent.value);
                editEvent.grid.fireEvent('afteredit', editEvent);
            }
        }
    },

    getCheckedCls: function(v) {
        return v === -1 ? 'x-grid3-check-col-gray' : (v ? 'x-grid3-check-col-on' : 'x-grid3-check-col');
    },

    renderHeaderCheck: function() {
        this.header = '<div class="' + this.getCheckedCls(this.masterValue) + '">' + this.headerText + '</div>';
    },

    onHeaderClick: function(grid, columnIndex, event) {
        var colModel = grid.getColumnModel();
        var cIndex = colModel.getIndexById(this.id);
        if (cIndex == columnIndex && this.enableHeaderControl !== false && this.headerCheck) {
            var column = colModel.getColumnById(this.id);
            var newValue = !column.masterValue;
            this.internalSetAllColumn(column, newValue);
            colModel.fireEvent("headerchange", colModel, columnIndex, column.header);
            this.grid.getView().updateHeaders();
        }
    },

    renderer: function(v, p, record, rowIndex, colIndex, store) {
        p.css += ' x-grid3-check-col-td';
        return '<div class="' + this.getCheckedCls(v) + ' x-grid3-cc-' + this.id + '"> </div>';
    },

    internalSetAllColumn: function(column, newValue) {
        column.masterValue = newValue;
        column.header = '<div class="x-grid3-check-col-td loading-indicator">&#160;</div>'; // loading icon
        this.grid.getView().updateHeaders();
        (function() {
            this.grid.getStore().each(function(rec) {
                rec.set(this.dataIndex, newValue);
            }, this);
            column.renderHeaderCheck();
            this.grid.getView().updateHeaders();
        }).defer(50, this);
    },

    setAllColumn: function(columnIndex, newValue) {
        var colModel = this.grid.getColumnModel();
        var colId = colModel.getColumnId(columnIndex);
        var column = colModel.getColumnById(colId);
        this.internalSetAllColumn(column, newValue);
        this.grid.getView().updateHeaders();
    }
};

// -----------------------------------------
// End of plugin - Beginning of example code
// -----------------------------------------

        var chkColCountry = new Ext.grid.CheckColumn({ dataIndex: 'State.After', width: 50, headerCheck: true });

        var dsCountries = new Ext.data.ArrayStore({
            fields: ['Id', 'Name']
            , data: [["US","United States"],["CA","Canada"],["AF","Afghanistan"],["AL","Albania"],["DZ","Algeria"],["DS","American Samoa"],["AD","Andorra"],["AO","Angola"],["AI","Anguilla"],["AQ","Antarctica"],["AG","Antigua and/or Barbuda"],["AR","Argentina"],["AM","Armenia"],["AW","Aruba"],["AU","Australia"],["AT","Austria"],["AZ","Azerbaijan"],["BS","Bahamas"],["BH","Bahrain"],["BD","Bangladesh"],["BB","Barbados"],["BY","Belarus"],["BE","Belgium"],["BZ","Belize"],["BJ","Benin"],["BM","Bermuda"],["BT","Bhutan"],["BO","Bolivia"],["BA","Bosnia and Herzegovina"],["BW","Botswana"],["BV","Bouvet Island"],["BR","Brazil"],["IO","British lndian Ocean Territory"],["BN","Brunei Darussalam"],["BG","Bulgaria"],["BF","Burkina Faso"],["BI","Burundi"],["KH","Cambodia"],["CM","Cameroon"],["CV","Cape Verde"],["KY","Cayman Islands"],["CF","Central African Republic"],["TD","Chad"],["CL","Chile"],["CN","China"],["CX","Christmas Island"],["CC","Cocos (Keeling) Islands"],["CO","Colombia"],["KM","Comoros"],["CG","Congo"],["CK","Cook Islands"],["CR","Costa Rica"],["HR","Croatia (Hrvatska)"],["CU","Cuba"],["CY","Cyprus"],["CZ","Czech Republic"],["DK","Denmark"],["DJ","Djibouti"],["DM","Dominica"],["DO","Dominican Republic"],["TP","East Timor"],["EC","Ecudaor"],["EG","Egypt"],["SV","El Salvador"],["GQ","Equatorial Guinea"],["ER","Eritrea"],["EE","Estonia"],["ET","Ethiopia"],["FK","Falkland Islands (Malvinas)"],["FO","Faroe Islands"],["FJ","Fiji"],["FI","Finland"],["FR","France"],["FX","France, Metropolitan"],["GF","French Guiana"],["PF","French Polynesia"],["TF","French Southern Territories"],["GA","Gabon"],["GM","Gambia"],["GE","Georgia"],["DE","Germany"],["GH","Ghana"],["GI","Gibraltar"],["GR","Greece"],["GL","Greenland"],["GD","Grenada"],["GP","Guadeloupe"],["GU","Guam"],["GT","Guatemala"],["GN","Guinea"],["GW","Guinea-Bissau"],["GY","Guyana"],["HT","Haiti"],["HM","Heard and Mc Donald Islands"],["HN","Honduras"],["HK","Hong Kong"],["HU","Hungary"],["IS","Iceland"],["IN","India"],["ID","Indonesia"],["IR","Iran (Islamic Republic of)"],["IQ","Iraq"],["IE","Ireland"],["IL","Israel"],["IT","Italy"],["CI","Ivory Coast"],["JM","Jamaica"],["JP","Japan"],["JO","Jordan"],["KZ","Kazakhstan"],["KE","Kenya"],["KI","Kiribati"],["KP","Korea, Democratic People's Republic of"],["KR","Korea, Republic of"],["KW","Kuwait"],["KG","Kyrgyzstan"],["LA","Lao People's Democratic Republic"],["LV","Latvia"],["LB","Lebanon"],["LS","Lesotho"],["LR","Liberia"],["LY","Libyan Arab Jamahiriya"],["LI","Liechtenstein"],["LT","Lithuania"],["LU","Luxembourg"],["MO","Macau"],["MK","Macedonia"],["MG","Madagascar"],["MW","Malawi"],["MY","Malaysia"],["MV","Maldives"],["ML","Mali"],["MT","Malta"],["MH","Marshall Islands"],["MQ","Martinique"],["MR","Mauritania"],["MU","Mauritius"],["TY","Mayotte"],["MX","Mexico"],["FM","Micronesia, Federated States of"],["MD","Moldova, Republic of"],["MC","Monaco"],["MN","Mongolia"],["MS","Montserrat"],["MA","Morocco"],["MZ","Mozambique"],["MM","Myanmar"],["NA","Namibia"],["NR","Nauru"],["NP","Nepal"],["NL","Netherlands"],["AN","Netherlands Antilles"],["NC","New Caledonia"],["NZ","New Zealand"],["NI","Nicaragua"],["NE","Niger"],["NG","Nigeria"],["NU","Niue"],["NF","Norfork Island"],["MP","Northern Mariana Islands"],["NO","Norway"],["OM","Oman"],["PK","Pakistan"],["PW","Palau"],["PA","Panama"],["PG","Papua New Guinea"],["PY","Paraguay"],["PE","Peru"],["PH","Philippines"],["PN","Pitcairn"],["PL","Poland"],["PT","Portugal"],["PR","Puerto Rico"],["QA","Qatar"],["RE","Reunion"],["RO","Romania"],["RU","Russian Federation"],["RW","Rwanda"],["KN","Saint Kitts and Nevis"],["LC","Saint Lucia"],["VC","Saint Vincent and the Grenadines"],["WS","Samoa"],["SM","San Marino"],["ST","Sao Tome and Principe"],["SA","Saudi Arabia"],["SN","Senegal"],["SC","Seychelles"],["SL","Sierra Leone"],["SG","Singapore"],["SK","Slovakia"],["SI","Slovenia"],["SB","Solomon Islands"],["SO","Somalia"],["ZA","South Africa"],["GS","South Georgia South Sandwich Islands"],["ES","Spain"],["LK","Sri Lanka"],["SH","St. Helena"],["PM","St. Pierre and Miquelon"],["SD","Sudan"],["SR","Suriname"],["SJ","Svalbarn and Jan Mayen Islands"],["SZ","Swaziland"],["SE","Sweden"],["CH","Switzerland"],["SY","Syrian Arab Republic"],["TW","Taiwan"],["TJ","Tajikistan"],["TZ","Tanzania, United Republic of"],["TH","Thailand"],["TG","Togo"],["TK","Tokelau"],["TO","Tonga"],["TT","Trinidad and Tobago"],["TN","Tunisia"],["TR","Turkey"],["TM","Turkmenistan"],["TC","Turks and Caicos Islands"],["TV","Tuvalu"],["UG","Uganda"],["UA","Ukraine"],["AE","United Arab Emirates"],["GB","United Kingdom"],["UM","United States minor outlying islands"],["UY","Uruguay"],["UZ","Uzbekistan"],["VU","Vanuatu"],["VA","Vatican City State"],["VE","Venezuela"],["VN","Vietnam"],["VG","Virigan Islands (British)"],["VI","Virgin Islands (U.S.)"],["WF","Wallis and Futuna Islands"],["EH","Western Sahara"],["YE","Yemen"],["YU","Yugoslavia"],["ZR","Zaire"],["ZM","Zambia"],["ZW","Zimbabwe"]]
            , autoLoad: false
        });

        var cmCountry = new Ext.grid.ColumnModel([
            chkColCountry
            , { id: 'Id', header: 'Id', dataIndex: 'Id', width: 40 }
            , { id: 'Name', header: 'CountryName', dataIndex: 'Name', width: 460 }
            , { id: 'After', header: 'After', dataIndex: 'State.After', hidden: true }
        ]);

        var grdCountries = new Ext.grid.GridPanel({
            store: dsCountries
            , cm: cmCountry
            , plugins: chkColCountry
            , enableHdMenu: false
        });

        var win = new Ext.Window({
          layout: 'fit'
          , height: 190
          , width: 600
          , items: [grdCountries]
        });
        win.show();
<link href="//cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/resources/css/ext-all.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/adapter/ext/ext-base.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/ext-all.js"></script>

Установите флажок в столбце (тот, что в заголовке) и увидите изображение, которое не вращается , как ожидается .

Примечание: у меня есть функция подкачки в других местах, но я не буду использовать ее здесь, поскольку 256 строк всегда одинаковы. Поэтому я предпочитаю потерять кнопку «проверить все», чем пейджинг.

Ответы [ 3 ]

3 голосов
/ 31 июля 2010

Проблема не в использовании .defer(), а в том, что вы делаете это на неправильном уровне.Тесный цикл над записями - вот что вызывает замораживание, и вы фактически не выгружаете эти обновления пользовательского интерфейса в другой поток, вы просто откладываете выполнение цикла.Когда цикл запускается через 50 миллисекунд, он все еще остается узким циклом, выполнение которого занимает некоторое время.

Это быстрое решение, которое, хотя и не оптимально, вероятно, ближе к тому, что вы хотите:

    this.grid.getStore().each(function(rec) {
       rec.set.defer(1, rec, [this.dataIndex, newValue]);
    }, this);
    column.renderHeaderCheck();
    this.grid.getView().updateHeaders();

Пара заметок.Если вы используете defer, чтобы просто выполнить код в другом потоке (а не потому, что вам нужна определенная задержка), просто используйте 1 мс.Не нужно ждать дольше без причины.

Во-вторых, остерегайтесь использовать отсрочку, как это - это может работать в этом случае, но это не является общей практикой.Когда вы начинаете откладывать вещи (особенно в таком цикле), это может вызвать проблемы, если другой код выполняется в середине цикла, что также может повлиять на ваше хранилище.В идеале вы могли бы найти более подходящее решение, например, отложить только обновление пользовательского интерфейса сетки, но я подозреваю, что для этого может потребоваться переопределение или два (не уверен, что у меня в голове).Так что, если это решит это для вас, отлично - но не говорите, что я не предупредил вас, если позже появится какая-то другая странная ошибка;)

Кстати, если вы прокручиваетесь вниз в сетке, тамвсе равно будет заметная задержка для пользователя, так как цикл все еще выполняется сверху вниз.Вы можете получить модные и обновить видимые записи, прежде чем переходить к остальной части набора данных - зависит от того, сколько усилий вы хотите приложить к нему.

РЕДАКТИРОВАТЬ : ОК,после того, как вы немного позаботились об этом, все, что вам нужно сделать, чтобы избежать обновлений пользовательского интерфейса, - сказать хранилищу не запускать события обновления во время цикла, а затем вручную обновить сетку после всех обновлений данных.При таком подходе вам даже не понадобится вертушка в заголовке, и вы избежите всех потенциальных проблем с defer.Попробуйте это:

internalSetAllColumn: function(column, newValue) {
    var store = this.grid.getStore(),
        gridView = this.grid.getView();

    column.masterValue = newValue;

    store.suspendEvents();
    store.each(function(rec) {
        rec.set(this.dataIndex, newValue);
    }, this);
    store.resumeEvents();

    column.renderHeaderCheck();
    gridView.refresh();
}
0 голосов
/ 31 июля 2010

Слишком сложно, вероятно, но он показывает анимированное вращающееся колесо и, кажется, работает просто отлично:

internalSetAllColumn: function(column, newValue) {
    column.masterValue = newValue;
    column.header = '<div class="x-grid3-check-col-td loading-indicator">&#160;</div>'; // loading icon
    this.grid.getView().updateHeaders();
    var store = this.grid.getStore();
    var count = store.getCount();
    var step = 5;
    var times = (count / step) >> 0;
    var task = {
        run: function() {
            var last = step * task.taskRunCount;
            var first = last - step;
            if (first <= count) {
                var recs = store.getRange(first, last);
                Ext.each(recs, function(rec) {
                    rec.set(this.dataIndex, newValue);
                }, this);
            }
            if (task.taskRunCount > times) {
                column.renderHeaderCheck();
                this.grid.getView().updateHeaders();
                return false;
            }
        },
        interval: 1,
        scope: this
    };
    Ext.TaskMgr.start(task);
}

/*global Ext */

Ext.grid.CheckColumn = function(config){
    Ext.apply(this, config);
    if(!this.id){
        this.id = Ext.id();
    }
    this.headerText = this.headerText || this.header || '&#160;';
    this.renderer = this.renderer.createDelegate(this);
};
Ext.grid.CheckColumn.prototype = {
    init: function(grid) {
        this.grid = grid;
        var column = this.grid.getColumnModel().getColumnById(this.id);
        column.masterValue = false;
        if (this.headerCheck) {
            column.renderHeaderCheck();
        }
        this.grid.on('headerclick', this.onHeaderClick, this);
        this.grid.on('render', function() {
            var view = this.grid.getView();
            view.mainBody.on('mousedown', this.onMouseDown, this);
            view.updateHeaders();
        }, this);
    }
    , dataIndex: ''
    , masterValue: false
    , width: 90
    , fixed: true
    , headerCheck: false
    , enableHeaderControl: true
    , onMouseDown: function(e, t) {
        if (!this.readonly) {
            if (Ext.fly(t).hasClass('x-grid3-cc-' + this.id)) {
                e.stopEvent();
                var editEvent = {};
                editEvent.row = this.grid.getView().findRowIndex(t);
                editEvent.column = this.grid.getColumnModel().findColumnIndex(this.dataIndex);
                editEvent.grid = this.grid;
                editEvent.field = this.dataIndex;
                editEvent.record = this.grid.store.getAt(editEvent.row);
                editEvent.originalValue = editEvent.record.data[this.dataIndex];
                editEvent.value = !editEvent.originalValue;
                editEvent.record.set(editEvent.field, editEvent.value);
                editEvent.grid.fireEvent('afteredit', editEvent);
            }
        }
    },

    getCheckedCls: function(v) {
        return v === -1 ? 'x-grid3-check-col-gray' : (v ? 'x-grid3-check-col-on' : 'x-grid3-check-col');
    },

    renderHeaderCheck: function() {
        this.header = '<div class="' + this.getCheckedCls(this.masterValue) + '">' + this.headerText + '</div>';
    },

    onHeaderClick: function(grid, columnIndex, event) {
        var colModel = grid.getColumnModel();
        var cIndex = colModel.getIndexById(this.id);
        if (cIndex == columnIndex && this.enableHeaderControl !== false && this.headerCheck) {
            var column = colModel.getColumnById(this.id);
            var newValue = !column.masterValue;
            this.internalSetAllColumn(column, newValue);
            colModel.fireEvent("headerchange", colModel, columnIndex, column.header);
            this.grid.getView().updateHeaders();
        }
    },

    renderer: function(v, p, record, rowIndex, colIndex, store) {
        p.css += ' x-grid3-check-col-td';
        return '<div class="' + this.getCheckedCls(v) + ' x-grid3-cc-' + this.id + '"> </div>';
    },

    internalSetAllColumn: function(column, newValue) {
        column.masterValue = newValue;
        column.header = '<div class="x-grid3-check-col-td loading-indicator">&#160;</div>'; // loading icon
        this.grid.getView().updateHeaders();
        var store = this.grid.getStore();
        var count = store.getCount();
        var step = 5;
        var times = (count / step) >> 0;
        var task = {
            run: function() {
                var last = step * task.taskRunCount;
                var first = last - step;
                if (first <= count) {
                    var recs = store.getRange(first, last);
                    Ext.each(recs, function(rec) {
                        rec.set(this.dataIndex, newValue);
                    }, this);
                }
                if (task.taskRunCount > times) {
                    column.renderHeaderCheck();
                    this.grid.getView().updateHeaders();
                    return false;
                }
            },
            interval: 1,
            scope: this
        };
        Ext.TaskMgr.start(task);
    },

    setAllColumn: function(columnIndex, newValue) {
        var colModel = this.grid.getColumnModel();
        var colId = colModel.getColumnId(columnIndex);
        var column = colModel.getColumnById(colId);
        this.internalSetAllColumn(column, newValue);
        this.grid.getView().updateHeaders();
    }
};

// -----------------------------------------
// End of plugin - Beginning of example code
// -----------------------------------------

        var chkColCountry = new Ext.grid.CheckColumn({ dataIndex: 'State.After', width: 50, headerCheck: true });

        var dsCountries = new Ext.data.ArrayStore({
            fields: ['Id', 'Name']
            , data: [["US","United States"],["CA","Canada"],["AF","Afghanistan"],["AL","Albania"],["DZ","Algeria"],["DS","American Samoa"],["AD","Andorra"],["AO","Angola"],["AI","Anguilla"],["AQ","Antarctica"],["AG","Antigua and/or Barbuda"],["AR","Argentina"],["AM","Armenia"],["AW","Aruba"],["AU","Australia"],["AT","Austria"],["AZ","Azerbaijan"],["BS","Bahamas"],["BH","Bahrain"],["BD","Bangladesh"],["BB","Barbados"],["BY","Belarus"],["BE","Belgium"],["BZ","Belize"],["BJ","Benin"],["BM","Bermuda"],["BT","Bhutan"],["BO","Bolivia"],["BA","Bosnia and Herzegovina"],["BW","Botswana"],["BV","Bouvet Island"],["BR","Brazil"],["IO","British lndian Ocean Territory"],["BN","Brunei Darussalam"],["BG","Bulgaria"],["BF","Burkina Faso"],["BI","Burundi"],["KH","Cambodia"],["CM","Cameroon"],["CV","Cape Verde"],["KY","Cayman Islands"],["CF","Central African Republic"],["TD","Chad"],["CL","Chile"],["CN","China"],["CX","Christmas Island"],["CC","Cocos (Keeling) Islands"],["CO","Colombia"],["KM","Comoros"],["CG","Congo"],["CK","Cook Islands"],["CR","Costa Rica"],["HR","Croatia (Hrvatska)"],["CU","Cuba"],["CY","Cyprus"],["CZ","Czech Republic"],["DK","Denmark"],["DJ","Djibouti"],["DM","Dominica"],["DO","Dominican Republic"],["TP","East Timor"],["EC","Ecudaor"],["EG","Egypt"],["SV","El Salvador"],["GQ","Equatorial Guinea"],["ER","Eritrea"],["EE","Estonia"],["ET","Ethiopia"],["FK","Falkland Islands (Malvinas)"],["FO","Faroe Islands"],["FJ","Fiji"],["FI","Finland"],["FR","France"],["FX","France, Metropolitan"],["GF","French Guiana"],["PF","French Polynesia"],["TF","French Southern Territories"],["GA","Gabon"],["GM","Gambia"],["GE","Georgia"],["DE","Germany"],["GH","Ghana"],["GI","Gibraltar"],["GR","Greece"],["GL","Greenland"],["GD","Grenada"],["GP","Guadeloupe"],["GU","Guam"],["GT","Guatemala"],["GN","Guinea"],["GW","Guinea-Bissau"],["GY","Guyana"],["HT","Haiti"],["HM","Heard and Mc Donald Islands"],["HN","Honduras"],["HK","Hong Kong"],["HU","Hungary"],["IS","Iceland"],["IN","India"],["ID","Indonesia"],["IR","Iran (Islamic Republic of)"],["IQ","Iraq"],["IE","Ireland"],["IL","Israel"],["IT","Italy"],["CI","Ivory Coast"],["JM","Jamaica"],["JP","Japan"],["JO","Jordan"],["KZ","Kazakhstan"],["KE","Kenya"],["KI","Kiribati"],["KP","Korea, Democratic People's Republic of"],["KR","Korea, Republic of"],["KW","Kuwait"],["KG","Kyrgyzstan"],["LA","Lao People's Democratic Republic"],["LV","Latvia"],["LB","Lebanon"],["LS","Lesotho"],["LR","Liberia"],["LY","Libyan Arab Jamahiriya"],["LI","Liechtenstein"],["LT","Lithuania"],["LU","Luxembourg"],["MO","Macau"],["MK","Macedonia"],["MG","Madagascar"],["MW","Malawi"],["MY","Malaysia"],["MV","Maldives"],["ML","Mali"],["MT","Malta"],["MH","Marshall Islands"],["MQ","Martinique"],["MR","Mauritania"],["MU","Mauritius"],["TY","Mayotte"],["MX","Mexico"],["FM","Micronesia, Federated States of"],["MD","Moldova, Republic of"],["MC","Monaco"],["MN","Mongolia"],["MS","Montserrat"],["MA","Morocco"],["MZ","Mozambique"],["MM","Myanmar"],["NA","Namibia"],["NR","Nauru"],["NP","Nepal"],["NL","Netherlands"],["AN","Netherlands Antilles"],["NC","New Caledonia"],["NZ","New Zealand"],["NI","Nicaragua"],["NE","Niger"],["NG","Nigeria"],["NU","Niue"],["NF","Norfork Island"],["MP","Northern Mariana Islands"],["NO","Norway"],["OM","Oman"],["PK","Pakistan"],["PW","Palau"],["PA","Panama"],["PG","Papua New Guinea"],["PY","Paraguay"],["PE","Peru"],["PH","Philippines"],["PN","Pitcairn"],["PL","Poland"],["PT","Portugal"],["PR","Puerto Rico"],["QA","Qatar"],["RE","Reunion"],["RO","Romania"],["RU","Russian Federation"],["RW","Rwanda"],["KN","Saint Kitts and Nevis"],["LC","Saint Lucia"],["VC","Saint Vincent and the Grenadines"],["WS","Samoa"],["SM","San Marino"],["ST","Sao Tome and Principe"],["SA","Saudi Arabia"],["SN","Senegal"],["SC","Seychelles"],["SL","Sierra Leone"],["SG","Singapore"],["SK","Slovakia"],["SI","Slovenia"],["SB","Solomon Islands"],["SO","Somalia"],["ZA","South Africa"],["GS","South Georgia South Sandwich Islands"],["ES","Spain"],["LK","Sri Lanka"],["SH","St. Helena"],["PM","St. Pierre and Miquelon"],["SD","Sudan"],["SR","Suriname"],["SJ","Svalbarn and Jan Mayen Islands"],["SZ","Swaziland"],["SE","Sweden"],["CH","Switzerland"],["SY","Syrian Arab Republic"],["TW","Taiwan"],["TJ","Tajikistan"],["TZ","Tanzania, United Republic of"],["TH","Thailand"],["TG","Togo"],["TK","Tokelau"],["TO","Tonga"],["TT","Trinidad and Tobago"],["TN","Tunisia"],["TR","Turkey"],["TM","Turkmenistan"],["TC","Turks and Caicos Islands"],["TV","Tuvalu"],["UG","Uganda"],["UA","Ukraine"],["AE","United Arab Emirates"],["GB","United Kingdom"],["UM","United States minor outlying islands"],["UY","Uruguay"],["UZ","Uzbekistan"],["VU","Vanuatu"],["VA","Vatican City State"],["VE","Venezuela"],["VN","Vietnam"],["VG","Virigan Islands (British)"],["VI","Virgin Islands (U.S.)"],["WF","Wallis and Futuna Islands"],["EH","Western Sahara"],["YE","Yemen"],["YU","Yugoslavia"],["ZR","Zaire"],["ZM","Zambia"],["ZW","Zimbabwe"]]
            , autoLoad: false
        });

        var cmCountry = new Ext.grid.ColumnModel([
            chkColCountry
            , { id: 'Id', header: 'Id', dataIndex: 'Id', width: 40 }
            , { id: 'Name', header: 'CountryName', dataIndex: 'Name', width: 460 }
            , { id: 'After', header: 'After', dataIndex: 'State.After', hidden: true }
        ]);

        var grdCountries = new Ext.grid.GridPanel({
            store: dsCountries
            , cm: cmCountry
            , plugins: chkColCountry
            , enableHdMenu: false
        });

        var win = new Ext.Window({
          layout: 'fit'
          , height: 190
          , width: 600
          , items: [grdCountries]
        });
        win.show();
<link href="//cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/resources/css/ext-all.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/adapter/ext/ext-base.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/ext-all.js"></script>
0 голосов
/ 31 июля 2010

Вместо использования defer, попробуйте использовать Ext.TaskMgr, который позволяет вам создать задачу и запустить ее многопоточным способом.

Пример задачи.

var task = {
    run: function(){
        Ext.fly('clock').update(new Date().format('g:i:s A'));
    },
    interval: 1000 //1 second
}
Ext.TaskMgr.start(task);
...