my question is related to building GUIs on Sencha Touch 2 creating first the controls and then instantiating them on a panel's items. Like so:
var myButton = Ext.create('Ext.Button', {
text: 'Button',
});
And then do this in order to show it on screen:
//..some panel
items:[{myButton}, {anotherControl}]
When I try to do this on Sencha Touch 2, it just throws an error: "Uncaught SyntaxError: Unexpected identifier"
I used to do this on Sencha Touch 1.x and this is driving me crazy because in every example I find in the net, they declare the controls inside the panel using the xtype property.
A small code snippet would be great help for me.
Thanks!
You can do it like so :
Ext.define('App.view.MyView', {
xtype: 'myview',
extend: 'Ext.Panel',
config: {
layout: 'vbox'
},
constructor: function() {
var me = this;
me.callParent(arguments);
var myButton1 = Ext.create('Ext.Button', {
text: 'Button1',
});
var myButton2 = Ext.create('Ext.Button', {
text: 'Button2',
});
me.add([myButton1,myButton2]);
}
});
Hope this helps
Related
I'm newer in sencha. I'm creating a project with a image in panel view. I want touch points in my app for displaying the co-ordinates. How can i get the touch points. Any one can help me.
code:
Ext.define('ImageTouch.view.MyImg1', {
extend: 'Ext.Img',
height: 201,
width: 201,
src: 'resources/Dan.png',
initComponent: function() {
var me = this;
listeners:[
{
element: 'innerElement',
event: 'tap',
fn: function(e) {
console.log('TAP!');
var x = e.pageX,
y = e.pageY;
console.log(x ,y);
}
}
],
me.callParent(arguments);
}
});
please go through this
This page explain many examples in senja.
Search under the title "ringingEars/drag n drop javascript to iphone support ( iPhone)".
Please check this also.
I am new to Sencha Touch2 and facing problem while passing data from my Controller to Floating panel on listitem tap. Here is my controller implementation code:
Ext.define('CustomList.controller.Main', {
extend: 'Ext.app.Controller',
requires:['CustomList.view.DatePanel'],
config: {
refs: {
listView: 'listitems'
},
control: {
'main test2 list': {
activate: 'onActivate',
itemtap: 'onItemTap'
}
}
},
onActivate: function() {
console.log('Main container is active');
},
onItemTap: function(view, index, target, record, event) {
console.log('Item was tapped on the Data View');
Ext.Viewport.add({
xtype: 'DatePanel'
});
}
});
Am able to get data in the controller and DatePanel.js is my floating Panel.
DatePanel.js:
Ext.define('CustomList.view.DatePanel', {
extend: 'Ext.Panel',
alias: 'widget.DatePanel',
xtype:'datepanel',
config: {
itemid:'DatePanel',
modal:true,
centered: true,
hideOnMaskTap:true,
width:'500px',
height:'650px',
items:[
{
styleHtmlCls:'homepage',
tpl:'<h4>{name3}</h4>'
},
{
xtype:'toolbar',
docked:'bottom',
items:[{
text:'OK',
ui:'confirm',
action:'ShowTurnOverReport',
listeners : {
tap : function() {
console.log('Ok');
}
}
},
{
text:'Cancel',
ui:'confirm',
action:'Cancel',
listeners : {
tap : function() {
console.log('Cancel');
var panelToDestroy = Ext.getCmp('datepanel');
panelToDestroy.destroy();
Ext.Viewport.add(Ext.create('CustomList.view.Test2'));//Test.js is my list Panel
}
}
}]
}
]
}
});
Help me out in destroying the panel on 'Cancel' Button.
Can anyone please help me. Thanks.
Create instance of panel you want to add first.
var floatingDatePanel = Ext.create('Yourapp.view.YourDatePanel');
Next get data of selected list item on itemTap
var data = record.getData();
Assign this data to floatingDatePanel with setData() method
UPDATE,
after looking at your panel code, I guess you want to set data to first item in panel ie
{
styleHtmlCls:'homepage',
tpl:'<h4>{name3}</h4>'
}
Right ? If so then you need to change following code
floatingDatePanel.setData(data);
to
floatingDatePanel.getAt(0).setData(data);
Because, it is first item inside panel that is having a template assigned and hopefully the same where you want to set data.
then finally, you can add this panel into viewport with
Ext.Viewport.add(floatingDatePanel);
I know you guys will be making a really nice charting tool available for 2.0 SDK soon, but until then, I'd like to use Google Charts.
In the 1.x API, you could could define html object by id, and then use getElementById() to get a reference to that item. So for example:
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
But in the new SDK, you don't have an HTML block to work with-- how would you do the following? This question is relevant for any item where you want to pin an object to a place in your html.
In the new API the app base class is simply an extension of Ext.container.Container which itself is an extension of AbstractComponent and so has the getEl() method. (Note that by adding content directly to dom nodes you lose out on the automatic layout functionality provided by Ext containers).
Here's a quick example to illustrate doing something like this though:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
itemId: 'chartContainer'
}
],
launch: function() {
var chartContainer = this.down('#chartContainer').getEl().dom;
var chart = new google.visualization.BarChart(chartContainer);
}
});
In the last answer (your code snippet), you were just missing the items child of the app, which creates the chartContainer element you want to render the chart into. I think this code should work for you:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items: [
{
xtype: 'container',
itemId: 'chartContainer'
}
],
launch: function() {
//Write app code here
google.load("visualization", "1.0", {packages:["corechart"]});
google.setOnLoadCallback(this._drawChart);
},
_drawChart: function() {
var chartContainer = this.down('#chartContainer').getEl().dom;
var chart = new google.visualization.BarChart(chartContainer);
var graphArray = [['Module', 'Payload Code', 'Test Code']];
chartData = google.visualization.arrayToDataTable(graphArray);
chart.draw(chartData, {width: 700, height: 500});
}
});
Here's the code. It crashes with "Uncaught TypeError: Cannot read property 'parentNode' of null" inside of "Ext.define.initComponent" initiated from "Ext.define.Rally.loadScripts". Never gets to _drawChart():
I've also added the following line to the rake script to reference the google API:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
And here's App.js:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
//Write app code here
google.load("visualization", "1.0", {packages:["corechart"]});
google.setOnLoadCallback(this._drawChart);
},
_drawChart: function() {
var chartContainer = this.down('#chartContainer').getEl().dom;
var chart = new google.visualization.BarChart(chartContainer);
var graphArray = [['Module', 'Payload Code', 'Test Code']];
chartData = google.visualization.arrayToDataTable(graphArray);
chart.draw(chartData, {width: 700, height: 500});
}
});
The first draft of the SDK 2.0 charting component is now live.
You can find out about it here.
Hey guys i just started with sencha touch 2.0 and now i have a problem while using mvc in my project. I have a simple list and i want to open a detail view, with a tab on a list item. So i tried to tell my controller to handle clicks on this list but it doesn't work at all.
What am i doing wrong?
Here's my controller
Ext.define('MyFirstApp.controller.Main', {
extend: 'Ext.app.Controller',
views: ['Home', 'People'],
models: ['People'],
stores: ['Peoples'],
config: {
refs: {
people: 'peoplelist'
},
control: {
people: {
itemtap: 'testFunc'
}
}
},
testFunc: function() {
console.log("something was clicked");
}
});
'peoplelist' is the xtype of my list.
Thank you for your help :-)
Nothing wrong with the code you posted. It works fine with this List:
Ext.define('MyFirstApp.view.People', {
extend: 'Ext.List',
xtype: 'peoplelist',
config: {
fullscreen: true,
itemTpl: '{first} {last}',
store: 'Presidents'
}
});
It doesn't work if xtype is declared inside the config.
Yes, the way you are doing it is correct but you're not getting a reference to the list correctly.
Try this:
config: {
control: {
'peoplelist': {
itemtap: 'testFunc'
}
}
}
This video and code helped me a lot: http://learn.sencha.com/learn/meet-the-list-component/
Updated link: http://docs.sencha.com/touch/2.2.1/#!/video/list
You should have your people/itemtap event inside listeners (not control).
http://docs.sencha.com/touch/2-0/#!/guide/events
Here, i'm registering my app:
App = new Ext.Application({
name: "App",
launch: function() {
this.views.viewport = new this.views.Viewport();
}
});
This is the way i register new panels and components. I put each of them into seperate js files.
App.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{
xtype: 'cPanel'
},
{
xtype: 'anotherPanel'
}
]
});
// register this new extended type
Ext.reg('App.views.viewport', App.views.Viewport);
I added the other components in the same manner.
In one my components which is a list view, I want to change the container panel's activeItem with another panel when tappen on an item, like this: ( Viewport contains this container panel)
App.views.ListApp = Ext.extend(Ext.List, {
store: App.store,
itemTpl: "...",
onItemDisclosure: function(record) {
App.detailPanel.update(record.data);
App.cPanel.setActiveItem("detailPanel");
},
listeners: {
itemtap: function(view, index, item, e) {
var rec = view.getStore().getAt(index);
App.views.detailPanel.update(rec.data);
App.views.cPanel.setActiveItem("detailPanel", {type:"slide", direction: "left"});
}
}
});
App.views.detailPanel.update(rec.data);
But it says: can't call method "update" of undefined
I tried different variations on that line, like:
App.detailPanel.update(rec.data);
and i tried to give detailPanel and cPanel ids, where they were added to their container panel, and tried to reach them with Ext.get(), but none of these worked.
What is the problem here?
And any other advices would be appreciated.
Thanks.
The lazy way: give the panels ids and use:
Ext.getCmp(id)
The recommended way: Assign itemId to your panel and use:
App.views.viewport.getComponent(itemId)
This will allow you to have more than one instance of the same component at aby given time, the first example is not valid cause you can only have a singular id in the DOM tree.
Also getComponent only works for components stored in the items collection.