I'm trying to create an MVC "Notes" application using Sencha touch 2 on aptana studio 3, I've only created the main view and a controller, but when I test it using chrome, all it shows is a blank white screen.
Any help?
Here's my code:
Main View:
Ext.define("NotesApp.view.NotesListContainer", {
extend: "Ext.Container",
config: {
fullscreen:true,
items: [{
xtype: "toolbar",
docked: "top",
title: "My Notes",
items: [{
xtype: "spacer"
}, {
xtype: "button",
text: "New",
ui: "action",
id: "new-note-btn"
}]
}]
}
});
controller:Notes.js:
Ext.define('NotesApp.app.controller.Notes',{
extend:'Ext.app.Controller',
config:{
refs:
{
newNoteBtn:'#new-note-btn'
},
control:
{
newNoteBtn: {
tap: 'onNewNote'
}
}
},
onNewNote:function()
{
console.log("onNewNote fn");
}
});
app.js:
Ext.application({
name: "NotesApp",
controllers: ["Notes"],
views: ["NotesListContainer"],
launch: function () {
console.log("fff");
//debugger;
var notesListContainer = Ext.create("NotesApp.view.NotesListContainer");
Ext.Viewport.add(notesListContainer);
}
});
Recently there have been some issues with Chrome (version 43) causing white screens on chrome and android. You can try to override Ext.util.PaintMonitor to return a new instance of Ext.util.PaintMonitor.CssAnimation as specified here.
Not sure, but if you define
Ext.define("NotesApp.view.NotesListContainer", {
extend: "Ext.Panel",
you have to OK. If not post here your index.html
Cheer, Oleg
H, please only you change into Ext.Application
views: ["NotesListContainer"],
to,
requires: ['NotesApp.view.NotesListContainer'],
Hope these helps. :)
Related
at the moment I'm working on my first Sencha Touch Application and I run into a problem I spent lots of hours until now.
I tried to get the value from a cross domain Json to fill a nested list in my application.
When I run my code in browser everything works fine. The List is filled and I can call a detail view by tap on a leafitem.
But after building the sencha touch app with "sencha app build", I only get the following error in the browser console when starting the app.
TypeError: Ext.data is undefined
Ext.data.JsonP.callback1({ Here is the long valid JSON content });
I don't unterstand, why Ext.data is undefined. I would appreciate if someone could help me. I tried several solutions but I couldn't get this running.
These are the contents of my files:
Store:
Ext.define("Test.store.ExpStore", {
extend: "Ext.data.TreeStore",
requires: [
'Ext.data.JsonP'
],
config: {
model: "Test.model.ExpModel",
proxy: {
type: 'jsonp',
url: 'http://myurl/project/mylist.php',
callbackKey: 'callback',
reader: {
type: 'json',
rootProperty: 'experts'
}
}
}});
Model:
Ext.define('Test.model.ExpModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', type: 'string'},
{name: 'number', type: 'string'},
{name: 'active', type: 'boolean'}
]
}});
ListView:
Ext.define('Test.view.ExpListView', {
extend: 'Ext.NestedList',
alias: 'widget.expListView',
config: {
fullscreen: true,
title: "Experts",
displayField: 'name',
store: 'ExpStore',
}});
app.json
"js": [
{
"path": "touch/sencha-touch.js",
"x-bootstrap": true
},
{
"path": "bootstrap.js",
"x-bootstrap": true
},
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
}],
app.js
Ext.application({
name: 'Test',
requires: [
'Ext.MessageBox',
//'Ext.data.JsonP',
'Ext.data.*'
],
models: [
'ExpModel'
],
views: [
//'Main'
'ExpDetailsView',
'ExpListView'
],
controllers: [
'ExpController'
],
stores: [
'ExpStore'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
var expListView = {
xtype: 'expListView'
};
var expDetailsView = {
xtype: 'expDetailsView'
};
// Initialize the main view
Ext.Viewport.add(expListView, expDetailsView);
},
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();
}
}
);
}});
How to I add a map listener to my first map page?
I saw many examples which create a map and put it into a page, but here in my code, the map itself is a page.
So I do not know how to add map listeners in this way.
Ext.define('myapp.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
fullscreen: true,
requires: [
'Ext.TitleBar',
'Ext.Video',
'Ext.Map',
'Ext.Panel',
'Ext.tab.*',
'Ext.*'
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'WebTrack',
iconCls:'maps',
xtype: 'map',
useCurrentLocation: true,
store: 'my.store.appleStore',
}
Can someone help please?
Thanks very much
Finally, I found the answer.
Steps to follow:
create a map component in controller.
Ext.define('myapp.controller.Noises', {
extend: 'Ext.app.Controller',
requires: ['Ext.MessageBox'],
config: {
refs: {
mapComponent: 'main map'
},
control: {
mapComponent: {
maprender: 'onMaprender'
}
}
},
So the onMapprender is where you can start to write your code.
Hope it helps.
Cheers
I have a Kendo UI grid with a popup editable property. I would like to make my dropdown columns wider when I'm add/edit mode, but I cannot seem to change the widths. I can indeed change the widths in the grid itself but not in edit mode.
Does it have to do with some kind of Edit Template ? I can't find the documentation for it.
thanks.
Bob
Here's my sample grid :
positGrid = $("#positGrid").kendoGrid({
dataSource: datasource,
toolbar: [
{ name: "create", text: "Add Position" }
],
columns: [{
field: "PositionId",
},
{
field: "Portfolio",
editor: portfolioDropDownEditor, template: "#=Portfolio#"
},
{
field: "Instrument",
width: "220px",
editor: instrumentsDropDownEditor, template: "#=Instrument#",
},
{
field: "NumOfContracts",
},
{
field: "BuySell",
editor: buySellDropDownEditor, template: "#=BuySell#"
},
{
command: [
{
name: "edit",
click: function (e) {
}
},
"destroy"
]
},
],
sortable: true,
editable: "popup",
});
You can wire up edit event to set dropdown options:
name: "edit",
click: function (e) {
if (!e.model.isNew()) {
var dropdown = e.container.find("input[name=Portfolio]").data("kendoDropDownList");
dropdown.list.width(500);
}
}
I have a sample sencha touch application trying to implement E-Mail, Call and SMS functionality, but when run the application it's not opening E-Mail window or Call window. Please can I know the right syntax to make it work?
Sample code:
Ext.define('Sample.view.ContactsView', {
extend:'Ext.Panel',
requires:[
'Ext.form.FieldSet',
'Ext.field.Text'
],
alias:"widget.contactpage",
initialize:function () {
this.callParent(arguments);
},
config:{
items:[
{
xtype:'titlebar',
title:'Contact Us'
},
{
xtype:'panel',
layout:'hbox',
items:[
{
xtype:'button',
flex:1,
id:'smsButton',
handler:function(){
document.location.href = 'sms:464646'
}
},
{
xtype:'spacer'
},
{
xtype:'button',
text: 'Phone',
id:'callMeButton',
flex:1,
handler:function(){
document.location.href = 'tel:+1-800-555-1234'
}
}
]
},
{
xtype:'button',
text:'Email',
id: 'emailButton',
handler:function(){
document.location.href = 'mailto:webmaster#example.com'
}
}
]
},
});
Use window.open() method.
window.open('tel:+1-800-555-1234');
window.open('mailto:webmaster#example.com');
You can do this by just using the <a> tag
For phone number
+1-800-555-1234
For E-Mail
webmaster#example.com
Tapping on the link will automatically summon the phone app or e-mail app in both android and iOS.
I'm trying to use Sencha Touch 2 to load a local json file into a dataview.
When checking with Firebug - the file is being loaded by Sencha, but it is not being shown for some reason.
any ideas why?
Here is my code (the HTML is the basic Sencha html):
Ext.require([
'Ext.Panel',
'Ext.tab.Panel',
'Ext.Ajax'
]);
new Ext.application({
name: 'MyApp',
useLoadMask: true,
launch: function () {
Ext.regModel('City', {
fields: [
{name:'ID', type:'string'},
{name:'Name', type:'string'}
]
});
var CitiesStore = new Ext.create('Ext.data.Store',{
autoLoad: true,
storeId: 'CitiesStore',
model: 'City',
proxy: {
type: 'ajax', // ajax is for same domain, jsonp for cross-domain
url: 'cities.json',
reader: {
type: 'json',
root: 'cities'
}
}
});
Ext.create('Ext.TabPanel',{
fullscreen: true,
tabBarPosition: 'bottom',
scrollable: true,
items: [
{
title: 'Home',
iconCls: 'home',
html: 'Welcome to my app',
style: 'text-align: center;'
},
{
title: 'Search',
iconCls: 'search',
items: [
Ext.create('Ext.DataView', {
store: 'CitiesStore',
itemConfig: {
tpl: '<h2>{Name}</h2>'
}
})
]
},
{
xtype: 'toolbar',
title: 'My App',
dock: 'top'
}
]
}).setActiveItem(1); // this is set for debugging only
}
});
any the json is dead simple
{"cities":[{"ID":1,"Name":"new york"},{"ID":2,"Name":"las vegas"},{"ID":3,"Name":"los angeles"}]}
Many thanks!
I have had issues with lists or dataviews not showing unless the parent container had a width set to a value or a layout set to 'fit'. In case it makes any difference, try:
title: 'Search',
iconCls: 'search',
layout: 'fit',
Having had a very quick glance... Few things - but firstly your reference to the store is incorrect.
In your DataView you should don't need the quotes:
store: CitiesStore,
Also you don't need the new keyword on the store as you're using Ext.Create.
This should get you a bit further at least.
are you using Firefox? Firefox and IE sometimes make problems when viewing
ply use Chrome or Safari.