I'm baffled that this dataView is empty! I have this same setup working with images but it's not displaying here. Am I missing something? Thanks for your help.
json:
{rows:[{"noteid":"4","txid":"97","contactid":"38","displayname":"Jeb Hafkin","txdate":"08\/20\/2010","date":"12\/08\/2011","type":"Treatment Note","content":"new test<img src=\"..\/logos\/1912323619.jpg\">","subject":"Jeb's note","firstname":"Jeb","lastname":"Hafkin"},{"noteid":"6","txid":"0","contactid":"51","displayname":"Bill Hyyman","txdate":null,"date":"12\/12\/2011","type":"","content":"test","subject":"","firstname":"Bill","lastname":"Hyyman"}], "success": true}
data Store, tpl, dataview:
var noteStore = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['noteid','txid','contactid', 'displayname', 'date',
'subject','txdate','type','amtpd','content' ],
root: 'rows',
id: 'noteid'
}),
proxy: new Ext.data.HttpProxy({
url: '/request.php?x=noteStore'
})
});
var tpl = new Ext.XTemplate (
'<tpl for ".">',
'<p class="note">noteid = {noteid} </p>',
'</tpl>'
);
var noteDataView = new Ext.DataView({
store: noteStore,
tpl: tpl,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'p.note',
emptyText: 'No notes to display'
});
var notePanel = new Ext.Panel ({
layout: 'fit',
padding: 10,
items: [noteDataView],
tbar: noteTb
});
The store needs to be loaded. Try adding autoLoad: true to your store:
var noteStore = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['noteid','txid','contactid', 'displayname', 'date',
'subject','txdate','type','amtpd','content' ],
root: 'rows',
id: 'noteid',
}),
proxy: new Ext.data.HttpProxy({
url: '/request.php?x=noteStore'
}),
autoLoad: true
});
Related
I am newbie to ember.js, I am using ember-1.9.1.js and ember-data for my project.
For back-end configuration I have created a REST API with core php and the db is MySQL.
Now I can create new records (posts) from client side using with DS.RESTAdapter's "createRecord" function.
But I don't know how to update a Record (post) with DS.RESTAdapter's "updateRecord" function.
When I try to call the "updateRecord" function from "App.PostController (doneEditing)" I got this error:
Uncaught TypeError: store.updateRecord is not a function --------- app.js
app.js code below
App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('home');
}
});
App.ApplicationAdapter = DS.RESTAdapter.extend({
namespace: 'pran/webapp/rest_adapter/api',
createRecord: function(store, type, snapshot) {
var data = this.serialize(snapshot, { includeId: true });
var url = "api/new_post";
return new Ember.RSVP.Promise(function(resolve, reject) {
jQuery.ajax({
type: 'POST',
url: url,
dataType: 'json',
data: data
}).then(function(data) {
Ember.run(null, resolve, data);
}, function(jqXHR) {
jqXHR.then = null; // tame jQuery's ill mannered promises
Ember.run(null, reject, jqXHR);
});
});
},
updateRecord: function(store, type, snapshot) {
var data = this.serialize(snapshot, { includeId: true });
var id = snapshot.id;
var url = [type, id].join('/');
return new Ember.RSVP.Promise(function(resolve, reject) {
jQuery.ajax({
type: 'PUT',
url: url,
dataType: 'json',
data: data
}).then(function(data) {
Ember.run(null, resolve, data);
}, function(jqXHR) {
jqXHR.then = null; // tame jQuery's ill mannered promises
Ember.run(null, reject, jqXHR);
});
});
}
});
App.Store = DS.Store.extend({
revision: 12,
adapter: 'App.ApplicationAdapter'
});
App.Post = DS.Model.extend({
title: DS.attr('string'),
author: DS.attr('string'),
date: DS.attr('date'),
excerpt: DS.attr('string'),
body: DS.attr('string')
});
App.Router.map(function() {
this.resource('home');
this.resource('about');
this.resource('posts', function(){
this.resource('post', { path: ':post_id' });
});
this.resource('newstory' , {path : 'story/new'});
});
App.PostsRoute = Ember.Route.extend({
model: function() {
return this.store.filter('post', { id: true }, function(post) {
return post.get('id');
return this.store.find('post');
});
}
});
App.PostRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('post', params.post_id);
}
});
App.NewstoryController = Ember.ObjectController.extend({
actions :{
save : function(){
var title = $('#title').val();
var author = $('#author').val();
var excerpt = $('#excerpt').val();
var body = $('#body').val();
var store = this.get('store');
var new_post = store.createRecord('post',{
title : title,
author : author,
date : new(Date),
excerpt : excerpt,
body : body
});
new_post.save();
this.transitionToRoute('posts');
}
}
});
App.PostController = Ember.ObjectController.extend({
isEditing: false,
actions: {
edit: function() {
this.set('isEditing', true);
},
doneEditing: function() {
this.set('isEditing', false);
var title = $('#title').val();
var excerpt = $('#excerpt').val();
var body = $('#body').val();
var store = this.get('store');
var update_post = store.updateRecord('post',{
title : title,
excerpt : excerpt,
body : body
});
update_post.save();
}
}
});
Somebody please suggest a way to fix the issue.
updateRecord is adapter's method not store's
so try next:
store.adapterFor(App.Post).updateRecord(...
this is fast fix
And better create Post object and call method .save() - it's not good practice to work with adapter from controller like
App.Post.create({
title : title,
excerpt : excerpt,
body : body
}).save();
P.S. The final solution was
App.NewstoryController = Ember.ObjectController.extend({
actions :{
save : function(){
var title = $('#title').val();
var author = $('#author').val();
var excerpt = $('#excerpt').val();
var body = $('#body').val();
var store = this.get('store');
var new_post = store.createRecord('Post',{
title : title,
author : author,
date : new(Date),
excerpt : excerpt,
body : body
});
new_post.save();
this.transitionToRoute('posts');
}
}
});
I am trying to load an ember table using Ember-Data and Fixtures. I can see the rows generated in the table , however they are empty. Note that it does generate the correct number of rows, it just does not show data. If I use an array instead, everything works properly. Also, if I remove the table and just do {{#each}}, data shows just fine too.
Any ideas would be welcome!
Thanks
here is the html:
<div class="table-container">
{{table-component
hasFooter=false
columnsBinding="columns"
contentBinding="content"}}
</div>
And here is the controller:
App.CustomersController = Ember.ArrayController.extend({
numRows: 1,
columns: function() {
var nameColumn, typeColumn, phoneColumn, identifierColumn;
nameColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 150,
textAlign: 'text-align-left',
headerCellName: 'Name',
getCellContent: function (row) {
return row.name;
}
});
typeColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 150,
textAlign: 'text-align-left',
headerCellName: 'Type',
getCellContent: function (row) {
return row.type;
}
});
phoneColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 100,
textAlign: 'text-align-left',
headerCellName: 'Phone',
getCellContent: function (row) {
return row.phone;
}
});
identifierColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 150,
textAlign: 'text-align-left',
headerCellName: 'ID',
getCellContent: function (row) {
return row.identifier;
}
});
console.log('in columns func');
console.log(this.get('content'));
return [nameColumn, typeColumn, phoneColumn, identifierColumn];
}.property(),
content: function() {
/*var temp= [
{
id: 1,
name: 'Seller',
type: 'Supermarket',
phone: '1-800-Sell',
identifier: '12345'
},
{
id: 2,
name: 'Sell',
type: 'Supermarket',
phone: '1-800-Sell2',
identifier: '12356'
}];
return temp;*/
return this.store.toArray
}.property('numRows')
});
(note the commented array that works is also included above)
And the model:
App.Customers = DS.Model.extend({
name: DS.attr('string'),
type: DS.attr('string'),
phone: DS.attr('string'),
identifier: DS.attr('string')
});
When you use an array, the objects are turned into real objects as opposed to being Ember.Object. You should be able to use:
getCellContent: function (row) {
return row.get('name');
}
To select the data on each row properly.
First off: There are a bunch of questions about this exact thing all over the place. I have spent the better part of a day reading through them all and clearly I am still failing to understand this.
I am getting my store data from a httprequest (rather than standard ajax call) and this is working and adding my data to the store. But whatever I try, this data will not populate the list. Currently my code looks like:
Model:
Ext.define('estarCamera.model.Event', {
extend: 'Ext.data.Model',
config: {
fields: [
'Id',
'Title',
'Content',
'Image',
'Location',
'Latitude',
'Longitude',
'Radius',
'Starts',
'Expires',
'Prestart'
]
}
});
Store:
Ext.define('estarCamera.store.Events', {
extend: 'Ext.data.Store',
config: {
model: 'estarCamera.model.Event',
storeId: 'EventStore'
}
});
Data is populating the store:
var jsonResponse = JSON.parse(xhr.responseText);
if(jsonResponse.status == "Success"){
//Success
var eventsJsn = JSON.parse(jsonResponse.message);
$.each(eventsJsn, function(){
$.each(this, function(k,v){
//Events root element
$.each(this, function(k,v){
//Each 'Event' element
var eStore = Ext.getStore('EventStore');
eStore.add({
Id: this.ID,
Title: decodeURIComponent(this.Title),
Content: decodeURIComponent(this.Content),
Image: this.Image,
Location: this.Location,
Latitude: this.Latitude,
Longitude: this.Longitude,
Radius: this.Radius,
Starts: this.Starts,
Expires: this.Expires,
Prestart: this.Prestart
});
eStore.sync();
})
});
});
Ideally this will then populate:
Ext.define('estarCamera.view.Events', {
extend: 'Ext.Panel',
xtype: 'events',
requires: [
'estarCamera.store.Events',
'Ext.form.FieldSet',
'Ext.List'
],
config: {
title:'Events',
iconCls: 'star',
layout: 'vbox',
items:[
{
docked: 'top',
xtype: 'toolbar',
title: 'Active Events'
},
{
xtype: 'container',
layout: 'fit',
flex: 10,
items:[{
xtype:'list',
title: 'Events',
width: '100%',
height: '100%',
store: 'Events',
styleHtmlContent: true,
itemTpl: new Ext.XTemplate(
'<div class="outerEvent">',
'<h1>title{Title}</h1>',
'<p>{Content}</p>',
'</div>'
)
}]
}]
}
});
Does anyone know why this is happening?
OK, feeling a bit fooling now .. eventually (after an embarrassingly long time) found that this was because my list was trying to reference 'Events' which is the name of my store and how I thought it was supposed to work. Changed this to 'EventStore' (the storeid of my store) and it worked perfectly.
I cannot figure out how I can retrieve a given Data item in a store (id-number) to send it to the "setActiveItem" method in a listener:
So I have a store - model:
Ext.regModel('PictureItem', {
fields: ['id', 'titel', 'url']
});
var pictureItems = new Ext.data.Store({
model: 'PictureItem',
data: [
{id:1, titel:'page 1', url:'http://placekitten.com/1024/768'},
{id:2, titel:'page 2', url:'http://placekitten.com/1024/768'},
{id:3, titel:'page 3', url:'http://placekitten.com/1024/768'},
]
});
Here is my menuList called "leftList":
var leftList = new Ext.List({
dock: 'left',
id:'list1',
width: 135,
overlay: true,
itemTpl: '{titel}',
singleSelect: true,
defaults: {
cls: 'pic'
},
store: pictureItems,
listeners:{
selectionchange: function (model, records) {
if (records[0]) {
Ext.getCmp('karte').setActiveItem(!!!Here the number of the selected Item
or respondend "id" in the data store!!!);
}
}
}
});
and the carousel....
var carousel = new Ext.Carousel({
id: 'karte',
defaults: {
cls: 'card'
},
items: [{
scroll: 'vertical',
title: 'Tab 1',
html: '<img class="orientation" alt="" src="img_winkel/titel_v.jpg">'
},
If I call
Ext.getCmp('karte').setActiveItem(2);
it works with the called card - but how can I get the number from the id of the selected item in the menu List /store????
By the way: what does mean:
if (records[0]) {
why [0]?
I FOUND THE ANSWER FOR MYSELF - IT'S EASY:
Ext.getCmp('karte').setActiveItem(records[0].get('id'), {type: 'slide', direction: 'left'});
The secret to get the record-entry is ".get()":
records[0].get('arrayfield')
So now I can change the activeItem in the carousel easely...
I'm building an app and i've got a list loaded with some info from store, it has a lot of items in it but when I try to scroll down it scrolls back up as if there were not enough items to scroll. Here is some code:
app.views.SearchTab = Ext.extend(Ext.Panel, {
iconCls: 'search',
id: 'search',
items: {
xtype: 'list',
store: app.stores.results,
scroll: 'vertical',
itemTpl: '<div class="list_left_panel"><div class="list_photo_wrapper"><div class="list_photo"><img src="http://realio.cz/images/{link}_0s.jpg" /></div></div></div><div class="list_right_panel"><div class="list_name">{titul}</div><div class="list_info"><div>{cena} Kč</div><div class="list_info_grey">{m2} m<sup>2</sup></div><div>{typ}</div></div></div>',
onItemDisclosure: function (record) {
Ext.dispatch({
controller: app.controllers.detail,
action: 'show',
id: record.getId()
});
}
},
initComponent: function() {
app.stores.results.load();
app.views.SearchTab.superclass.initComponent.apply(this, arguments);
}
});
app.models.Results = Ext.regModel("app.models.Results", {
fields: [
{name: "titul", type: "string"},
{name: "book_id", type: "int"},
...
{name: "u", type: "int"}
]
});
app.stores.results = new Ext.data.Store({
model: "app.models.Results",
proxy: {
type: 'ajax',
url: 'http://site.com/json_list2.php?...',
reader: {
type: 'json',
root: 'markers'
}
},
autoLoad: false
});
How can i fix the list so that it scrolls correctly? Thanks.
add this library this will help you: https://github.com/Lioarlan/UxBufList-Sench-Touch-Extension