List is empty when loading page - sencha-touch

Im trying to load data into a list using a store. When i run my code the list value is blank, the list is not empty but it is blank.
Here is the part of my controller where i try to add data to store.
var loginStore = Ext.getStore('instance');
var record = [{id:id, issued_at:issued, instance_url:instance, signature:sig, access_token:access, myBaseUri:baseUri}];
loginStore.add(record);
Here is the part of the view where i make the list
{
xtype :'list',
id : 'list1',
loadingText: 'Loading Projects',
emptyText: '<div>No Projects Found</div>',
onItemDisclosure: true,
itemTpl: '<div>{issued_at}</div>',
height: 320,
store : 'instance'
}
This doesnt work but when i replace itemTpl:'<div>{issued_at}</div>' with
itemTpl:'<div>{id}</div>'
it seems to work. What am I doing wrong?
Here is my store:
Ext.define('GS.store.instance',{
extend: 'Ext.data.Store',
requires: ['GS.model.login'],
config:{
model: 'GS.model.login'
}
});
And here is my model:
Ext.define('GS.model.login',{
extend: 'Ext.data.Model',
fields:[
{name: 'id', type: 'string'},
{name: 'issued_at', type:'string'},
{name: 'instance_url', type:'string'},
{name: 'signature', type:'string'},
{name: 'access_token', type:'string'},
{name: 'myBaseUri', type:'string'}
]
});

The way you create your record is wrong. Try this way :
var record = Ext.create('YOUR_MODEL', {
id : id,
issued_at: issued,
instance_url: instance,
...
});
Hope this helps.

Try it using this example:
Ext.define('Contact', {
extend: 'Ext.data.Model',
config: {
fields: ['firstName', 'lastName']
}
});
var store = Ext.create('Ext.data.Store', {
model: 'Contact',
},
data: [
{ firstName: 'Tommy', lastName: 'Maintz' },
{ firstName: 'Rob', lastName: 'Dougan' },
{ firstName: 'Ed', lastName: 'Spencer' },
{ firstName: 'Jamie', lastName: 'Avins' },
{ firstName: 'Aaron', lastName: 'Conran' },
{ firstName: 'Dave', lastName: 'Kaneda' },
{ firstName: 'Jacky', lastName: 'Nguyen' },
{ firstName: 'Abraham', lastName: 'Elias' },
{ firstName: 'Jay', lastName: 'Robinson'},
{ firstName: 'Nigel', lastName: 'White' },
{ firstName: 'Don', lastName: 'Griffin' },
{ firstName: 'Nico', lastName: 'Ferrero' },
{ firstName: 'Jason', lastName: 'Johnston'}
]
});
Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
store: store,
});

As you get values in the list when using id instead of issued_at, the problem seems to be, not with the functions/models/store so much, but with the issued_at variable itself. Are you certain it's getting through to the store?
Try adding this when your store has loaded, or run it in the browser using for instance chrome
console.log(Ext.getStore("instance").getAt(0).data.id);
console.log(Ext.getStore("instance").getAt(0).data.issued_at);
You should see some result from your first data item.
If you get an id but just "undefined" for issued_at, you'll know that the issue is with the records. And in that case I would try to log your issued variable before you try to add it to the store to make sure that it is actually defined.
Please report with results for further help/discussions if needed.

It turns out that i was missing the config option on my model definition.
Ext.define('GS.model.login',{
extend: 'Ext.data.Model',
config:{
fields:[ 'id','issued_at','instance_url','signature','access_token','myBaseUri' ]
}
});

Related

Why Doesn't Prepare Render Properly in Sanity.IO

