I am learning sencha touch.
I am facing an issue while using xtype:'list', in a container. i.e it does not show anything to me . My code is:
{
xtype:'container',
items:[
{
xtype: 'list',
id: 'lists',
fields: [{name:'name'}],
store: {
data: [
{name: 'Cowper'},
{name: 'Everett'},
{name: 'University'},
{name: 'Forest'}
]
},
itemTpl: '<div>{name}</div>'
}
],
}
Kindly point out where i am wrong ??
Any help would be great :)
Thanks in advance.
The issue is in your code. Try this -
Ext.create('Ext.List', {
fullscreen: true,
id:'lists',
itemTpl: '<div>{name}</div>',
data: [
{name: 'Cowper'},
{name: 'Everett'},
{name: 'University'},
{name: 'Forest'}
]
});
OR
Ext.define('TestModel', {
extend: 'Ext.data.Model',
config: {
fields: ['name']
}
});
var store = Ext.create('Ext.data.Store', {
model: 'TestModel',
data: [
{name: 'Cowper'},
{name: 'Everett'},
{name: 'University'},
{name: 'Forest'}
]
});
Ext.create('Ext.List', {
fullscreen: true,
id:'lists',
itemTpl: '<div>{name}</div>',
store: store
});
I think it is solved when you add:
layout: 'fit'
to your container. This config sizes its child components.
ST2 Layout Guide
Note that list is actually a container. Try to minimize your nesting.
Take a look at the fullscreen config too.
Related
My URL structure is as follows:
http://localhost:8888/cdw/work/foo-bar/
http://localhost:8888/cdw/work/bar-foo/
http://localhost:8888/cdw/work/etc-etc/
I'm using swup JS and the route plugin https://swup.js.org/plugins/route-name-plugin
None of the following are working. please help. I just need to match any URL that has "work"
Not working
new SwupRouteNamePlugin({
routes: [
{ name: 'work', path: '/work/(.*)'},
]
}),
Not working:
new SwupRouteNamePlugin({
routes: [
{ name: 'work', path: '/work/*'},
]
}),
Not working
new SwupRouteNamePlugin({
routes: [
{ name: 'work', path: '/work/:slug'},
]
}),
Not working:
new SwupRouteNamePlugin({
routes: [
{ name: 'work', path: '/work/'},
]
}),
What am i missing here? Please help!
Thanks!!!
for the url http://localhost:8888/cdw/work/foo-bar/
I needed to include /cdw/, not just /work/
I am trying to display some CI information via an ember application backed by Firebase. If I do a this.store.find('plan'); it fetches and displays the plans for the desired project, but it doesn't automatically async fetch the plans like I want. I am not quite sure what I am doing wrong.
DEBUG: -------------------------------
DEBUG: Ember : 1.9.0-beta.1+canary.8105a1bb
DEBUG: Ember Data : 1.0.0-beta.11+canary.d96c747da5
DEBUG: EmberFire : 1.2.7
DEBUG: Handlebars : 1.3.0
DEBUG: jQuery : 1.10.2
DEBUG: -------------------------------
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('project');
}
});
App.ApplicationAdapter = DS.FirebaseAdapter.extend({
firebase: new Firebase('https://my.firebaseio.com/api-data/')
});
App.Project = DS.Model.extend({
name: DS.attr('string'),
plans: DS.hasMany('plan', { async: true })
});
App.Plan = DS.Model.extend({
project: DS.belongsTo('project', { async: true }),
shortName: DS.attr('string'),
shortKey: DS.attr('string'),
type: DS.attr('string'),
enabled: DS.attr('boolean'),
name: DS.attr('string'),
description: DS.attr('string'),
isBuilding: DS.attr('boolean'),
averageBuildTimeInSeconds: DS.attr('number')
});
My template
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each project in model}}
<li>
<h3>{{project.name}}</h3>
<ul>
{{#each plan in project.plans}}
<li>{{plan.name}}</li>
{{else}}
<li>no plans</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</script>
How can I get the ember-data async relationship to automatically fetch when I try to access the project.plans property?
Edit:
I have tried mocking with Ember-CLI's http-mock and am sending back the following for /projects
{"plans":[{id: '10', project: '1', name: 'test', plans: ['10']}]}
Which is now working with adding the plans array. I now just need to figure out how this works on firebase.
When using Firebase after my initial seed data, I fetched each model type and called save on all instances. This caused Firebase to be properly populated for the async data array. This was persisted as follows:
/projects
{
"AS": {
"name": "AS",
"plans": {
"AS-AS": true
}
},
"F": {
"name": "F",
"plans": {
"F-INT": true,
"F-QA": true,
"F-STAG": true
}
}
}
/plans
{
"AS-AS": {
"averageBuildTimeInSeconds": 23,
"description": "",
"enabled": true,
"isBuilding": false,
"name": "AS - AS",
"project": "AS",
"shortKey": "AS",
"shortName": "AS",
"type": "chain"
},
"F-INT": {
"averageBuildTimeInSeconds": 18,
"description": "Integration build",
"enabled": true,
"isBuilding": false,
"name": "F - Integration",
"project": "F",
"shortKey": "INT",
"shortName": "Integration",
"type": "chain"
},
"F-QA": {
"averageBuildTimeInSeconds": 38,
"description": "Release from Stage to QA",
"enabled": true,
"isBuilding": false,
"name": "F - QA",
"project": "F",
"shortKey": "QA",
"shortName": "QA",
"type": "chain"
},
"F-STAG": {
"averageBuildTimeInSeconds": 16,
"description": "Stage Build and Deploy",
"enabled": true,
"isBuilding": false,
"name": "F - Stage",
"project": "F",
"shortKey": "STAG",
"shortName": "Stage",
"type": "chain"
}
}
I create an WebSQL database on my Sencha Touch project. An table named Product have 100 record.
I config my Store as
Ext
.define('Mark.store.Product', {
extend: 'Ext.data.Store',
requires: [
'Mark.model.Product',
'Ext.data.proxy.Sql'
],
config: {
autoLoad: true,
autoSync: true,
model: 'Mark.model.Product',
storeId: 'Product',
proxy: {
type: 'sql',
database: 'osadb'
}
}
});
By default it will load 25 record from the Product table to the product List on View (listpaging plugin added)
And this is my list configuration:
{
xtype: 'list',
docked: 'bottom',
height: '100%',
hidden: false,
itemId: 'productList',
emptyText: 'Data not found',
itemTpl: [
'<div style="font-size:15px">{METRO_DESC}</div>',
'<div style="font-size:13px" class="mark-list-item-secondary">{Brand} {PACKSIZE}</div>'
],
scrollToTopOnRefresh: false,
store: 'Product',
useSimpleItems: false,
plugins: [
{
autoPaging: true,
type: 'listpaging'
}
]
}
When i run the project. It have load 25 record to screen, and it show "No more records" at the bottom
.
But the table Product in Database have 100 record. The Store just load 25, why it's not show the "Load More" button instead of "No more record"
I am having some problems adding my custom list view into the viewport.
If i use the example from the documentation like the lines below it works fine
Ext.Viewport.add(Ext.create('Ext.List', {
store: {
fields: ['name'],
data: [
{name: 'Cowper'},
{name: 'Everett'},
{name: 'University'},
{name: 'Forest'}
]
},
itemTpl: '{name}'
}));
If i define my own list and then try to add it it does not work. What am I doing wrong?
Ext.define('MyList', {
extend: 'Ext.List',
store:
{ fields: ['name'],
data: [{name: 'Cowper'},
{name: 'Everett'},
{name: 'University'},
{name: 'Forest'}],
},
itemTpl: '{name}'});
Ext.Viewport.add(Ext.create('MyList'));
When you define view, you should put view configuration inside config.
Try this
Ext.define('MyList',{
extend: 'Ext.List',
config: {
store: {
fields: ['name'],
data: [{name: 'Cowper'},
{name: 'Everett'},
{name: 'University'},
{name: 'Forest'}],
},
itemTpl: '{name}'
}
});
Ext.Viewport.add(Ext.create('MyList'));
In the Ember tutorial, the many-to-many relationship is introduced as:
App.Post = DS.Model.extend({
tags: DS.hasMany('App.Tag')
});
App.Tag = DS.Model.extend({
posts: DS.hasMany('App.Post')
});
Is it possible to just put 1 of these DS.hasMany relationships. For example (let me know if my code is incorrect in any way):
App.Post = DS.Model.extend({
postid: DS.attr('number'),
content: DS.attr('string'),
tags: DS.hasMany('App.Tag')
});
App.Tag = DS.Model.extend({
tagid: DS.attr('number'),
name: DS.attr('string')
});
So that can have a JSON like in these fixture adapter setup:
App.Tag.FIXTURES = [{
tagid: 1111,
name: 'Ember.js',
}, {
tagid: 2222,
name: 'Javascript'
}];
App.Post.FIXTURES = [{
postid: 3000,
content: 'A JS Question'
tags: [2222]
}, {
postid: 4000,
content: 'An Ember.js Question',
tags: [1111, 2222]
}];
So basically the many-to-many relationship is just established in the parent, that's why I didn't include posts: DS.hsaMany('App.Post') in the App.Tag model.
Is what I'm doing okay? If so, when should I need DS.hasMany in both models?
If not, please correct the Fixture JSON as well.
If the type of adapter makes a difference, please also explain how they're different (related question).
Update: Since intuitivepixel clarified with me that relationship must be many-to-many, let me try it again:
App.Post = DS.Model.extend({
postid: DS.attr('number'),
content: DS.attr('string'),
tags: DS.hasMany('App.Tag')
});
App.Tag = DS.Model.extend({
tagid: DS.attr('number'),
name: DS.attr('string'),
posts: DS.hasMany('App.Post')
});
Can the Fixture adapter setup be like this, where the relationship is ONLY defined in the posts?
App.Tag.FIXTURES = [{
tagid: 1111,
name: 'Ember.js',
}, {
tagid: 2222,
name: 'Javascript'
}];
App.Post.FIXTURES = [{
postid: 3000,
content: 'A JS Question'
tags: [2222]
}, {
postid: 4000,
content: 'An Ember.js Question',
tags: [1111, 2222]
}];
Or does it have to be like this, where the relationship is defined in both. If so, wouldn't the information be redundant? Redundancy is terrible though. :(
App.Tag.FIXTURES = [{
tagid: 1111,
name: 'Ember.js',
posts: [4000]
}, {
tagid: 2222,
name: 'Javascript',
posts: [3000, 4000]
}];
App.Post.FIXTURES = [{
postid: 3000,
content: 'A JS Question'
tags: [2222]
}, {
postid: 4000,
content: 'An Ember.js Question',
tags: [1111, 2222]
}];
Is it possible to just put 1 of these DS.hasMany relationships.
Yes, but this would be then a one-to-many relationship.
So basically the many-to-many relationship is just established in the parent, that's why I didn't include posts: DS.hasMany('App.Post') in the App.Tag model.
What you are trying to do doesn't work, you need then a one-to-many relationship and your models should look like:
App.Post = DS.Model.extend({
postid: DS.attr('number'),
content: DS.attr('string'),
tags: DS.hasMany('App.Tag')
});
App.Tag = DS.Model.extend({
tagid: DS.attr('number'),
name: DS.attr('string')
post: DS.belongsTo('App.Post')
});
And the correspondent FIXTURES then:
App.Tag.FIXTURES = [{
tagid: 1111,
name: 'Ember.js',
post: 4000
}, {
tagid: 2222,
name: 'Javascript',
post: 4000
}];
App.Post.FIXTURES = [{
postid: 4000,
content: 'An Ember.js Question',
tags: [1111, 2222]
}];
Is what I'm doing okay? If so, when should I need DS.hasMany in both models?
It's not really ok, IMHO (and because of the nature of a tag) it should be possible to assign a tag to many posts, and many tags could be assigned to a post. So we end up using a many-to-many relationship like in the ember tutorial you mentioned, there is a reason for that I guess.
So the final answer to your question: can i set up a many-to-many relationship on just-one side in ember-js would be - No!
Update
I've put togheter a small example how a many-to-many relationship would work, see here.
Hope it helps.
You can do it using the RESTAdapter. That way, you are loading the tags alongside with the posts. But as intuitivepixel correctly points out, this is not a truly many-to-many relationship.
App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
model: function() {
return App.Post.find();
}
});
App.Adapter = DS.RESTAdapter.extend();
App.Adapter.map('App.Post', {
tags: { embedded: 'load' }
});
App.Store = DS.Store.extend({
adapter: App.Adapter.create({
namespace: 'api'
})
});
App.Post = DS.Model.extend({
content: DS.attr('string'),
tags: DS.hasMany('App.Tag')
});
App.Tag = DS.Model.extend({
name: DS.attr('string')
});
And your JSON payload would be:
{
"posts": [
{
"id": 4000,
"content": "An Ember.js Question",
"tags": [
{
"id": 1,
"name": "ember.js"
},
{
"id": 2,
"name": "javascript"
},
{
"id": 3,
"name": "ember-data"
}
]
}
]
}