I have this code:
Ext.define('play.view.Quiz', {
extend: 'Ext.Container',
xtype: 'myquiz',
config: {
fullscreen: true,
layout: 'vbox',
title: 'My Quiz',
items: [
/* Questions */
{
xtype: 'my_questions'
},
]
}
});
and
Ext.define('play.view.Questions', {
extend: 'Ext.Carousel',
xtype: 'my_questions',
config: {
defaults: {
styleHtmlContent: true
},
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3'
}
]
}
});
The questions wont display, yet when i place the questions within the quiz items, they display.
Is it possible to reference a carousel xtype from a container?
Yes #Bohbo can you do something like this:
Ext.define('play.view.Questions', {
extend: 'Ext.Carousel',
xtype: 'my_questions',
config: {
defaults: {
styleHtmlContent: true,
layout: 'fit',
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3'
}
]
},
});
Note important element is layout:'fit'. I hope this helps. :)
Related
i am trying to give space between the components here is the screen shot , i want to give vertical space between lables , TextFields and button but i dont find a way to do it
here is my code
Ext.define('test.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Label'
],
config: {
items: [
{
docked: 'top',
title: 'Test',
ui: 'dark',
xtype: 'titlebar'
},
{
xtype:'panel',
style:'padding:10%',
items:[ {
xtype: 'label',
html: 'User Name/Mobile Number',
},
{
xtype: 'textfield',
},{
xtype: 'label',
html: 'Password'
},{
xtype: 'textfield',
},{
xtype:'button',
text:'Login'
}]
}
]
}
});
Use the margin property to get the space between fields:
{
xtype:'panel',
defaults: {
margin: '20 0'
},
items: [
{
xtype: 'label',
html: 'User Name/Mobile Number'
},
....
I tried adding this.callParent(arguments) to the tab panel's initialize event
as suggested by http://www.sencha.com/forum/showthread.php?234909-tab-panel-doesn-t-switch-between-tabs-when-added-dynamically but I get:
Uncaught Error: this.callParent() was called but there's no such method (doFire) found in the parent class (Ext.Base).
Could someone point me in the right direction?
Thank you.
My controller follows:
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
config: {
refs: {
mytabpanel: '#mytabpanel'
}
},
init: function(application) {
this.control({
mytabpanel: {
initialize: function(component, options){
var bar = component.getTabBar();
bar.insert(0, { flex:1, xtype:'toolbar', title: '' });
bar.insert(bar.getItems().length,
{
xtype: 'toolbar',
flex: 1,
title: '',
items: [
{
xtype : 'button',
docked: 'right',
ui: 'round',
iconCls: 'info',
iconMask: true,
handler: function(){
}
}
]
});
this.callParent(arguments);
}
}
});
}
});
My view follows:
Ext.define('MyApp.view.MyTabPanel', {
extend: 'Ext.tab.Panel',
config: {
id: 'mytabpanel',
items: [
{
xtype: 'container',
title: 'Tab 1',
iconCls: 'info',
html: 'tab 1'
},
{
xtype: 'container',
title: 'Tab 2',
iconCls: 'info',
html: 'tab 2'
},
{
xtype: 'container',
title: 'Tab 3',
iconCls: 'info',
html: 'tab 3'
}
],
tabBar: {
docked: 'bottom'
}
}
});
EDIT Sunday, 30 December 6:57 a.m (GMT - 4:00)
From searching the web I now believe that because I am overriding initialize then I need to call the superclass' initialize method so that its code will be executed as well. As pointed out by user1479606 calling this.callParent will never work. So, the question becomes: How do I call the superclass' initialize method?
I think your application won't work in your case because you should use this.callParent(arguments) in your view not your controller otherwise your parent class will always be Ext.Base.
For easier to understand and better approach, why don't you follow the Sencha Touch 2 convention like this:
config: {
refs: {
mytabpanel: '#mytabpanel'
}
control: {
mytabpanel: {
initialize: 'domytabpanel'
}
}
},
domytabpanel: function(component, options) {
var bar = component.getTabBar();
bar.insert(0, {
flex:1,
xtype:'toolbar',
title: ''
});
bar.insert(bar.getItems().length,
{
xtype: 'toolbar',
flex: 1,
title: '',
items: [
{
xtype : 'button',
docked: 'right',
ui: 'round',
iconCls: 'info',
iconMask: true,
handler: function(){
}
}
]
});
}
Hope it helps :)
When the app launches it will display screen1. And then when we click on a button it will display panel1 or panel2. My code as follows; I get an error when i add panel2.
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [
{
xtype: 'panel',
items: { xtype: 'screen1' }
},
{
xtype: 'panel',
items: { xtype:'panel1' }
}
]
});
}
As soon as i add another panel; and i get an error
TypeError: namespace is undefined
[Break On This Error]
if (namespace === from || namespace.substring(0, from.length) === from) {
Code:
items: [
{
xtype: 'panel',
items: { xtype: 'screen1' }
},
{
xtype: 'panel',
items: { xtype:'panel1' }
},
{
xtype: 'panel',
items: { xtype:'panel2' }
}
]
NOTE: I have added the Panel2 in the views: [ Panel2']
UPDATE
Ext.define('MyApp.view.Panel2', {
extend: 'Ext.tab.Panel',
alias: 'widget.panel2',
height: 250,
width: 400,
activeTab: 0,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'panel',
title: 'Tab 1'
},
{
xtype: 'panel',
title: 'Tab 2'
},
{
xtype: 'panel',
title: 'Tab 3'
}
]
});
me.callParent(arguments);
}
});
It's most likely because you're missing dependencies. Since you didn't post your application definition, you need to require the views in the controller (or, if you aren't even that far yet, in the requires on the application itself).
Have a look at /examples/app/simple in the download to see how it sets up requires.
I have this problem that I can ref a button for control it. I don't understand the logic of Controllers, see my example code:
Ext.define('myMoney.controller.Inicio', {
extend: 'Ext.app.Controller',
config: {
refs: {
loginForm: '#loginForm',
logButton: '#logButton',
},
control: {
logButton: {
tab: "autenthic"
}
}
},
autenthic: function(){
console.log("Wazzup!?");
}
});
I have my view:
Ext.define('myMoney.view.Inicio', {
extend: 'Ext.form.Panel',
xtype: 'inicio',
requires: [
'Ext.form.FieldSet',
'Ext.field.Password'
],
config: {
title: 'Inicio',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: [
{
xtype: 'toolbar',
title: 'Money Tracker',
docked: 'top'
},
{
xtype: 'fieldset',
title: 'Inicio de Sesion',
id: 'loginForm',
instructions: '(Por favor coloca tu usuario y clave)',
items: [
{
xtype: 'textfield',
name: 'us',
label: 'Usuario'
},
{
xtype: 'passwordfield',
name: 'pw',
label: 'Clave'
}
]
},
{
xtype: 'button',
width: '50%',
centered: true,
text: 'Aceptar',
ui: 'confirm',
id: 'logButton'
}
]
}
});
What is wrong?
Instead of
tab: "autenthic"
write
tap: "autenthic"
I've got some HTML content that is longer than a full page in height. At the end of this content, I'd like to include a horizontal carousel. Every attempt I make shows the HTML content, but I can't get the carousel to work properly.
Here's where I'm at code-wise...
Ext.create('Ext.Container', {
fullscreen: true,
scrollable: true,
items: [
{
xtype: 'panel',
html: '<h1>Lots of content</h1><p>With additional content</p><p>With additional content</p><ul><li>asdf</li><li>asdf</li></ul>',
style: 'background-color: #2E99FC'
},
{
xtype: 'carousel',
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3',
style: 'background-color: #FF0000'
}
]
}
]
});
Any help greatly appreciated.
I have expirience with Sencha 1.1. I have no idea if your syntax is for 1.1 or 2.
i played a little with your code, and here it goes.
Ext.setup({
onReady: function() {
var panel= new Ext.Panel({
html: '<h1>Lots of content</h1><p>With additional content</p><p>With additional content</p><ul><li>asdf</li><li>asdf</li></ul>',
style: 'background-color: #2E99FC'
});
var carousel = new Ext.Carousel({
flex:1,
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3',
style: 'background-color: #FF0000'
}
]
});
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [panel, carousel]
});
}
});
The big thing that was missing to you is the flex:1 property. This is why it didin't appear in your screen. Its highly crucial.