I am trying to customize the prview section for a document insanity.io. To that extent, I have created the following document:
export default {
name: 'news',
type: 'document',
title: 'News',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
...
{
name: 'author',
title: 'Author',
type: 'string',
},
...
],
preview: {
select: {
title: 'title',
subtitle: 'author',
}
}
}
This works exactly as I want in Studio. The title section in the preview pane shows the title of the document and the subtitle section shows the name of the author.
However, if I try to modify the output of author by using prepare, then it no longer works. For instance, take a look at the following variation of the same document:
export default {
name: 'news',
type: 'document',
title: 'News',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
...
{
name: 'author',
title: 'Author',
type: 'string',
},
...
],
preview: {
select: {
title: 'title',
author: 'author',
}
},
prepare(selection) {
const { author } = selection
return {
...selection,
subtitle: author && `${author} is the author`
}
}
}
The title preview field is rendered, but nothing shows up in the subtitle section. However, as far as I understand -- this should work. And I wondering why not.
Any ideas?
prepare is actually a function called in preview. You have it as a seperate field of the root object. Move prepare inside preview like so:
preview: {
select: {
title: 'title',
author: 'author'
},
prepare(selection) {
const { author } = selection
return {
...selection,
subtitle: author && `${author} is the author`
}
}
}

Insert data into a store immediately after the store is loaded?

I've create a simple app that loads data from a json store and draws it on the screen. What I need to be able to do is add to the store on the client side (I don't control the source data). So, in either the store load:funciton() or in the MainController, if it's not too late, I want to insert a few rows at the beginning so these records appear before John, Paul, George, and Ringo. I've included all of my Javascript so the code is complete.
EmployeeModel:
Ext.define('Sencha.model.Employee', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{
name: 'fullName',
type: 'string',
convert: function (value, record) {
firstName = record.data.firstName;
lastName = record.data.lastName;
fullName = firstName + " " + lastName;
return fullName;
}
}
]
},
load: function () {
console.log("Employee model");
this.callParent(arguments);
}
});
EmployeeStore:
Ext.define('Sencha.store.EmployeeStore', {
extend: 'Ext.data.Store',
requires: [],
config: {
model: 'Sencha.model.Employee',
autoLoad: true,
defaultRootProperty: 'items',
proxy: {
type: 'ajax',
url: 'employees.json',
reader: {
type: 'json',
rootProperty: 'items'
}
}
},
load: function () {
console.log("EmployeeStore");
this.callParent(arguments);
}
});
Controller: (Trying to get the store and print the values)
Ext.define('Sencha.controller.MainController', {
extend: 'Ext.app.Controller',
requires: [],
config: {
},
launch: function () {
console.log("Main Controller...");
var empStore = Ext.getStore('EmployeeStore');
console.log(empStore.length);
empStore.each(function (val) { // Not working
var firstName = val.get('firstName');
console.log(firstName);
});
}
});
app.js:
Ext.Loader.setConfig({enabled: true});
Ext.application({
name: "Sencha",
models: ['Employee'],
stores: ['EmployeeStore'],
views: [],
controllers: ['MainController'],
launch: function () {
console.log("Launching");
var aList = Ext.create("Ext.List", {
fullscreen: true,
store: 'EmployeeStore',
itemTpl: "{lastName}, {firstName} - {fullName}"
});
Ext.Viewport.add(aList);
}
});
employees.json:
{"items": [
{ "firstName": "John", "lastName": "Lennon" },
{ "firstName": "Paul", "lastName": "McCartney" },
{ "firstName": "George", "lastName": "Harrison" },
{ "firstName": "Ringo", "lastName": "Starr" }
]}
Take autoload off of your store, load the store in your launch function, and use a callback to add your records:
launch: function () {
var empStore = Ext.getStore('EmployeeStore');
empStore.load(function() {
empStore.insert(0, [ /*records to insert*/ ]);
});
}

autocomplete with extjs :ComboBox with REMOTE query store

