#extjs4
#extjs4
Вопрос:
Я привожу код, который я использовал.. Пожалуйста, помогите…
Раздел JavaScript выглядит следующим образом:
Ext.define('NewsInfo', {
extend: 'Ext.data.Model',
fields: [
{ name:'news_id', mapping:'news_id', type:'int' },
{ name:'news_title', mapping:'news_title', type:'string' },
{ name:'news_summary', mapping:'news_summary', type:'string' },
{ name:'news_description', mapping:'news_description', type:'string' },
{ name:'news_source', mapping:'news_source', type:'string' },
{ name:'published_on', mapping:'published_on', type:'date', dateFormat:'Y-m-d H:i:s' },
{ name:'on_skype', mapping:'on_skype', type:'string' },
{ name:'is_active', mapping:'is_active', type:'string' },
{ name:'updated_at', mapping:'updated_at', type:'date', dateFormat:'Y-m-d H:i:s' }
]/*,
validations: [{
type: 'length',
field: 'news_title',
min: 1
}, {
type: 'length',
field: 'news_summary',
min: 1
}, {
type: 'length',
field: 'news_description',
min: 1
}]*/
});
store = new Ext.data.JsonStore({
autoLoad: true,
model: 'NewsInfo',
sortInfo: { field:'news_title', direction:'ASC'},
idProperty: 'news_id',
remoteSort: true,
proxy: new Ext.data.HttpProxy({
url: $this._s_ajax_url '/load_news_collection/true',
method: 'POST'
}),
reader: Ext.data.JsonReader({
url: $this._s_ajax_url '/load_news_collection/true',
fields: [
{ name:'news_id', mapping:'news_id', type:'int' },
{ name:'news_title', mapping:'news_title', type:'string' },
{ name:'news_summary', mapping:'news_summary', type:'string' },
{ name:'news_description', mapping:'news_description', type:'string' },
{ name:'news_source', mapping:'news_source', type:'string' },
{ name:'published_on', mapping:'published_on', type:'date', dateFormat:'Y-m-d H:i:s' },
{ name:'on_skype', mapping:'on_skype', type:'string' },
{ name:'is_active', mapping:'is_active', type:'string' },
{ name:'updated_at', mapping:'updated_at', type:'date', dateFormat:'Y-m-d H:i:s' }
],
root: 'records',
totalProperty: 'row_count',
successProperty: 'success'
})
});
var columns = [
{
text : 'News ID',
width : 55,
sortable : true,
hideable : false,
dataIndex: 'news_id'
},
{
text : 'News Sinossi',
width : 235,
sortable : true,
hideable : true,
dataIndex: 'news_title'
},
{
text : 'Active',
width : 75,
sortable : true,
hideable : true,
dataIndex: 'is_active',
align : 'center',
renderer : function (s_val) {
if (s_val == 'YES')
{
return '<img src="' $this.get_skin_url('images/icons/tick_circle.png') '" alt="' s_val '" title="' s_val '" />';
}
return '<img src="' $this.get_skin_url('images/icons/cross_circle.png') '" alt="' s_val '" title="' s_val '" />';
}
},
{
text : 'Last Updated',
align : 'center',
width : 95,
sortable : true,
hideable : false,
renderer : Ext.util.Format.dateRenderer('d-M-Y'),
dataIndex: 'updated_at'
},
{
xtype : 'actioncolumn',
align : 'center',
hideable: false,
width : 70,
items : [{
icon : $this.get_skin_url('images/icons/pencil.png'), // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var obj_rec = store.getAt(rowIndex);
$('#div_news_grid_container').slideUp(800);
$('#div_editor_content').slideDown(800, function () {
$('#news_id').val(obj_rec.get('news_id'));
$('#news_title').val(obj_rec.get('news_title'));
$('#news_summary').val(obj_rec.get('news_summary'));
tinyMCE.get('news_description').setContent(obj_rec.get('news_description'));
});
}
}, {
icon : $this.get_skin_url('images/icons/view.png'), // Use a URL in the icon config
tooltip: 'View',
handler: function(grid, rowIndex, colIndex) {
var obj_rec = store.getAt(rowIndex);
var s_description = "<div style="background-color:white !important; height:100%; overflow:auto;">
" obj_rec.get('news_description') "
</div>";
var s_description_html = "<div style="background-color:white !important; height:100%; overflow:auto;">
<pre>
" obj_rec.get('description_html') "
</pre>
</div>";
Ext.create('Ext.window.Window', {
renderTo: "main-content",
title: "Description for " obj_rec.get('title_text'),
closeAction: 'hide',
minimizable: false,
maximizable: false,
resizable: true,
modal: true,
layout: 'border',
height: 350,
width: 550,
items: [{
region: 'center',
xtype: 'tabpanel',
items: [{
title: 'Preview',
html: s_description
}, {
title: 'HTML',
html: s_description_html
}]
}]
}).show();
}
}, {
icon : $this.get_skin_url('images/icons/cross.png'), // Use a URL in the icon config
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var obj_rec = store.getAt(rowIndex);
var s_news_title = obj_rec.get('title_text');
var i_news_id = obj_rec.get('news_id');
Ext.MessageBox.show({
title:'Confirm Delete',
msg: 'Do you really want to remove ' s_news_title '?',
buttons: Ext.MessageBox.YESNO,
icon: Ext.MessageBox.QUESTION,
closable: false,
fn: function (btn) {
if (btn == 'yes')
{
$this.delete_news(i_news_id);
}
}
});
}
}]
}
];
store.on('load', function () {
Ext.create('Ext.grid.Panel', {
store: store,
columns: columns,
height: 350,
width: 645,
title: 'News Management System',
renderTo: 'div_news_grid',
loadMask: true,
viewConfig: {
stripeRows: true
},
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', /*{
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}*/]
})
});
});
Сервер отвечает следующим:
{
"records":[
{
"news_id":"1",
"news_title":"comunicato",
"news_summary":"Un corso di lingua da seguire sempre, anche fuori sede Un problema che si riscontra frequentemente nelle",
"news_description":"<p>amp;nbsp;</p>rn <p>Lu2019estate u00e8 alle porte e desideriamo aggiornarvi sulle attivitu00e0 che stiamo organizzando per voi:</p>rn <p>amp;nbsp;</p>rn <p>Per i bambini e i ragazzi dai 4 ai 19 anni proponiamo un programma ricco di giochi, attivitu00e0 pratiche, laboratori e tanto divertimento! Unu2019occasione in piu00f9 per mettere in pratica le conoscenze linguistiche in un contesto diverso da quello prettamente scolastico favorendo anche il lavoro di gruppo.</p>rn <ul class="list01">rn <li>Si puu00f2 scegliere di fare 1 o 2 settimane</li>rn <li>I corsi si svolgono dal 13 giugno al 1 luglio (7 u2013 19 anni) e dal 4 al 15 luglio (4 u2013 6 anni), dal lunedu00ec al venerdu00ec, dalle 8.30 alle 12.30</li>rn <li>2 settimane: u20ac 280,00</li>rn <li>1 settimana: u20ac 150,00</li>rn <li>I gruppi verranno attivati al raggiungimento di minimo 5 partecipanti e massimo 10</li>rn <li>Al raggiungimento di 10 partecipanti ci saru00e0 uno sconto del 20% per ogni studente, quindi se avete amici o parenti interessati avvertiteli!</li>rn <li>Saru00e0 disponibile un servizio di pre e post accoglienza </li>rn </ul>rn <p>Infine vi ricordiamo che la scuola resteru00e0 aperta per tutta lu2019estate (eccetto dal 1 al 22 agosto) per lezioni individuali, recupero crediti scolastici e mini-gruppi.</p>rn <p>amp;nbsp;</p>",
"is_active":"YES",
"published_on":"2011-03-01 15:53:36",
"updated_at":"2011-05-25 20:19:12"
}
],
"row_count":1,
"success":true
}
Ответ №1:
Это помечено extjs4, поэтому я думаю, что это может быть просто вопросом изменения конфигурации вашего объекта в соответствии с новыми параметрами конфигурации:
- У вас есть оба поля и модель, определенные в хранилище. Вам нужна только модель.
- idProperty теперь определен как часть модели, он есть в хранилище
- теперь считыватели определены как часть прокси, они есть в хранилище
- специализированные типы хранилищ устарели (или, по крайней мере, недокументированы)
- Возможно, ваша автозагрузка завершается до регистрации вашего включения (‘load’).
- sortInfo должен быть определен как сортировщики
Я настоятельно рекомендую всегда обращаться к официальному API для определения «подходящих» конфигураций. Для хранилищ:http://docs.sencha.com/ext-js/4-0/#/api/Ext.data.Магазин
Вот модифицированная (но непроверенная) версия вашего кода с примерами изменений, которые необходимо внести:
Ext.define('NewsInfo', {
extend: 'Ext.data.Model',
idProperty: 'news_id',
// The rest of this should be right
});
Конфигурация хранилища сильно отличается и, вероятно, находится в корне ваших данных, которые не загружаются:
var store = new Ext.data.Store({
autoLoad: {
callback: function() {
Ext.create('Ext.grid.Panel', {
// The rest of this should be right, too, pulled up from listener
});
}
},
model: 'NewsInfo',
sorters: [{ property:'news_title', direction:'ASC'}],
remoteSort: true,
proxy: {
type: 'ajax',
url: $this._s_ajax_url '/load_news_collection/true',
method: 'POST',
reader: {
type: 'json',
root: 'records',
totalProperty: 'row_count',
successProperty: 'success'
}
})
});
Комментарии:
1. Спасибо, мистер Кевин Вон, ваше решение действительно сработало для меня. Большое вам спасибо. С уважением, Ариндам Бхаттачарья
2. @arindam.at.ur.sevice — Добро пожаловать в Stack Overflow. Когда люди предоставляют ответы, которые решают наши проблемы, мы отмечаем их как принятый ответ, устанавливая пустой флажок рядом с правильным ответом.
3. @arindam — Всегда пожалуйста. Я по ошибке оставил ссылку на «JSONStore», которая должна была быть просто «Store», как указано в моем четвертом пункте. Как указывает Джоэл, если вы нашли это решение полезным, пожалуйста, отметьте его как принятый ответ на ваш вопрос! Спасибо.
Ответ №2:
Я, наконец, нашел свою проблему, это не версия json. Это может показаться глупым, но я работал локально на своем рабочем столе и выполнял запрос Json на сервер (www.domain.com/json.php ).
Вы можете создать свой интерфейс, не заходя на сервер. Но если вы используете форму и отправляете. Ваш веб-сайт также должен быть на сервере.