how make panel before this one?

[kevinv1990]

Hello everyone,

I want to make an search function before the json data is showed, all this work but I can't find how the search can be done.

What I have is:


Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function(){

/* Template van tpl */

var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="tpl">',
'<h2>Gezocht: <a href="#">{titel}</a></h2>' ,
'<div class="bodyvacature">',
'<p><i>Categorie:</i> {categorie}</p>' ,
'<p><i>Opleiding: </i>{opleiding}</p>' ,
'<p><i>Uren per week:</i> {upw}</p>',
'<p><i>Publicatiedatum:</i> {publicatiedatum}</p>' ,
'</div></div></tpl>'
);

var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
defaults: {
scroll: 'vertical'
},
fullscreen: true,
ui: 'light',

items: [{
title: 'Home',
html: '<h1>ICams op mobiel<h1>',
iconCls: 'home',
}, {
title: 'Vacatures',
html: '<h1>Vacatures worden geladen</h1>',
id: 'Vacatures',
iconCls: 'search',
tpl: tpl
}]
});




var eventclick = function(){


Ext.Ajax.request({
url: 'test.json',
success: function(response){
var data = Ext.decode(response.responseText);
// console.dir(data);
tabpanel.items.last().update(data);
}
});


};

Ext.getCmp('Vacatures').on("activate", eventclick);

}
});

and the json file:



[
{
"id" : "1",
"titel" : "Java Webdeveloper",
"functie" : "Java Webdeveloper",
"categorie" : "ICT",
"upw" : "30 tot 36",
"opleiding" : "HBO",
"publicatiedatum" : "19/03/2010",
"Verstiging" : "Rotterdam"
}, {
"id" : "2",
"titel" : "Webdesigner ",
"functie" : "Global Design",
"categorie" : "ICT",
"upw" : "30 tot 36",
"opleiding" : "MBO",
"publicatiedatum" : "19/03/2010",
"Verstiging" : "Rotterdam"
}, {
"id" : "3",
"titel" : "PHP programmeur",
"functie" : "PHP programmeur",
"categorie" : "ICT",
"upw" : "30 tot 36",
"opleiding" : "MBO",
"publicatiedatum" : "19/03/2010",
"Verstiging" : "Rotterdam"
}
]

So this all works very smoothly, but I want to add a search function before the "vacatures" are showed. First of course a text input and after a submit button, so the search will start. I do not know how I can show the search panel first and after press the "vacatures" results (which he does show immediately now when you press the vacatures tab).

I Hope someone has an example for me (with this structure, so a tabpanel) or that an expert can tell me how.

Greetz