Who knows how to filter the Store right?
I tried to do it in listener of leafItemTap of Nested List, but my leaf items not tapping now. Massage in console: "Uncaught TypeError: Cannot call method 'filter' of undefined "
Here is Nested list, where Store must be filtered:
Ext.define('Application.view.SplitView', {
extend: 'Ext.Container',
xtype: 'splitview',
config: {
layout: 'card',
store: null
},
initialize: function() {
this.nestedList = Ext.create('Ext.NestedList', {
title : 'Рецепты',
detailCard: Ext.create('Application.view.MainDetail'),
store: this.getStore(),
listeners: {
scope: this,
leafitemtap: this.onLeafItemTap
}
});
this.setItems([this.nestedList]);
},
updateStore: function(newStore) {
if (this.nestedList) {
this.nestedList.setStore(newStore);
}
},
onLeafItemTap: function(nestedList, list, index, node, record, e) {
var psn = record.get('text');
console.log(psn);
var detailCard = nestedList.getDetailCard();
var store = Ext.getStore('Application.store.DetailStore');
store.filter('title', 'Brownies');
console.log(store);
}
});
This is my Store, which I want to filter:
Ext.define('Application.store.DetailStore', {
extend: 'Ext.data.Store',
config: {
model: 'Application.model.DetailModel',
autoLoad :true,
sorters: 'title',
grouper : function(record) {
return record.get('title')[0];
},
proxy: {
type: 'ajax',
url : '/data/data1.php',
reader: {
type: 'json',
rootProperty:'recipes'}
}
}
});
And Store's model:
Ext.define('Application.model.DetailModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'title', type: 'string'},
{name: 'serves', type: 'string'},
{name: 'cooktime', type: 'string'},
{name: 'ingridients', type: 'string'},
{name: 'picture', type: 'string'},
{name: 'kitchen', type: 'string'},
{name: 'category', type: 'string'},
{name: 'instructions', type: 'string'}
]
},
fullName: function() {
var d = this.data,
names = [
d.title
];
return names.join(" ");
}
});
I'm new in Sencha and every advice will be useful
The following error means the object which you're calling the filter function on is undefined
"Uncaught TypeError: Cannot call method 'filter' of undefined "
In your case, the store is undefined.
Try to get it by doing :
var store = Ext.getStore('DetailStore');
Also, you could check what stores are in the StoreManager by doing :
console.log(Ext.data.StoreManager.all);
Hope this helps
Related
I have been try trying to make a dynamic carousal in sencha touch 2.1.1 which fetches the images from wordpress json data..
but when i call the load listener in store it gives and error .
I tasted this on another demo sencha app it was working fine there but when i add it here it shows up the error
Uncaught TypeError: Cannot call method 'add' of undefined
I am sharing my view,model,and store files here
Ext.define('Flugelsoft.view.Portfolio', {
extend:'Ext.Container' ,
xtype: 'portfolio',
fullscreen: true,
//store:'Portfolios',
requires: ['Flugelsoft.store.Portfolios', 'Ext.dataview.List', 'Ext.Img','Ext.carousel.Carousel'],
config: {
layout: {
type: 'fit'
},
items: [
{
xtype: "carousel",
id: 'carouselid'
}
]
}
});
store.js file
var token=localStorage.getItem("access_token");
Ext.define("Flugelsoft.store.Portfolios", {
extend: "Ext.data.Store",
requires: ["Ext.data.proxy.JsonP"],
config: {
model: "Flugelsoft.model.Portfolio",
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'http://www.flugelsoft.net/?json=get_category_posts&category_id=2&access_token='+token,
reader: {
type: 'json',
rootProperty: 'posts'
}
},
}
});
var newPanel = Ext.create('Flugelsoft.store.Portfolios', {
listeners:{
load: function( me, records, successful, operation, eOpts ){
console.log("data loaded", records);
myCarousel = Ext.getCmp('carouselid');
for(var i=0; i<records.length; i++){
//THE ERROR IS GENERATING IN THIS LINE myCarousal.add
myCarousel.add({
xtype: 'image',
src: records[i].get('thumbnail')
});
}
}
}
});
Model.js file
Ext.define('Flugelsoft.model.Portfolio',{
extend:'Ext.data.Model',
config:{
fields: [{name: 'title', type: 'string'},{name: 'content', type: 'string'},{name:'thumbnail',type:'image/png'}]
}
});
Thank you in advance
First of all you should add Portfolio view in viewport before you invoke Ext.getCmp('carouselid');
Model
Ext.define('GoodNews.model.Portfolio',{
extend:'Ext.data.Model',
config:{
fields: [{name: 'title', type: 'string'},
{name: 'content', type: 'string'},
{name:'thumbnail',type:'string'}]
//thumbnail should be url for accessing picture from the server
}
});
Store
Ext.define("GoodNews.store.Portfolios", {
extend: "Ext.data.Store",
requires: ["Ext.data.proxy.JsonP"],
config: {
model: "GoodNews.model.Portfolio",
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'http://www.flugelsoft.net/?json=get_category_posts&category_id=2&access_token='+token,
reader: {
type: 'json',
rootProperty: 'posts'
}
},
}
});
Add the portfolio
Ext.Viewport.add({xtype : 'portfolio'});
var newPanel = Ext.create('GoodNews.store.Portfolios', {
listeners:{
load: function( me, records, successful, operation, eOpts ){
console.log("data loaded", records);
myCarousel = Ext.getCmp('carouselid');
for(var i=0; i<records.length; i++){
myCarousel.add({
xtype: 'image',
src: records[i].get('thumbnail')
});
}
}
}
});
There is no image/png field type in sencha touch. following types only valid
auto: Object
boolean: Object
date: Object
float: Object
integer: Object
number: Object
string: Object
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
}
I'm working from an example based on the comments in the Sencha documentation. I am able to extract the top-level information (id,name,last) but I can't figure out how to extract the products from each record. I was hoping that it would be as simple as requesting that part of the record but aProduct is always null:
var name = aRecord.get('name'); // Good
var lastName = aRecord.get('last'); // Good
var aProduct = aRecord.get('products'); // Null
I'm including all the code.
JSON:
[
{
"id": 1,
"name": "Ed",
"last": "Bar",
"products": [
{
"short_name": "Product1",
"name": "Another Product"
},
{
"short_name": "Product2",
"name": "Second Product"
}
]
},
{
"id": 2,
"name": "Foo",
"last": "Bar",
"products": [
{
"short_name": "Product1",
"name": "Another Product"
},
{
"short_name": "Product2",
"name": "Second Product"
}
]
}
]
app.js:
Ext.application({
name: 'SenchaFiddle',
models: ['Product', 'User'],
stores: ['UserStore'],
views: [],
controllers: [],
launch: function () {
Ext.create('Ext.Panel', {
fullscreen: true,
html: 'Test...'
});
var userStore = Ext.getStore('UserStore');
console.log(userStore);
console.log('--- Data ---');
userStore.each(function (val) {
console.log(val.get('name'));
});
console.log('--- Done ---');
userStore.load({
params: {},
scope: this,
callback: function (records, operation, success) {
console.log("status=" + success);
console.log("Number Records=" + records.length);
for (var i = 0; i < records.length; i++) {
var aRecord = records[i];
console.log(aRecord);
var name = aRecord.get('name');
var lastName = aRecord.get('last');
var productList = aRecord.get('products');
console.log('(Short, First, Last)=(' + productList + ',' + name + ',' + lastName + ')');
for (var j=0; j<productList.length; j++) {
console.log(productList[j].name + " / " + productList[j].short_name);
}
}
}
});
}
});
User Model:
Ext.define('SenchaFiddle.model.User', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'last', type: 'string'}
],
// we can use the hasMany shortcut on the model to create a hasMany association
hasMany: {model: 'Product', name: 'products', "associationKey": 'products'}
}
});
Product Model:
Ext.define('SenchaFiddle.model.Product', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'id', type: 'int'},
{name: 'user_id', type: 'int'},
{name: 'short_name', type: 'string'},
{name: 'name', type: 'string'}
]
}
});
User Store:
Ext.define('SenchaFiddle.store.UserStore', {
extend: 'Ext.data.Store',
config: {
model: 'SenchaFiddle.model.User',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'users.json',
reader: {
type: 'json'
//rootProperty: 'users'
}
}
},
load: function () {
this.callParent(arguments);
console.log("User Store Loaded\n");
}
});
Nice work, you are very close!
Add a products field to your user model:
fields: ['products',
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'last', type: 'string'}
]
Stick w/Sencha, the whole package can be a little overwhelming and admittedly confusing (even after a couple years of use) but it definitely get better.
Brad
I am trying to get some master data from server in JSON format and bind it to selectfield with the help of Store.
Find my code below
Model
Ext.define('Mobile.model.OrganizationModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'Name', type: 'string' },
{ name: 'Id', type: 'int' }
]
}
});
Store
Ext.define('Mobile.store.OrganizationStore', {
extend: 'Ext.data.Store',
model: 'Mobile.model.OrganizationModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'login/GetOrgList',
method: 'GET',
reader: {
type: 'json'
}
}
});
View
Ext.define("Mobile.view.LoginView", {
extend: "Ext.form.FormPanel",
alias: "widget.login",
id: 'loginFormPanel',
config: {
margin: '0 auto',
name: 'loginform',
frame: true,
url: 'login/Authenticate',
title: 'something',
items: [
{
xtype: 'fieldset',
itemId: 'LoginFieldset',
margin: '10 auto 0 auto ',
title: '',
items: [
{
xtype: 'selectfield',
label: 'Organization',
name: 'Organization',
store: 'OrganizationStore',
displayField: 'Name',
valueField: 'Id',
placeHolder: 'Select a Value'
}
]
},
]
}
});
APP.js
Ext.application({
name: "Mobile",
controllers: ["LoginController"],
views: ['LoginView', 'HomeView'],
models: ['UserModel', 'OrganizationModel'],
stores: ['OrganizationStore'],
launch: function () {
var loginPanel = Ext.create('Ext.Panel', {
layout: 'fit',
items: [
{
xtype: 'login'
}
]
});
Ext.Viewport.add(loginPanel);
}
});
JSON Data format is
[{"Id":1,"Name":"Company 1"},{"Id":2,"Name":"Company 2"},{"Id":3,"Name":"Company 3"}]
The problem is it is not sending request to server and loading JSON data and binds. Any idea about this issue?
update you store code to
Ext.define('Mobile.store.OrganizationStore', {
extend: 'Ext.data.Store',
config:{
model: 'Mobile.model.OrganizationModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'login/GetOrgList',
method: 'GET',
reader: {
type: 'json'
}
}
}
});
I want to make a simple request like Ext.Ajax.request and display it in a list. But it does not work.
I have a URL like this
http://server/GetContacts.aspx?CustAccount=10019
Can someone tell me exactly how it works and what I should consider?
This is an example of what I get back.
{
"HasError": false,
"ErrorString": "",
"Data": [
{"ContactPersonId":"","Name":"","FirstName":"","MiddleName":"","LastName":"","Phone":"","CellularPhone":"","Telefax":"","Email":"","Url":"","Address":"","ZipCode":"","City":"","Street":"","Country":"","Function":""}
]
}
Ext.regModel('kunden', {
idProperty: 'id',
fields: [
{ name: 'ContactPersonId', type: 'string' },
.
.
.
{ name: 'Function', type: 'string' }
]
});
Ext.regStore('kundenStore', {
model: 'kunden',
sorters: [{
property: 'LastName'
}],
proxy: {
type: 'ajax',
url: 'http://server/GetContacts.aspx?CustAccount=10019'
},
reader: {
type: 'json',
root: 'Data'
}
});
NotesApp.views.kundenList = new Ext.List({
id: 'kundenList',
store: 'kundenStore',
grouped: true,
indexBar : true,
itemTpl: '<div class="list-item-title">{firstname} {lastname}</div>' +'<div class="list-item-narrative">{email}</div>',
listeners: {}
}
});
It can be so easily XP