I'm new at sencha touch, and i'm having trouble using dataview with an ajax store.
Here follow my code:
On my app.js on the launch part:
Ext.define('SocializeApp.model.Friends', {
extend: 'Ext.data.Model',
config: {
fields: [
{name:'name' ,type:'string'},
{name:'id' ,type:'string'},
{name:'img' ,type:'string'}
]
}
});
Ext.define('SocializeApp.store.FriendStore', {
extend: 'Ext.data.Store',
config: {
model: 'SocializeApp.model.Friends',
storeId: 'FriendStore',
proxy: {
type: 'ajax',
url: 'http://socialize.localhost.com/friends.php',
reader: {
type: 'json',
rootProperty: 'friends'
},
autoLoad: 'true'
},
}
});
Ext.Viewport.add(Ext.create('SocializeApp.view.Main'));
In the Main.js
Ext.define('SocializeApp.view.Main', {
extend: 'Ext.tab.Panel',
fullscreen: true,
xtype: 'main',
requires: ['Ext.TitleBar'],
config: {
tabBarPosition: 'bottom',
items: [{
title: 'Amigos',
iconCls: 'team',
items: [{
xtype: 'dataview',
store: 'FriendStore',
scrollable: {
direction: 'vertical'
},
tpl: ['{img} {id} {name}']
}]
}, {
title: 'time',
iconCls: 'time',
items: [{
html: '<h1> game </h1><src="resources/img/socialize-button.png" alt=""/>',
}]
}, {
title: 'Interesses',
iconCls: 'bookmarks',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
}, {
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}]
}]
}
});
I'm kind of lost, i used the store as a variable to test and in the console it gave me the correct data, but no optout for this dataview.
FYI the JSON
{"friends":[{"name":"sakai","id":"123","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"124","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"125","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"126","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"127","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"128","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"129","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"110","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"111","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"}]}
I really appreciate any help.
Thx,
Try these (code has the ideas combined).
1 - Give your dataview an itemId, and load the store in your view initialize method. Might also want to try and set autoLoad to false.
2 - Sometimes I also explicitly give the full store reference rather than just the id, for ex Ext.getStore('FriendStore')
3 - Are you using MVC? did you declare your stores /models in your app.js?
Ext.application({
name: 'yourapp',
stores: ['FriendStore'],
models: ['Friends'],
launch: function() {
...
}
});
4 - Or, just thought of this.. change your tpl to 'itemTpl'
Ext.define('SocializeApp.view.Main', {
extend: 'Ext.tab.Panel',
fullscreen: true,
xtype: 'main',
requires: ['Ext.TitleBar', 'SocializeApp.store.FriendStore'],
config: {
tabBarPosition: 'bottom',
items: [{
title: 'Amigos',
iconCls: 'team',
items: [{
itemId: 'FriendsDataview',
xtype: 'dataview',
store: Ext.getStore('FriendStore'),
scrollable: {
direction: 'vertical'
},
itemTpl: ''.concat(
'<div>{img} {id} {name}</div>'
)
}]
}, {
title: 'time',
iconCls: 'time',
items: [{
html: '<h1> game </h1><src="resources/img/socialize-button.png" alt=""/>',
}]
}, {
title: 'Interesses',
iconCls: 'bookmarks',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
}, {
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}]
}]
},
initialize: function(){
var store = Ext.getStore('FriendStore');
var dv = Ext.ComponentQuery.query('dataview[itemId=FriendsDataview]')[0];
dv.setStore(store);
store.load(function(){
console.log(this);
});
}
});
Related
I'm very new to sencha touch and ive having difficulty in moving in moving from one view to another when i click the add button in my mainview in my practice application.ive tried searching for errors in my console panel but Chrome just shows and empty console. I'm sorry if this seems like a noob query but any help is gratefully accepted.
MainView.js
Ext.define('MyApp.view.MainView', {
extend: 'Ext.navigation.View',
requires: [
'Ext.navigation.Bar',
'Ext.Button'
],
config: {
itemId: 'MainView',
navigationBar: {
docked: 'top',
itemId: 'navbar',
items: [
{
xtype: 'button',
align: 'right',
itemId: 'addButton',
iconAlign: 'center',
iconCls: 'add'
}
]
}
}
});
AddForm.js
Ext.define('MyApp.view.AddForm', {
extend: 'Ext.form.Panel',
requires: [
'Ext.form.FieldSet',
'Ext.field.DatePicker',
'Ext.picker.Date',
'Ext.Button'
],
config: {
items: [
{
xtype: 'fieldset',
itemId: 'myForm',
title: 'Insert Data',
items: [
{
xtype: 'textfield',
label: 'ID',
name: 'id',
required: true
},
{
xtype: 'textfield',
label: 'Name',
name: 'username',
required: true,
autoCapitalize: true
},
{
xtype: 'datepickerfield',
label: 'Date Of Birth',
labelWrap: true,
placeHolder: 'mm/dd/yyyy'
}
]
},
{
xtype: 'button',
itemId: 'saveButton',
margin: 10,
ui: 'confirm',
text: 'SAVE'
},
{
xtype: 'button',
itemId: 'declineButton',
margin: 10,
ui: 'decline',
text: 'DELETE'
}
]
}
});
FirstControl.js(Controller)
Ext.define('MyApp.controller.FirstControl', {
extend: 'Ext.app.Controller',
config: {
refs: {
MainView: 'mainview',
addButton: 'mainview #addButton'
},
control: {
"mainview #addButton": {
tap: 'add'
}
}
},
add: function(button, e, eOpts) {
console.log('inside the add function');
this.getMainView().push({
xtype:'AddForm',
title:'Insert'
});
}
});
forgot to add the alias:'field'
Change your add function in FirstControl.js(Controller file) file to below.
add: function(button, e, eOpts) {
console.log('inside the add function');
this.getMainView().push(Ext.create('MyApp.view.AddForm'));
}
It should work.
I am new to sencha touch and I am having trouble loading a form into a view.
In my app.js I am loading the main view as such
Ext.Viewport.add(Ext.create('app.view.Main'));
My full app.js is as follows
Ext.application({
name: 'app',
requires: [
'Ext.MessageBox',
'Ext.form.FieldSet',
],
views: ['Main'],
launch: function() {
// Initialize the main view
Ext.Viewport.add(Ext.create('PlanPouch.view.Main'));
},
});
My main view is:
Ext.define("app.view.Main", {
extend: 'Ext.Container',
config:{
items:[
form
]
}
});
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
});
I took the form from the official documentation and the form doesn't load for some reason. So how can I add the form to my main view?
First let it solve by your approach. Make the following changes & it should work in your system (Running on mine):-
1.) In app.js
Ext.Viewport.add(Ext.create('app.view.Main'));
2). In Main.js
Ext.define("app.view.Main", {
extend: 'Ext.Container',
config:{
items:[
{
xtype: form
}
]
}
});
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
});
But i will not prefer to call the formpanel in the way you are doing. Rather you can follow ARolek answer OR follow this approach :-
1) app.js
Ext.application({
name: "app",
views: ["Main","second"],
launch: function () {
Ext.Viewport.add(Ext.create('app.view.Main'));
}
});
2) Main.js
Ext.define("app.view.Main", {
extend: "Ext.Container",
requires:["app.view.second"],
config:{
fullscreen: true,
layout:
{
type: 'fit'
},
items:[
{
xtype: "form"
}
]
}
});
3) second.js
Ext.define("app.view.second", {
extend: "Ext.form.Panel",
requires:['Ext.form.FieldSet','Ext.Toolbar'],
alias: "widget.form",
config:
{
items:
[
{
xtype: 'fieldset',
title: 'About You',
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
}
]
}
});
If you want the form to always be in app.view.Main, then simply do:
Ext.define("app.view.Main", {
extend: 'Ext.Container',
config:{
items:[
{
xtype:'formpanel',
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
}
]
}
});
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 am trying to define a view but I am getting an error
Uncaught TypeError: Cannot call method 'substring' of undefined
/app/view/Sidebar.js
Ext.define('SimpleTodo.view.Sidebar', {
extend: 'Ext.panel.Panel',
alias: 'widget.sidebar',
config: {
title: 'Projects & Todo Lists',
tbar: [
{
xtype: 'button',
text: 'Add Project'
},
{
xtype: 'button',
text: 'Add Todo List'
}
],
//store: Ext.data.StoreManager.lookup('projects'),
html: 'Hello world',
width: 200
}
});
Then tried to use it in my app.js
Ext.application({
name: 'SimpleTodo',
views: [
'Sidebar'
],
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'sidebar' // <---- here
},
{
xtype: 'panel',
id: 'detailsView',
flex: 1,
layout: 'card',
items: [
{
xtype: 'panel',
id: 'todoDetails',
title: 'Todo Details'
},
{
xtype: 'panel',
id: 'addProject',
title: 'Add project',
}
]
}
]
})
}
});
What am I missing? Have I defined my views and used it correctly?
Actually it must be like that:
Ext.application({
name: 'SimpleTodo',
requires:[
'SimpleTodo.view.Sidebar'
],
appFolder: 'app',
launch: function() {
Ext.onReady(function(){
Ext.create('Ext.container.Viewport', {
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'sidebar' // <---- here
},
{
xtype: 'panel',
id: 'detailsView',
flex: 1,
layout: 'card',
items: [
{
xtype: 'panel',
id: 'todoDetails',
title: 'Todo Details'
},
{
xtype: 'panel',
id: 'addProject',
title: 'Add project',
}
]
}
]
})
});
}
});
The following app displays a toolbar on top of some HTML:
Ext.application({
name: 'app',
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [
{
region: 'north',
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'Button'
}]
},
{
region: 'center',
html: '<img src="resources/images/image.png">'
}]
});
}
});
but the following does not:
Ext.application({
name: 'app',
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'Button'
}]
}],
items: [
{
html: '<img src="resources/images/image.png">'
}]
});
}
});
Unfortunately, I can't find much documentation on using dockedItems. What am I doing wrong?
dockedItem is a feature of Ext.panel.AbstractPanel (and sub-classes). It is not supported in e.g. Ext.container.Container or Ext.container.Viewport.
Use a panel instead of the viewport (or alternatively, nest a panel inside the viewport) to show your dockeItems:
Ext.application({
name: 'app',
appFolder: 'app',
launch: function() {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody()',
layout: 'fit',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'Button'
}]
}],
items: [
{
html: '<img src="resources/images/image.png">'
}]
});
}
});
Working JsFiddle here: http://jsfiddle.net/mistaecko/bDNgB/