I want to use ComboBox with REMOTE query ,
I work with extjs 4,
I want to do autocomplete with combobox
meaning when I entered a text in the combobox a request will send to database in order to display a list of emplyees ( in my case ) according to text entered in the combobox
I found some example which use queryMode: 'remote', and hideTrigger:true
this some of link which I found
http://demo.mysamplecode.com/ExtJs/pages/comboBoxes.jsp
currently I have this code which fill out a combo with traditional way
in my emplyeesModel.js I have
Ext.define('GenericComboModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'label', type: 'string'},
{name: 'value', type: 'string'}
]
});
var employeesStore= Ext.create('Ext.data.Store', {
model: 'GenericComboModel'
});
in my emplyeesView.js I have
function fillEmployeesCombo() {
employeesService.getEmployeesList({
callback:function(employeesList){
for(var i=0; i<employeesList.length; i++){
var employeesLabel = employeesList[i].libelleEmployees;
var employeesId = employeesList[i].idEmployees;
employeesStore.add({label: employeesLabel , value: employeesId });
}
}
});
}
var employeesPanel = Ext.create('Ext.panel.Panel', {
title: 'test',
bodyPadding: 5,
width: '100%',
height: '100%',
autoScroll: true,
id: 'tab_Employees',
layout: 'anchor',
defaults: {
anchor: '100%'
},
defaultType: 'textfield',
items:
[
{
xtype: 'container',
layout: {
type: 'hbox'
},
padding: '5 5 5 5',
items:
[
{
xtype: 'combobox',
store: employeesStore,
displayField: 'label',
valueField: 'value',
queryMode: 'local',
fieldLabel: 'test',
editable: false,
id: 'employees_IdCombo'
}
]
},
]
});
in employeesService.java I have
public List<employees> getEmployeesList() {
// TODO Auto-generated method stub
Query query = getSession().createQuery("FROM employees emp ");
List result = query.list();
if(result.size()!=0 && result !=null)
return result;
else
return null;
}
but actually I will change my code in :emplyeesView.js
I will have this kind of code :
xtype: 'combobox',
store: employeesStore,
displayField: 'label',
valueField: 'value',
queryMode: 'remote',
fieldLabel: 'test',
editable: false,
id: 'employees_IdCombo',
hideTrigger:true
also I think in emplyeesModel.js I should add this notion :
proxy: {
type: 'ajax',.......
I think that in order to finish my example I should use a servlet
meaning fo example :
proxy: {
type: 'ajax',
url: 'EmployeesServlet',...
can someone help me to correct my code
I try with this code :
Ext.define('GenericComboModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'label', type: 'string'},
{name: 'value', type: 'string'}
]
});
var employeesStore= Ext.create('Ext.data.Store', {
model: 'GenericComboModel',
proxy: {
type: 'ajax',
url: 'employeesService',
reader: {
type: 'json',
root: 'users'
}
}
});
//Finally your combo looks like this
{
xtype: 'combobox',
store: employeesStore,
displayField: 'label',
valueField: 'value',
queryMode: 'remote',
fieldLabel: 'test',
editable: false,
id: 'employees_IdCombo',
hideTrigger:true
queryParam: 'searchStr' //This will be the argument that is going to be passed to your service which you can use this to return your resulkt set
}
function fillEmployeesComboByParam(String Libelle) {
employeesService.getEmployeesList(Libelle){
callback:function(employeesList){
for(var i=0; i<employeesList.length; i++){
var employeesLabel = employeesList[i].libelleEmployees;
var employeesId = employeesList[i].idEmployees;
employeesStore.add({label: employeesLabel , value: employeesId });
}
}
});
}
in `employeesService.java` I have
public List<employees> getEmployeesList(String libelle) {
// TODO Auto-generated method stub
Query query = getSession().createQuery("FROM employees emp where emp.libelle=:libelle ");
query.setParameter("libelle", libelle);
List result = query.list();
if(result.size()!=0 && result !=null)
return result;
else
return null;
}
juste I want to know want if this url is correct or no
url: 'employeesService,
Below are the changes on the extjs, you have to make your service changes to handle searchStr which is passed as queryParam
//Your model remains the same as you defined
Ext.define('GenericComboModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'label', type: 'string'},
{name: 'value', type: 'string'}
]
});
//Your store will look like
var employeesStore= Ext.create('Ext.data.Store', {
model: 'GenericComboModel',
proxy: {
type: 'ajax',
url: 'Your service URL',
reader: {
type: 'json',
root: 'users'
}
}
});
//Finally your combo looks like this
{
xtype: 'combobox',
store: employeesStore,
displayField: 'label',
valueField: 'value',
queryMode: 'remote',
fieldLabel: 'test',
editable: true,
id: 'employees_IdCombo',
hideTrigger:true
queryParam: 'searchStr' //This will be the argument that is going to be passed to your service which you can use this to return your resulkt set
}

