View Full Version : Advanced workflow + search function

14 Sep 2010, 11:51 PM
Good morning,

I am trying to make a search function before the tpl is executed on the tab 'vacatures'. I have two tabs, home and "vacatures", when I press vacatures a body with a search input box should be showed, after when someone press the search button the correct data must be showed (so results that correspondent with the search input). at the moment, when someone press vacatures, all the results are inmidiatly showed, I don't understand how I can put a search panel in front of it and after they press search button that the content is showed.

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

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>' ,

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(){

url: 'test.json',
success: function(response){
var data = Ext.decode(response.responseText);
// console.dir(data);

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


"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"

By the way, I will be working on this project for at least 3 months, when I am done, if the extjs community wants, I can give them the source code of the project. I will make a webapp which will be able to search for jobs and you can apply on them or send the information to your mail, also the jobs will be showed on a map and the search function will be advanced. Also I will make a login function later on.


15 Sep 2010, 12:35 AM
Any help would be appreciated. :)

15 Sep 2010, 3:10 AM
Use a card layout.

15 Sep 2010, 3:17 AM
Okay thx, I will try!