I'm new to sencha touch and I am trying to create a container divided into 3 parts. The 2nd part should hold a carousel component. This is my code:
var con = new Ext.Container({
width: '100%',
height: '100%',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
flex: 1,
html: 'First',
items: [
{
xtype: 'carousel',
defaults: {
layout: 'hbox'
},
items: [
{
html: '1',
cls: 'card'
},
{
html: '2',
cls: 'card'
}
]
}
]
},
{
flex: 2,
html: 'Second'
},
{
flex: 3,
html: 'Third'
}
]
});
the result shows the 3 component parts apart from the carousel. What have I done wrong? Many thanks.
A couple of things:
1 - You dont need a container (first) to hold the carousel because it extends container
2 - when you use html you are setting the body of the container so any components you add will not show up
This should work with Sencha Touch 2 (havent tested with Touch 1):
var con = new Ext.Container({
width: '100%',
height: '100%',
layout:{
type: 'vbox',
align: 'stretch'
},
items:[{
xtype: 'carousel',
defaults: {
layout: 'hbox'
},
flex: 1,
items:[{
html: '1',
cls: 'card'
},{
html: '2',
cls: 'card'
}]
},{
flex: 1,
html: 'Second'
},{
flex: 1,
html: 'Third'
}]
});
Related
I added dockedItems to my form.Panel, it aligns to the form, but I want the dockedItems align to the table inside the form, how should I do.
Here is the demo: https://fiddle.sencha.com/#view/editor&fiddle/3kso
Thanks!
Since you set the viewport's layout to fit, and you also specify a fixed width for the table (300 px), the form is ordered to occupy the remaining area, and that's why the toolbar is at the left edge.
Although you could try to make the toolbar floating and align it the the table, I think it is easier to let the form take only the space it needs, and therefore the toolbar will we aligned to the form.
To do so, at the end of your fiddle, try this code to change the viewport's layout:
Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'middle'
},
items: [form]
});
If you need the fit layout for some other reasons, you can keep the fit layout, and add the form within a container:
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'middle'
},
items: [form]
}]
});
Or if you need a panel that occupies all place, and you want a panel inside this with aligned toolbar, you can use and outside and an inside panel also (check the grey background to see the outside panel):
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'panel',
bodyStyle: {
background: '#eeeeee'
},
layout: {
type: 'vbox',
align: 'middle'
},
items: [form]
}]
});
The important thing is that by using vbox and middle in the layout the form will only occupy the place it needs.
EDIT 1:
To address the issues in the comments, here is a complete example that can be run as fiddle:
const form = Ext.create('Ext.form.Panel', {
autoScroll: true,
bodyStyle: {
background: '#abd1ca'
},
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '300px',
'background': '#e3f2fd',
'border-collapse': 'collapse',
}
},
tdAttrs: {
style: {
border: '1px solid #ccc',
padding: '6px',
}
}
},
fieldDefaults: {
labelWidth: 40,
width: '100%',
},
items: new Array(100).fill({
fieldLabel: 'sample',
xtype: 'textfield'
}),
dockedItems: [{
xtype: 'toolbar',
dock: 'left',
items: [{
iconCls: null,
glyph: 61,
xtype: 'button'
}, '-', {
iconCls: null,
glyph: 88,
xtype: 'button'
}, {
iconCls: null,
glyph: 70,
xtype: 'button'
}, '-', {
iconCls: null,
glyph: 47,
xtype: 'button'
}]
}]
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'panel',
bodyStyle: {
background: '#eeeeee'
},
layout: {
type: 'hbox',
align: 'stretch',
pack: 'middle'
},
items: [form],
buttonAlign: 'center',
buttons: [{
text: 'Save',
handler: 'save',
}, ],
}]
});
the store works fine for the rest of the app but im not able to use that data and plot that data in the graph.
i have done some basic work with the little knowledge i have with charts.
i tried out with other examples which work but im not able to figure out the problem with this.
the console says:Uncaught TypeError: Cannot read property '1' of undefined
i have installed ruby,compass and sass
view:
Ext.define('CSBApp.view.graph', {
extend: 'Ext.chart.CartesianChart',
requires: [
'Ext.TitleBar',
'Ext.chart.CartesianChart',
'Ext.chart.series.Line',
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category',
'Ext.draw.sprite.Circle',
],
xtype: 'graph',
config: {
flex: 1,
xtype: 'chart',
store: 'mystore',
cls: 'chart',
innerPadding: 10,
animate: true,
series: [
{
type: 'line',
xField: 'date',
yField: 'amount',
title: 'Expenses',
style: {
stroke: '#003366',
lineWidth: 3
},
marker: {
type: 'circle',
stroke: '#003366',
radius: 5,
lineWidth: 3
}
}
],
axes: [
{
type: 'numeric',
position: 'left',
title: {
fontSize: 15,
text: 'Amount'
},
grid: {
even: {
fill: '#f9f9f9'
}
}
},
{
type: 'numeric',
position: 'bottom',
title: {
fontSize: 15,
text: 'date'
},
grid: {
even: {
fill: '#f9f9f9'
}
}
}
]
}
});
modal:
Ext.define('CSBApp.model.expensemodel',{
extend: 'Ext.data.Model',
config: {
identifier:{
type:'uuid'
},
fields: [
{
name:'desc',
type:'string'
},
{
name: 'amount',
type:'number'
},
{
name: 'date',
type:'date',
defaultformat: 'Y-m-d'
},
],
// autoLoad : true
}
});
store:
Ext.define('CSBApp.store.mystore',{
extend : 'Ext.data.Store',
config : {
model : 'CSBApp.model.expensemodel',
storeId : 'mysqlstore',
proxy : {
type : 'sql',
id : 'mystore',
reader: {
type: "sql"
}
},
autoLoad : true
}
});
i have kind of figured it out.
the basic problem resides in the view and how it calls the store.
so the app seems to work fine with the sql store.
the main factor is that the 'requires' files have to be correct.
here is the view:
Ext.define('CSBApp.view.graph', {
extend: 'Ext.chart.CartesianChart',
xtype: 'graph',
requires: [
'Ext.chart.series.Line',
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category',
'Ext.chart.CartesianChart',
'Ext.chart.axis.layout.CombineDuplicate',
'Ext.chart.axis.segmenter.Names'
],
config: {
store:'mysqlstore' ,
width : '100%',
layout:'fit',
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
minimum:0,
fields: 'amount'
},
{
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'date',
minimum:0,
}],
series: [{
type: 'line',
xField: 'date',
yField: 'amount',
minimum:0,
style: {
stroke: '#003366',
lineWidth: 3
},
marker: {
type: 'circle',
stroke: '#003366',
radius: 5,
lineWidth: 3,
}
}
}]
}
});
this is pretty correct if you get the store rite.
I have been developing an android application by sencha touch 2. Current weather and daily forecast were built in html type. I want hourly forecast will be shown in a horizontal scrollable panel, so I had to used DataView type (http://docs.sencha.com/touch/2.3.0/#!/api/Ext.dataview.DataView)
Unfortunately, I can't make it work in Android emulator. Please take a look at the screenshot below, to see the difference between emulator and chrome. I also didn't see any error in ADT and chrome console log.
http://i.stack.imgur.com/Mxzrt.png
Here is my sourcecode, these items are inside a card of a carousel. Thank you for your time to read my problem.
items: [{
height: '50%',
html: tplCurr.apply(obj)
}, {
height: '10%',
xtype: 'dataview',
cls: 'hourly-container',
scrollable: {
direction: 'horizontal',
directionLock : true
},
inline: { wrap: false },
data: obj.hourly,
itemTpl: tplHourly
}, {
height: '40%',
xtype: 'panel',
cls: 'daily-container',
fullscreen: true,
scrollable: {
direction: 'vertical',
directionLock : true
},
items: dayItems
}]
Try this please,
layout:{
type:'vertical'
},
items: [{
flex:4,
html: tplCurr.apply(obj)
}, {
flex:1,
xtype: 'dataview',
cls: 'hourly-container',
scrollable: {
direction: 'horizontal',
directionLock : true
},
inline: { wrap: false },
data: obj.hourly,
itemTpl: tplHourly
}, {
flex:2,
xtype: 'panel',
cls: 'daily-container',
fullscreen: true,
scrollable: {
direction: 'vertical',
directionLock : true
},
items: dayItems
}]
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: [
i am working with grid to tree drag n drop. i am able to add new node to root of tree by dragging it from grid but i dont know how to add child to node i hovered on? I spent 2 days on dis but no luck.below is my code :
Ext.define('Overdrive.view.ui.MyViewport', {
extend: 'Ext.container.Viewport',
initComponent: function () {
var me = this;
me.items = [{
xtype: 'panel',
height: 600,
layout: {
align: 'stretch',
type: 'hbox'
},
title: 'PARENT',
items: [{
xtype: 'treepanel',
border: '',
id: 'treepanel',
collapseDirection: 'left',
collapsible: true,
title: 'Items',
titleCollapse: true,
store: 'Test',
flex: 1,
viewConfig: {
listeners: {
render: function (tree) {
var dropTarget = new Ext.dd.DropTarget(tree.el, {
ddGroup: 'gridtotree',
copy: false,
notifyDrop: function (dragSource, event, data) {
var idFrom = data.records[0].data.name;
var node = Ext.getCmp('treepanel').getRootNode(); //working
node.appendChild({
'text': idFrom,
'children': []
});
}
});
}
}
}
}, {
xtype: 'panel',
height: 596,
flex: 3,
items: [{
xtype: 'panel',
height: 285,
layout: {
type: 'anchor'
}
}, {
xtype: 'gridpanel',
id: 'itemtypegrid',
title: 'Item Type',
store: 'GridTest',
enableDragDrop: true,
ddText: 'Shift Row',
columns: [{
xtype: 'gridcolumn',
width: 100,
dataIndex: 'name',
text: 'Name'
}],
viewConfig: {
plugins: [
Ext.create('Ext.grid.plugin.DragDrop', {
ddGroup: 'gridtotree',
enableDrop: true
})]
}
}]
}]
}];
me.callParent(arguments);
}
To catch the tree-node you can add this handler to Tree.Panel -> ViewConfig -> listeners:
itemmouseenter: function (view, model, htmlItem, index, e)
{
console.log(model);
},
You can save this value and use in another handler - notifyDrop