How can I allocate different ID or class to my list item?

First, I apologize for my poor English.
I am trying to build a list where each item has a different ID or class, because I want to control which items are displayed (hidden or visible).
Can anyone help?
I will be grateful!
Ext.define('Contact', {
extend: 'Ext.data.Model',
config: {
fields: ['firstName', 'lastName']
}
});
var store = Ext.create('Ext.data.Store', {
model: 'Contact',
sorters: 'lastName',
data: [
{ firstName: 'Tommy', lastName: 'Maintz' },
{ firstName: 'Rob', lastName: 'Dougan' },
{ firstName: 'Ed', lastName: 'Spencer' },
{ firstName: 'Jamie', lastName: 'Avins' },
{ firstName: 'Aaron', lastName: 'Conran' },
{ firstName: 'Dave', lastName: 'Kaneda' },
{ firstName: 'Jacky', lastName: 'Nguyen' },
{ firstName: 'Abraham', lastName: 'Elias' },
{ firstName: 'Jay', lastName: 'Robinson'},
{ firstName: 'Nigel', lastName: 'White' },
{ firstName: 'Don', lastName: 'Griffin' },
{ firstName: 'Nico', lastName: 'Ferrero' },
{ firstName: 'Nicolas', lastName: 'Belmonte'},
{ firstName: 'Jason', lastName: 'Johnston'}
]
});
Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '<div class="contact custom_class_{firstName}">{firstName} <strong>{lastName}</strong></div>',
store: store
});
by using above code you can add custom css classes to every item in list view, just specify custom_class_{uniqueid of model} for every node and then you can access it using Ext.DomQuery.select('div{class=contact custom_class_{firstName}}'); and then you traverse the DOM to get the parent element which you can use it to hide list item
var div = Ext.DomQuery.select('div{class=contact custom_class_{firstName}}');
var listItem = div.up().up();

Sencha Touch List of a panel

I have a app set up and on my hoe page/screen several links. When I click on a link it will then display a list of items (like a contact list ), then again a detailed view when the list item is clicked on as well.
I have the following set up:
App.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: '<img src="res/img/generic/TT_Small.png" />',
cls: 'homeHeader'
},
],
});
and the view I want as a list is:
App.views.HomeAbout = Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
var store = new Ext.data.JsonStore({
model : 'Contact',
root: 'images',
sorters: 'firstName',
getGroupString : function(record) {
return record.get('firstName')[0];
},
data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'}
]
});
var list = new Ext.List({
fullscreen: true,
itemTpl : '{firstName} {lastName}',
grouped : true,
indexBar: false,
store: store
});
I am using the simple 'contact' eg to start with so once running I will amend my data etc as needed, but when I click on the link to go to this view I get the following
Uncaught Attempting to create a component with an xtype that has not been registered: HomeAbout
But in my controller i have :
about: function()
{
if ( ! this.aboutView)
{
this.aboutView = this.render({
xtype: 'HomeAbout',
});
}.....
Any ideas or help would be appreciated
First change:
App.views.HomeAbout = Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
to
App.models.Contact = Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
Then have this
App.views.HomeAbout = Ext.extend(Ext.List, {
fullscreen: true,
itemTpl : '{firstName} {lastName}',
grouped : true,
indexBar: false,
store: store
});
instead of var list...
and finally reg the new xtype - class that extends default sencha-touch class - like this
Ext.reg('HomeAbout', App.views.HomeAbout);