PDA

View Full Version : Result SearchField in List component



myput
14 Oct 2011, 6:05 AM
Hello,

I have a problem with my search panel.
In fact, i have a searchform in my toolbar, and i can get the database request with a php script who send me the result which i decode them with Ext.util.JSON.decode.

I can display this elements with a template. This is working.

But i would like to display this elements with a list, i would like to get the elements in JSON string or something and display the result in my panel who will be a list Panel.
But i don't understand how to do that.

This is my code for the search panel:
The main view:


dockedItems: [WPApp.views.SearchPanelToolbar],
items: [WPApp.views.ResultPanel]


The result and template view:


WPApp.views.SearchPanelTemplate = new Ext.XTemplate(
'<div id="Item">',
'<tpl for=".">',
'<div id="Name">',
'<img src={iconItem}> <strong>{name}</strong>',
'<div id="desc">',
'{infoHomePage}<br/>{idCategory}',
'</div>',
'------------------------------<br/>',
'</div>',
'</tpl>',
'</div>'
);


WPApp.views.ResultPanel = new Ext.Panel ({
layout: 'fit',
style: 'padding-bottom: 10px;',
tpl: WPApp.views.SearchPanelTemplate,
});


and the searchfield and request:


WPApp.views.SearchPanelToolbar = new Ext.Toolbar ({
dock: 'top',
ui: 'dark',
items: [
{
flex: 1,
xtype: 'searchfield',
style: 'margin-right: 10px;',
id: 'textquery',
listeners: {
keyup: function(thisField, e) {
if (e.browserEvent.keyCode == 13) {
var query = Ext.getCmp("textquery").getValue();
if (query == "") {
alert("Recherche vide");
}
else {
Ext.Ajax.request ({
url: WPApp.config.host + WPApp.config.PhpPath + 'searchModule.php?search=' + query,
success: function (e) {
var obj = Ext.util.JSON.decode(e.responseText);
if (obj == "")
alert("Aucune donnée pour cette recherche: Veillez réessayer");
else {
var html = WPApp.views.SearchPanelTemplate.apply(e.responseText);
WPApp.views.ResultPanel.update(obj);
}
}
});
}
}
}
}
},


]
});


I don't understand when i must create the list and when i must send the data of e.responseText who contain the JSON String.

Thanks for help :)

myput
17 Oct 2011, 8:02 AM
ok, now i can display my list in the panel but i can't open a detailcard of the list :(
what's wrong please?

In the toolbar:


success: function (e) {
var obj = Ext.util.JSON.decode(e.responseText);
if (obj == "")
alert(WPApp.config._AlertSearchNoData);
else {
//var html = WPApp.views.SearchPanelTemplate.apply(e.responseText);
//WPApp.views.ResultPanel.update(obj);
Ext.getStore(WPApp.stores.ResultPanelListStore).setObj(e.responseText);
WPApp.views.ResultPanelList.update(obj);
}
}


in the search panel:


dockedItems: [WPApp.views.SearchPanelToolbar],
initComponent: function() {
Ext.apply(WPApp.views, {
ResultPanelList: new WPApp.views.ResultPanelList(),
});
this.items = [
WPApp.views.ResultPanelList,
];
WPApp.views.SearchPanel.superclass.initComponent.call(this);
this.doComponentLayout();
}


and in the list:


Ext.regModel('WPApp.models.SearchDirectoryListPanelModel', {
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'idCategory', type: 'string'},
]
});


WPApp.stores.ResultPanelListStore = new Ext.data.JsonStore({
model : 'WPApp.models.SearchDirectoryListPanelModel',
setObj: function (JsonObj) {
this.JsonObj = JsonObj;
WPApp.stores.DirectoryItemListListStore.load({data: this.JsonObj});
}
});

WPApp.views.ResultPanelList = Ext.extend(Ext.List,{
store: WPApp.stores.ResultPanelListStore,
listeners: {
itemtap: function(view, index) {
var record = WPApp.views.ResultPanelList.getStore().getAt(index);
}
}
});


this.JsonObj = JsonObj; send me the good Json string ... i don't know how to work the code for the detail page.... nothing want to open