Поиск в extJS
Как произвести поиск по 2 столбцу в подключаемом файле data.js как в примере http://docs.sencha.com/extjs/4.2.3/e...m-search.html?
Формат data.js:
var data=[{"head":["\u2116","INN","Legal_Form_Desc","Customer_Full_Nm","Source_System_Desc"],"rows":[[1,"2302042152","\u041e\u041e\u041e","\u0410\u041c\u041f\u0417 \u0411\u0410\u041a\u0410\u0420","\u0411\u0418\u0421\u041a\u0432\u0438\u0442: \u041a\u0440\u0430\u0441\u043d\u043e\u0434\u0430\u0440",""],[2,"593300087432","\u0418\u041f","\u0411\u0410\u0419\u0414\u0418\u041d\u0410 \u041e\u041b\u042c\u0413\u0410 \u041f\u0410\u0412\u041b\u041e\u0412\u041d\u0410","\u0411\u0418\u0421\u041a\u0432\u0438\u0442: \u0421\u0430\u043c\u0430\u0440\u0430",""]]}];
|
.find("название поля", значение для поиска);
|
А можно поподробнее? А то я в extjs только въезжаю...
Заранее спасибо! |
|
А если добавить поле поиска для клиентов? То есть клиенты вводят первые 6 цифр и получают результат. При этом при загрузке страницы все данные скрыты.
|
Поле поиска с всплывающей подсказкой?
Grid с локальной автоматической фильтрацией? Обращения к серверу и отображения полученных результатов? |
Поле поиска, как в примере http://docs.sencha.com/extjs/4.2.3/e...m-search.html? без всплывающей подсказки.
Про grid не понял. Есть просто файл с данными data.js, который лежит в той же директории. По третьему вопросу - по сути да. |
|
А вы сможете сделать готовый пример за 1000 руб?
|
Я сам в Ext новичек.
|
Цитата:
|
Если убрать proxy типа memory и параметр data, затем раскоментировать proxy типа ajax, то ваш PHP-скрипт будет получать параметр query с частью текста введённого в поле.
Пример.
var ds = Ext.create('Ext.data.Store', {
fields: [
{name: "id", type: "int", mapping: 0},
{name: "inn", type: "int", mapping: 1},
{name: "Legal_Form_Desc", type: "string", mapping: 2},
{name: "Customer_Full_Nm", type: "string", mapping: 3},
{name: "Source_System_Desc", type: "string", mapping: 4}
],
//proxy: {
// type: 'ajax',
// url: 'http://example.com/myScript.php',
// reader: {
// root: "rows"
// }
//}
proxy: {
type: 'memory',
reader: {
root: "rows"
}
},
data: {
"head":[
"\u2116",
"INN",
"Legal_Form_Desc",
"Customer_Full_Nm",
"Source_System_Desc"
],
"rows":[
[1,"2302042152","\u041e\u041e\u041e","\u0410\u041c\u041f\u0417 \u0411\u0410\u041a\u0410\u0420","\u0411\u0418\u0421\u041a\u0432\u0438\u0442: \u041a\u0440\u0430\u0441\u043d\u043e\u0434\u0430\u0440",""],
[2,"593300087432","\u0418\u041f","\u0411\u0410\u0419\u0414\u0418\u041d\u0410 \u041e\u041b\u042c\u0413\u0410 \u041f\u0410\u0412\u041b\u041e\u0412\u041d\u0410","\u0411\u0418\u0421\u041a\u0432\u0438\u0442: \u0421\u0430\u043c\u0430\u0440\u0430",""]
]
}
});
var panel = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Search the Ext Forums',
width: 600,
bodyPadding: 10,
layout: 'anchor',
items: [{
xtype: 'combo',
store: ds,
displayField: 'inn',
valueField: 'id',
typeAhead: false,
hideLabel: true,
hideTrigger:true,
anchor: '100%',
listConfig: {
loadingText: 'Searching...',
emptyText: 'No matching posts found.',
// Custom rendering template for each item
getInnerTpl: function() {
return '<a class="search-item" href="#">' +
'<h3>{inn}: {Customer_Full_Nm}</h3>' +
'</a>';
}
},
pageSize: 10
}, {
xtype: 'component',
style: 'margin-top:10px',
html: 'Live search requires a minimum of 4 characters.'
}]
});
|
Да, если с сервера может приходить исключительно массив[], а не объект{}, то требуется несколько вмешаться в код библиотеки в указанной версии:
var myReader = Ext.create('Ext.data.reader.Json');
Ext.override(myReader, {
extractData: function(data) {
return this.callParent([data[0].rows]);
}
});
var ds = Ext.create('Ext.data.Store', {
fields: [
{name: "id", type: "int", mapping: 0},
{name: "inn", type: "int", mapping: 1},
{name: "Legal_Form_Desc", type: "string", mapping: 2},
{name: "Customer_Full_Nm", type: "string", mapping: 3},
{name: "Source_System_Desc", type: "string", mapping: 4}
],
proxy: {
type: 'memory',
reader: myReader
},
data: [
{
"head":[
"\u2116",
"INN",
"Legal_Form_Desc",
"Customer_Full_Nm",
"Source_System_Desc"
],
"rows":[
[1,"2302042152","\u041e\u041e\u041e","\u0410\u041c\u041f\u0417 \u0411\u0410\u041a\u0410\u0420","\u0411\u0418\u0421\u041a\u0432\u0438\u0442: \u041a\u0440\u0430\u0441\u043d\u043e\u0434\u0430\u0440",""],
[2,"593300087432","\u0418\u041f","\u0411\u0410\u0419\u0414\u0418\u041d\u0410 \u041e\u041b\u042c\u0413\u0410 \u041f\u0410\u0412\u041b\u041e\u0412\u041d\u0410","\u0411\u0418\u0421\u041a\u0432\u0438\u0442: \u0421\u0430\u043c\u0430\u0440\u0430",""]
]
}
]
});
var panel = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Search the Ext Forums',
width: 600,
bodyPadding: 10,
layout: 'anchor',
items: [{
xtype: 'combo',
store: ds,
displayField: 'inn',
valueField: 'id',
typeAhead: false,
hideLabel: true,
hideTrigger:true,
anchor: '100%',
listConfig: {
loadingText: 'Searching...',
emptyText: 'No matching posts found.',
// Custom rendering template for each item
getInnerTpl: function() {
return '<a class="search-item" href="#">' +
'<h3>{inn}: {Customer_Full_Nm}</h3>' +
'</a>';
}
},
pageSize: 10
}, {
xtype: 'component',
style: 'margin-top:10px',
html: 'Live search requires a minimum of 4 characters.'
}]
});
Вводите INN... |
| Часовой пояс GMT +3, время: 17:30. |