EXTJS 4 формирует популяцию с чтением JSON
Вопрос
Я новичок в EXTJS и сейчас использую EXTJS-4.1.У меня есть базовая форма, в которую мне нужно заполнить данные при загрузке страницы.URL-адрес сервера вернет JSON.
[{"countryid":1,"countrycode":"US","countryname":"United States"}]
мой код формы
Ext.require([
'Ext.form.*'
//'Ext.layout.container.Column',
//'Ext.tab.Panel'
//'*'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
var bd = Ext.getBody();
/*
* ================ Simple form =======================
*/
bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
Ext.define('app.formStore', {
extend: 'Ext.data.Model',
fields: [
{name: 'countryid'},
{name: 'countrycode'},
{name: 'countryname'}
]
});
var myStore = Ext.create('Ext.data.Store', {
model: 'app.formStore',
proxy: {
type: 'ajax',
url : 'http://localhost/milestone_1/web/app_dev.php/md/country/show/1',
reader:{
type:'json'
}
},
autoLoad:true,
listeners: {
load: function() {
var form = Ext.getCmp('formJobSummary');
form.loadRecord(myStore.data.first());
}
}
});
var testForm = Ext.create('Ext.form.Panel', {
width: 500,
renderTo: Ext.getBody(),
title: 'Country Form',
waitMsgTarget: true,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 85,
msgTarget: 'side'
},
items: [{
xtype: 'fieldset',
items: [{
xtype:'textfield',
fieldLabel: 'ID',
name: 'countryid'
}, {
xtype:'textfield',
fieldLabel: 'CODE',
name: 'countrycode'
}, {
xtype:'textfield',
fieldLabel: 'COUNTRY',
name: 'countryname'
}]
}]
});
this.testForm.getForm().loadRecord(app.formStore);
});
Мне удалось заполнить тот же JSON в сетке.Можете ли вы помочь мне пройти...Я получил много примеров в сети и попробовал, но все равно безуспешно.Приведенное выше также представляет собой модифицированный фрагмент кода, который я получил во время просмотра.
Решение
load()
функция асинхронная.Значит вы правильно сделали — создали обработчик события загрузки и поместили туда логику.Однако вы допустили пару ошибок:
В обработчике загрузки у вас будут некоторые параметры функции.Первым параметром будет хранилище, поэтому вам не нужно использовать глобальную переменную.
Вам не нужно иметь
this.testForm.getForm().loadRecord(app.formStore);
- потому что это неверная команда и в этот момент вы понятия не имеете, загружен ли ваш магазин на самом деле или нет.Убери это.У вас уже есть loadRecords в обработчике хранилища.Отображение формы и автоматическая загрузка хранилища — это два разных события, и вы не можете контролировать их время.Поэтому я бы рекомендовал отключить
autoLoad
для магазина и вручную позвонитьstore.load()
после того, как вы узнаете, что форма готова.
Другие советы
var form = Ext.getCmp('formJobSummary');console.log(form)
, вероятно, вернет undefined
.Назначьте имя в форму и выключите.Или еще лучше ...
// Ext.require([
// 'Ext.form.*'
//'Ext.layout.container.Column',
//'Ext.tab.Panel'
//'*'
// ]); // you dont need ext.require for ext integrated stuff
Ext.onReady(function () {
Ext.QuickTips.init();
//var bd = Ext.getBody();
/*
* ================ Simple form =======================
*/
//bd.createChild({
// tag: 'h2',
// html: 'Form 1 - Very Simple'
//}); // over written by the form anyway
// var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>'; // never used
Ext.define('app.formStore', {
extend: 'Ext.data.Model',
fields: [{
name: 'countryid'
}, {
name: 'countrycode'
}, {
name: 'countryname'
}]
});
var testForm = Ext.create('Ext.form.Panel', {
width: 500,
renderTo: Ext.getBody(),
name:'formJobSummary', //why your orignal bit wasn't working
title: 'Country Form',
waitMsgTarget: true,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 85,
msgTarget: 'side'
},
items: [{
xtype: 'fieldset',
items: [{
xtype: 'textfield',
fieldLabel: 'ID',
name: 'countryid'
}, {
xtype: 'textfield',
fieldLabel: 'CODE',
name: 'countrycode'
}, {
xtype: 'textfield',
fieldLabel: 'COUNTRY',
name: 'countryname'
}]
}]
});
var myStore = Ext.create('Ext.data.Store', {
model: 'app.formStore',
proxy: {
type: 'ajax',
url: 'http://localhost/milestone_1/web/app_dev.php/md/country/show/1',
reader: {
type: 'json'
}
},
autoLoad: true,
listeners: {
load: function (store,record,e) {
testForm.loadRecord(store.first());
}
}
});
});
. Несколько вещей, чтобы попробовать:
1) Если вы ищете свой файл на localhost, не кладите localhost на URL только напишите
URL: '/mileStone_1/web/app_dev.php/md/country/show/1'
Какой у ваш файл php do?Не могли бы вы опубликовать код?
3) Поместите конфигурацию прокси на модели не в магазине.
4) Вы пытаетесь проверить, если магазин прочитал записи на нагрузке?с console.log?