I am a junior Sencha/Extjs user and I am trying to do something I am sure its simple but still can't figure out how.
as you can see here :
I have 2 panels, one called 'panel 1' and the other is hidden and called 'panel 2'
also i have 2 toolbars, one with button called 'go to panel 2', when i press it i should get this :
a 'panel 1' should be hidden and ' panel 2' appears with the second toolbar which is have another button called 'go to panel 1'
I hope i made this clear enough.
I could do the stuff above but i think i use a stupid way, i use an event binding with function onButtonClick on button 1:
Ext.getCmp('p2').show();
Ext.getCmp('tb2').show();
Ext.getCmp('p1').hide();
Ext.getCmp('tb1').hide();
and vice versa on button 2 :
Ext.getCmp('p1').show();
Ext.getCmp('tb1').show();
Ext.getCmp('p2').hide();
Ext.getCmp('tb2').hide();
Now, I am sure there is a better way to accomplish that using controllers but i need someone who explain me how to do it in details, because as i said, i have no experience.
Thank you.
EDIT
i need to accomplish this also :
Button 1 --> panel 1
Item 1 --> panel 2
Item 2 --> panel 3
You could use Card layout to make this kind of a UI. Check documentation and Live example here.
if the view looked like
Ext.define('MyApp.view.parentpanel', {
extend: 'Ext.panel.Panel',
height: 250,
width: 400,
activeItem: 0,
layout: {
type: 'card'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'panel',
html: 'i\'m panel 1',
bodyPadding: 10,
title: 'panel 1'
},
{
xtype: 'panel',
html: 'i\'m panel 2',
bodyPadding: 10,
title: 'panel 2'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'button',
text: 'go to panel 2'
}
]
}
]
});
me.callParent(arguments);
}
});
the controller would be something like
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
views: [
'parentpanel'
],
onButtonClick: function(button, e, options) {
var me = this,
parentPanel = button.up('panel'),
layout = parentPanel.getLayout(),
activeItem = layout.getActiveItem(),
title = activeItem.title,
index = (title === 'panel 1' ? 1 : 0);
layout.setActiveItem(index);
button.setText('go to ' + title);
},
init: function() {
this.control({
"button": {
click: this.onButtonClick
}
});
}
});
Related
I have put two buttons inside a tab Panel in Sencha Touch 2 application. The code is given below:
var btnAttendance = Ext.create('Ext.Button', {
text: 'Take Attendance',
padding: 10,
width: 200,
handler: function () {
alert('a');
}
});
var btnAddUser = Ext.create('Ext.Button', {
text: 'Add User',
padding: 10,
width: 200,
handler: function () {
alert('a');
}
});
var buttonContainer = Ext.create('Ext.Panel', {
fullscreen: true,
title: 'Home',
defaults: {
margin: 5
},
layout: {
type: 'vbox',
align: 'center'
},
padding: 10,
items: [
btnAttendance,
btnAddUser
]
});
Ext.application({
requires: [
'Ext.tab.Panel'
],
launch: function () {
Ext.Viewport.add({
xtype: 'tabpanel',
items: [
buttonContainer,
{
title: 'Present',
items: {
html: '2',
centered: true
},
cls: 'present'
},
{
title: 'Absent',
items: {
html: '3',
centered: true
},
cls: 'absent'
}
]
});
}
});
I have tried modifying the handler function as:
handler: function (button, event)
But this also doesn't work.
Thanks,
Nitin
You need to put all your code inside Ext.application... and launch:function(){...}.... Your code is working fine. See demonstration here.
But then again, buttonContainer is not really being added to any tab panel. If you change the tab, you can see buttonContainer is gone once to change the tabs. If you want to add it inside any tab do this-
First -
Set fullscreen:false to you buttonContainer panel.
var buttonContainer = Ext.create('Ext.Panel', {
fullscreen: false,
....... //rest of the code.
And suppose you want to add those buttons in Present tab. You can do this with following--
Ext.Viewport.add({
xtype: 'tabpanel',
items: [
{
title: 'Present',
cls: 'present',
items: [
{
html: '2',
centered: true
},
buttonContainer
]
},
{
title: 'Absent',
items: {
html: '3',
centered: true
},
cls: 'absent'
}
]
});
Here, buttonContainer is added as an item inside present tab only. You can switch the tabs and can see buttons there with correct event handler.
See this demo here
If you follow MVC architecture, your job becomes much easier writing application having multiple views and user interactions. ST is all about MVC and it's good practice to follow it.
In my application, I'm using a tab panel with 5 items in it. Each item holds around 6 panels added in card layout. When I'm at the last panel inside a tab item, I need to get back to the initial panel by clicking on the bottom tab panel (somewhat similar to a normal tab view controller in iOS). I have came across some solutions I found here, but it seems to work only when I switch between the tabs. In fact I want to listen to the click event on the same tab icon. How can I do this?
I have worked on your problem. I think this is exactly what you want. Hope this helps. If not so, please leave a comment.
1). View (MyTabPanel1.js)
Ext.define('MyApp.view.MyTabPanel1', {
extend: 'Ext.tab.Panel',
config: {
scrollable: 'vertical',
items:
[
{
xtype: 'panel',
id:'cardpanel1',
title: 'Tab1',
layout: 'card',
items: [
{
html: "First Item",
items:
[
{
xtype: 'button',
text: 'Forward',
handler: function() {
Ext.getCmp('cardpanel1').setActiveItem(1);
console.log('Going to Second Item');
}
}
]
},
{
html: "Second Item",
items:
[
{
xtype: 'button',
ui: 'confirm',
text: 'Go back',
handler: function() {
Ext.getCmp('cardpanel1').setActiveItem(0);
console.log('Going to First Item');
}
}
]
}
]
},
{
xtype: 'panel',
title: 'Tab2',
scrollable: true,
items: [
{
xtype: 'button',
margin: 10,
ui: 'action',
text: 'Tab2'
}
]
},
{
xtype: 'panel',
title: 'Tab3',
scrollable: true,
items: [
{
xtype: 'button',
margin: 10,
ui: 'action',
text: 'Tab3'
}
]
}
]
}
});
2). Controller (MainController.js)
Ext.define('MyApp.controller.MainController', {
extend: 'Ext.app.Controller',
config: {
control: {
"tabpanel #ext-tab-1":{ //ext-tab-1 is the id for the 1st tab generated by Sencha
tap: 'ontap'
}
}
},
ontap: function (){
console.log('inside controller');
Ext.getCmp('cardpanel1').setActiveItem(0);
}
});
I would give a much simpler solution
This is my view called Viewport which is a TabPanel:
Ext.define('Sencha.view.iphone.Viewport',{
extend: 'Ext.TabPanel',
xtype: 'newviewport',
alias: 'widget.newTabPanel',
Now in my controller file:
Ext.define('Sencha.controller.iphone.main', {
extend: 'Ext.app.Controller',
config:
{
refs: {
theMainTabPanelTabbarTab: 'newTabPanel > tabbar > tab', //this the tab of the tabpanel, if we listen to it that way we will know of tab panel tap.
},
control: {
theMainTabPanelTabbarTab:{
tap: 'onTapMainTabPanel'
}
}
This is a working code and works fine. Hopefully this will help you.
I have this code which creates a floating panel centered to the screen:
Ext.define('myapp.view.ButtonNav', {
extend: 'Ext.Container',
xtype: 'myapp_buttonnav',
config: {
fullscreen: false,
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Button 1',
listeners: {
tap: function () {
var panel = Ext.Viewport.add({
xtype: 'panel',
defaultType: 'button',
baseCls: 'btn1_cont',
centered: true,
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [
{
baseCls: 'btn1',
text: 'HOME PAGE',
handler: function() {
Ext.Viewport.setActiveItem({
xtype: 'myapp_homepage'
});
panel.destroy();
}
}
],
top: // SET TOP TO SOURCE BUTTON
left: // SET LEFT TO SOURCE BUTTON
});
}
}
},
]
}
});
As you can see, it is a container, with a button which when clicked shows a floating panel.
How do i position the floating panel centered to the button that triggered the floating panel?
If I understand correctly, you need to use the showBy function like so :
myPanel.showBy(myButton);
It will show the panel next to the button and you can choose the alignment as well.
You can take a look at the documentation
How to get the button
If you take a look at the tap listener signature : http://docs.sencha.com/touch/2-0/#!/api/Ext.Button-event-tap
You can see that the first parameter is the button itself so :
listeners: {
tap: function (myButton, myEvent) {
... // create your panel
myPanel.showBy(myButton);
}
}
Hope this helps
I have a tabpanel, and a button on the 1st tab. When i click on that button, i need to setfocus to the 2nd tab and activate it (as in show content that belongs to that tab). My code is as follows, and i unable to setFocus or activate that tab from the Button click event.
Ext.define('MyApp.view.MyTabPanel', {
extend: 'Ext.tab.Panel',
height: 250,
width: 400,
activeTab: 0,
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'panel',
title: 'Tab 1',
items: [{
xtype: 'button',
text: 'MyButton',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
}]
}, {
xtype: 'panel',
title: 'Tab 2'
}, {
xtype: 'panel',
title: 'Tab 3'
}]
});
me.callParent(arguments);
},
onButtonClick: function (button, e, options) {
// Set Focus, and activate the 2nd tab
}
});
Find the container of the tab panel. to get the container you can use Ext.getCmp
Ext.getCmp('center-region').setActiveTab('your-tab-name');
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Panel-method-setActiveTab
There are also several examples of setting the active tab at the class level documentation.
I have a panel inside a panel as an item, along with other docked items.
For some reason it is not showing up.
These are stuffs to add to main panel:
MarketMakerApp.views.businessInfo = new Ext.Panel({
id: 'businessInfo',
layout: 'fit',
html: '<br /><br /><br /><div>{ id } </div>' + '<div>{ title }</div>'
//html: 'This is the business info view'
});
MarketMakerApp.views.businessTabbar = new Ext.TabBar({
dock: 'bottom',
ui: 'dark',
items: [
{
text: '1',
iconCls: 'info',
hander: function() {
MarketMakerApp.views.viewport.setActiveItem('businessInfo', {type: 'slide', direction: 'left' });
}
},
{
text: '2',
iconCls: 'star',
hander: function() {
this.add( MarketMakerApp.views.businessInfo);
this.setActiveItem(2);
}
},
{
text: '3',
iconCls: 'map',
hander: function() {
}
}
]
});
And the main panel is this:
MarketMakerApp.views.businessContainer = new Ext.Panel({
id: 'businessContainer',
layout: 'fit',
dockedItems: [
MarketMakerApp.views.businessTypeListToolbar,
MarketMakerApp.views.businessTabbar
],
items: [ MarketMakerApp.views.businessInfo]
});
The tabbar and toolbar are showing up fine, but I can't see the businessInfo panel.
Any suggestions would be appreciated.
p.s. I struggled with Tabpanel far too long to give up and just using tabbar now.
I haven't had any success in creating Panels (or whatever your view is) programmatically like that. Here's some code that does work w/that approach though.
Add an initComponent function to your businessContainer like the following instead of setting the items on the businessContainer panel:
initComponent: function(){
Ext.apply(this, {
items: [
MarketMakerApp.views.businessInfo
]
});
MarketMakerApp.views.businessContainer.superclass.initComponent.apply(this, arguments);
}