Problem with navigation view having multiple items on it. (list, searchbar, etc..)

[papasilo]

Hi Mentors!

Im new with sencha touch :)
May I ask some advice on how to come up with the design.

38575

im using navigation view for this design, but it seems doesn't work :-|

Here's my code:



var onNavigationPush = function(v, item)
{
v.down('#txtSearchPeronsel').hide();
v.down('#cmdSearchPersonel').hide();
v.down('#cmdOptionPersonel').show();
}
var onNavigationPop = function(v, item)
{
console.log(v.getActiveItem().xtype);
if (v.getActiveItem().xtype == 'personellist')
{
v.down('#txtSearchPeronsel').show();
v.down('#cmdSearchPersonel').hide();
v.down('#cmdOptionPersonel').hide();
}
if (v.getActiveItem().xtype == 'personeldetail')
{
v.down('#cmdOptionPersonel').show();
}
}


Ext.define('InnosoftCRM.view.PersonelContainer',
{
extend: 'Ext.NavigationView',
require: ['Ext.Titlebar', 'Ext.List', 'InnosoftCRM.view.PersonelTaskList', 'InnosoftCRM.view.PersonelDetail'],
xtype: 'personelcontainer',
config:
{
autoDestroy: false,
iconCls: 'team',
title: 'Personel',
styleHtmlContent: true,
navigationBar:
{
items:
[
{
hidden: true,
xtype: 'button',
iconCls: 'action',
id: 'cmdSearchPersonel',
iconMask: true,
align: 'right'
},
{
xtype: 'button',
iconMask: true,
hidden: true,
iconCls: 'settings6',
action: 'selectactiontask',
id: 'cmdOptionPersonel',
align: 'right'
}


]
},
items:
[
{
xtype: 'container',
items:
[
{
xtype: 'searchfield',
placeHolder: 'Search...',
align: 'right',
id: 'txtSearchPeronsel'
},
{
xtype: 'personellist'
},
]
}

],
listeners:
{
pop: onNavigationPop,
push: onNavigationPush
}
}
})





:s

Thanks in advance :D

[papasilo]

Hello Mentors!

Already figured out the code for the design:



var onNavigationPush = function(v, item)
{
v.down('#txtSearchPeronsel').hide();
v.down('#cmdOptionPersonel').show();
}
var onNavigationPop = function(v, item)
{
console.log(v.getActiveItem().xtype);
if (v.getActiveItem().xtype == 'container')
{
v.down('#txtSearchPeronsel').show();
v.down('#cmdOptionPersonel').hide();
}
if (v.getActiveItem().xtype == 'personeldetail')
{
v.down('#cmdOptionPersonel').show();
}
}


Ext.define('InnosoftCRM.view.PersonelContainer',
{
extend: 'Ext.navigation.View',
require: ['Ext.Titlebar', 'Ext.List', 'InnosoftCRM.view.PersonelTaskList', 'InnosoftCRM.view.PersonelDetail'],
xtype: 'personelcontainer',
config:
{
autoDestroy: false,
iconCls: 'team',
title: 'Personel',
styleHtmlContent: true,
navigationBar:
{
items:
[
{
xtype: 'button',
iconMask: true,
hidden: true,
iconCls: 'settings6',
action: 'selectactiontask',
id: 'cmdOptionPersonel',
align: 'right'
}


]
},
items:
[
{
xtype: 'container',
fullscreen: true,
scroll: false,
layout:'vbox',
width:'100%',
items:
[
{
margin: '1 0 0 0',
xtype: 'fieldset',
height: '10%',
flex: 1,
items:
[
{
id: 'txtSearchPeronsel',
xtype: 'searchfield',
placeHolder: 'Search...',
},
]
},
{
margin: '2 0 0 0',
xtype: 'personellist',
flex: 2
}
]

}

],
listeners:
{
pop: onNavigationPop,
push: onNavigationPush
}
}
})




Here's the screenshot:

38577


THANKS! :D :D :D