I have implemented Tabbar in sencha touch without any content as follows:
using code
Ext.ns('sink', 'demos', 'Ext.ux');
Ext.ux.UniversalUI = Ext.extend(Ext.Panel,
{
fullscreen: true,
layout: 'hbox',
items:
[
//Root view
{
xtype: 'panel',
html: 'TableView/Rootview goes here ...',
flex: 1
},
//Details view
{
xtype: 'panel',
html: 'Message Detail view goes here ....',
flex: 2
}
]
});
But I need two Tableviews one as Rootview and the other as Detailsview as follows
You need to use Ext.List. So instead of your left panel (commented as //Root view), you can add this :
{
xtype:'list',
id: 'navigation',
data: [
{ title: 'Page 1'},
{ title: 'Page 2'},
{ title: 'Page 3'},
{ title: 'Page 4'},
{ title: 'Page 5'}
],
itemTpl: new Ext.XTemplate('{title}'),
}
I let you guess what you have to do for the second view ;)
Hope this helps
Related
Can anyone help me in creating a form inside a layout window in extjs 3.4. like this? I tried using Ext.Formpanel but it shows error.
Ext.onReady(function() {
// tabs for the center
var tabs = new Ext.TabPanel({
region: 'center',
margins: '3 3 3 0',
activeTab: 0,
defaults: {
autoScroll: true
},
items: [
{
title: 'Movie Grid',
},
{
title: 'Movie Description',
},
{
title: 'Nested layout',
},
{
title: 'The bomb',
}
]
});
// Panel for the west
var nav = new Ext.Panel({
title: 'Movie Information Form',
region: 'west',
split: true,
width: 200,
collapsible: true,
margins: '3 0 3 3',
cmargins: '3 3 3 3',
});
var win = new Ext.Window({
title: 'Button',
closable: true,
width: 600,
height: 350,
//border: false,
plain: true,
layout: 'border',
items: [
nav,
tabs
]
});
win.show(this);
});
This is the js file for creating a layout window. I need to create a form inside "movie information form".
I have solved error in your code.Please check & reply.
https://fiddle.sencha.com/#view/editor&fiddle/2750
I have removed this which was passed to show() of window.
I need to develop a view in Sencha Touch where some form fields, textarea & button have to be put just after a list; following is the source code:
Ext.define('myapp.view.MyNotes',{
extend: 'Ext.Panel',
xtype: 'admissionnotes',
requires: [
'myapp.view.MyAppTitle',
'myapp.view.MyList',
'myapp.view.MyForm',
'myapp.view.MyAppTabBar'
],
config: {
layout: 'fit',
fullscreen: true,
scrollable: true,
items: [
{
xtype: 'myapptitle'
},
{
xtype: 'myapplist'
},
{
xtype: 'myform'
},
{
xtype: 'myapptabbar'
}
]
}
});
The problem is that these form fields are overlapping my list. Can somebody assist to resolve this isssue?
Thanks
Maybe vbox layout would be more appropriated than fit?
layout: {type: 'vbox', align: 'stretch'}
I have simple view that extends from Ext.form.Panel and have three items.
First item is toolbar with property docked: 'top', the second is fieldset and the third item is toolbar but it's docked to bottom.
This view looks ok, but when I open it on iPhone 4 or iPhone 5 (both with iOS 6) with Google Chrome, the third item is gone.
Can sameone explain why the toolbar that is docked to bottom is not shown only on Google Chrome on iPhone ?
Ext.define("TestApp.view.Test", {
extend: "Ext.form.Panel",
requires: "Ext.form.FieldSet",
alias: "widget.testview",
config: {
scrollable: 'vertical',
items: [
{
xtype: "toolbar",
docked: "top",
title: "Title",
items: [
{
xtype: "button",
ui: "back",
text: "back",
itemId: "backBtn"
}
]
},
{ xtype: "fieldset",
items: [
{
xtype: 'textfield',
name: 'title',
label: 'Title'
},
{
xtype: 'textareafield',
name: 'description',
label: 'Description'
}
]
},
{
xtype: "toolbar",
docked: "bottom",
items: [
{
xtype: "button",
iconCls: "trash",
iconMask: true,
itemId: "deleteBtn"
}
]
}
]
}
});
Well I have a similar problem that may be the same as yours. On chrome, the navigation bar (or 'omnibar' as they call it) pushes down the app space and the bottom gets cut off.
You'll know this is the same problem if going to full screen mode unhides your bottom bar. Full screen is typically achieved in chrome by scrolling up. However, if the item docked at the top is not scrollable, you can't hide it from there. Try to hide it on the loading screen. For more information, Google search 'ios chrome fullscreen' or 'ios chrome hide navigation bar'. There are also ways to do it within your application.
I'm having a problem with Sencha Touch 2 and vbox flexing. Here is my code for the Panel (modified for simplicity, real Panel is much more intricate but this is what it boils down to):
Ext.define('risbergska2.view.Test', {
extend: 'Ext.Panel',
xtype: 'test',
config: {
title: 'Test',
iconCls: 'home',
items: [
{
xtype: 'container',
layout: 'vbox',
items: [
{
xtype: 'container',
flex: 2,
style: 'background-color: #f90;'
},
{
xtype: 'container',
flex: 1,
style: 'background-color: #9f0;'
},
{
xtype: 'container',
flex: 1,
style: 'background-color: #0f9;'
},
{
xtype: 'container',
flex: 2,
style: 'background-color: #90f;'
}
]
}
]
}
})
And here is my Main.js:
Ext.define("risbergska2.view.Main", {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'homeloggedinview'
},
{
xtype: 'myview'
},
{
xtype: 'programview'
},
{
xtype: 'socialview'
},
{
xtype: 'aboutview'
},
{
xtype: 'test'
}
]
}
});
My app.js:
Ext.application({
name: 'risbergska2',
requires: [
'Ext.MessageBox'
],
views: ['Main', 'HomeLoggedIn', 'My', 'Program', 'Social', 'About', 'Test'],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('risbergska2.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
If I run this code and go to the Test-panel, nothing is showing. I want it to show (in the test case) four different containers with four different colors in them, the top one and the bottom one being twice the vertical size of the middle ones.
Is this not the way to get that result? Where have I gone wrong?
Thanks!
Set layout : 'fit' for risbergska2.view.Test
Ext.define('risbergska2.view.Test', {
extend: 'Ext.Panel',
xtype: 'test',
config: {
title: 'Test',
iconCls: 'home',
layout : 'fit',
items: [
{
xtype: 'container',
layout: 'vbox',
items: [
Learning Sencha Touch, and already love it. Much better then JQTouch in my opinion. Just working on some app idea I had, and I need to have 2 tabs where the first tab will hold a ext.List with some data. I've come this far, but have one problem I can't figure out.
Problem: The detailpanel won't show when I touch a name from the list. When it wasn't in a tab panel, I had no problems at all. Tried the forums, can't find the solution.
This is my entire code (based upon many examples):
ShotjesApp = new Ext.Application({
name: "Shotjes",
launch: function() {
ShotjesApp.detailPanel = new Ext.Panel({
id: 'detailpanel',
tpl: 'Omschrijving: {Naam} <br> <br> {Inhoud}',
dockedItems: [
{
xtype: 'toolbar',
items: [{
text: 'terug',
ui: 'back',
handler: function() {
ShotjesApp.Viewport.setActiveItem('listwrapper', {type:'slide', direction:'right'});
}
}]
}
]
});
ShotjesApp.listPanel = new Ext.List({
id: 'disclosurelist',
store: ListStore,
itemTpl: '<div class="contact">{Naam} {Basis}</div>',
grouped: true,
onItemDisclosure: function(record, btn, index) {
var naam = record.data.Naam;
ShotjesApp.detailPanel.update(record.data);
ShotjesApp.Viewport.setActiveItem('detailpanel') //THIS WON'T WORK?
ShotjesApp.detailPanel.dockedItems.items[0].setTitle(naam);
}
});
ShotjesApp.listWrapper = new Ext.Panel ({
id: 'listwrapper',
layout: 'fit',
items: [ShotjesApp.listPanel],
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: 'Shotjes'
}],
});
this.mainView = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
ui: 'dark',
layout: { pack: 'center' }
},
cardSwitchAnimation: {
type: 'fade',
cover: true
},
items:[{
title: 'Shotjes',
cls: 'card 1',
id: 'card 1',
items: [ShotjesApp.listWrapper, ShotjesApp.detailPanel] ,
iconCls: 'home',
layout: 'card',
}, {
title: 'About',
cls: 'card 2',
id: 'card 2',
html: 'about',
iconCls: 'calendar',
layout: 'card',
}
],
tabBarDock: 'bottom',
fullscreen: true,
layout: 'fit'
});
this.Viewport = this.mainView;
}
});
try this
ShotjesApp.Viewport.setActiveItem(ShotjesApp.detailPanel);
Also in your code the semicolon is missing.
Cool, thanks. I also added this, otherwise the slide would open as a new tab:
ShotjesApp.Viewport = new Ext.Panel ({
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
items: [ShotjesApp.listWrapper, ShotjesApp.detailPanel]
});
Combined with your change, it works perfectly..
One huge problem though. Because the Viewport is Fullscreen, The second tab won't show when I press it. When I set the second tab to Fullscreen: true, I see the animation, but first tab is still on top of it.
When I change fullscreen: false in the Viewport, the old problem comes back and the details pane won't show.