THe following code is my extjs store. I would like to exclude some particular value from this store.
For example the value such as "option 1", "option 2" would be exclude from the store, or when I retrieve this store and display in the input dropdown field.
How can I do it?
Thank you.
var input1store = new Ext.data.Store({
fields: [{name: 'name'}],
proxy:{
type: 'ajax',
url: 'www.requesturl.com?format=json&source1',
reader: {
type: 'json',
root: 'xml.result'
}
},
autoLoad:false,
sorters: [{property: 'name', direction: 'asc'}]
});
You can use a filter http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Store-method-filter
var input1store = new Ext.data.Store({
fields: [{name: 'name'}],
proxy:{
type: 'ajax',
url: 'www.requesturl.com?format=json&source1',
reader: {
type: 'json',
root: 'xml.result'
}
},
autoLoad:false,
sorters: [{property: 'name', direction: 'asc'}],
listeners: {
load: function() {
this.filter(function(rec){
var val = rec.get('name');
return val != 'option1' && val != 'option2';
});
}
}
});
Related
This is my JSON data returned from the server. I am not seeing my combo getting loaded. What is wrong here?
{"suffixList":["-1","-2","-3"]}
Model:
Ext.define('ExtMVC.model.Suffix', {
extend: 'Ext.data.Model',
fields: [
{name: 'suffix'}
]
});
Store:
Ext.define('ExtMVC.store.Suffixes', {
extend: 'Ext.data.Store',
model: 'ExtMVC.model.Suffix',
autoLoad : false,
proxy: {
type: 'ajax',
url: 'http://'+window.location.host+'/populateCombo',
reader: {
type: 'json',
root: 'suffixList'
}
}
});
View:
{
xtype:'combo',
id: 'suffix',
name: 'suffix',
store : 'Suffixes',
displayField: 'suffix',
valueField: 'suffix'
}
You can use an ArrayStore
new Ext.data.ArrayStore({
fields: ['suffix'],
data: {suffixList: ['-1', '-2', '-3']},
proxy: {
type:'memory', //'ajax'
reader: {
type: 'array',
root: 'suffixList'
}
}
})
The data is not formatted correctly. Each record should be an object, with properties for the store's fields. In your case, the data should look like this:
{"suffixList":[{"suffix": "-1"},{"suffix": "-2"},{"suffix": "-3"}]}
I want to create a generic Extjs store for combo boxes.
The store should be able to:
Take a URL
Read data using a proxy from the server
Should work for any model
How can I achieve this?
This is what I have for start:
Ext.create('Ext.data.Store', {
proxy: {
type: 'ajax',
url: rawURL,
reader: {
type: 'json'
}
}
})
Using ExtJS 4.1
function getGenericStore(storeURL, valField, dispField) {
var modelName = 'Model' + me.id;
var model = Ext.define(modelName, {
extend: 'Ext.data.Model',
fields: [
{name: valField, type: 'string'},
{name: dispField, type: 'string'}
]
});
return Ext.create('Ext.data.Store', {
proxy: {
type: 'ajax',
model: model,
url: storeURL,
reader: {
type: 'json',
read: function(response) {
var json = Ext.decode(response.responseText);
var records = [];
Ext.each(json, function(item) {
var record = Ext.create(modelName);
record.set(val, item[val]);
record.set(display, item[display]);
records.push(record);
});
return {
success: true,
total: json.length,
count: records.length,
loaded: true,
records: records
};
}
}
}
});
}
I want to load store data dynamically and don't want to use model for this. if I provide data list gets populated but if I use store's proxy it doesn't get called and url is not getting hit. Please help.
Ext.define('TrainEnquiry.view.SearchTrainResults', {
extend: 'Ext.List',
xtype: 'searchedtrainresult',
requires: 'Ext.data.proxy.JsonP',
config: {
itemId: 'searchedtrainresult',
title: 'Train Result:',
itemTpl: '<div class="myContent">'+
'<div><b>{number}</b> </div>' +
'</div>',
store: {
fields: ['number'],
/*data: [
{number: 'Cowper'},
{number: 'Everett'},
{number: 'University'},
{number: 'Forest'}
]*/
proxy: {
url: 'http://abc.amazonaws.com/search.json',
type:'jsonp',
extraParams : {
'q' : '12313'
},
reader: {
type: 'json',
},
success: function() {
debugger;
console.log('success');
},
failure: function() {
debugger;
console.log('failure');
}
}
},
onItemDisclosure: true
}
});
I think your "fields" config option needs to be a proper Ext.data.Field object, so maybe this would work:
Ext.define('TrainEnquiry.view.SearchTrainResults', {
...
config: {
...
store: {
fields: [ { name: 'number', type: 'string'} ],
proxy: {
...
}
},
...
}
});
(Reference from Sencha forums)
You could try removing the pageParam and startParam from your proxy. Just like this
Ext.create('Ext.data.Store', {
storeId:'UserStore',
autoLoad: true,
model: 'UserModel',
proxy: {
type: 'jsonp', // Because it's a cross-domain
url : 'https://api.twitter.com/1/lists/members.json?owner_screen_name=Sencha&slug=sencha-team&skip_status=true',
reader: {
type: 'json',
root: 'users' // The returned JSON will have array
// of users under a "users" property
},
// Removing pageParam and startParam
pageParam: undefined,
startParam: undefined
}
});
Here is an example http://jsfiddle.net/alexrom7/YNTuN/
Try changing the type of your proxy store to Ajax (type: 'ajax'). Just like this
Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url: '/test.json',
reader: {
type: 'json',
}
},
autoLoad: true
});
I am using ListFilter plugin to filter results on a Grid panel. The column definition is.
{
header: 'Provider',
filter: {
type: 'list',
store: Ext.getStore('MyApp.store.Provider'),
dataIndex: 'provider_id',
labelField: 'name'
}
}
MyApp.store.Provider is created as
Ext.create('Ext.data.Store', {
storeId: 'MyApp.store.Provider',
autoDestroy: true,
autoLoad: {start: 0, limit: 50},
autoSync: true,
model: 'MyApp.model.Provider',
pageSize: 50,
proxy: {
type: 'ajax',
api: {
create: 'proxy/provider/create',
read: 'proxy/provider/read',
update: 'proxy/provider/update',
destroy: 'proxy/provider/destroy'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success',
messageProperty: 'message',
totalProperty: 'total'
},
writer: {
allowSingle: false,
type: 'json',
writeAllFields: false,
root: 'data'
}
}
});
And lastly model MyApp.model.Provider is defined as
Ext.define('MyApp.model.Provider', {
extend: 'Ext.data.Model',
fields: [
{ name: 'provider_id', type: 'int'},
'name',
{ name: 'create_time', type: 'date', dateFormat: appDateFormat },
{ name: 'status', type: 'int'}
],
idProperty: 'provider_id',
displayProperty: 'name' // A custom property used for dynamically use the property to display
})
Now this code does not show any sub-menu in the filter menu. It just shows loading. See the image.
Update
I have solved it using following filter config. This actually populates options config manually. So no store is used here.
{
type: 'list',
labelField: 'name',
options: (function () {
var opts = [];
fS.load(function (records, operation, success) {
for (var i = 0; i < records.length; i++) {
var ar = {
id: records[i].get('provider_id'),
name: records[i].get('name')
};
opts.push(ar);
}
});
return opts;
})(),
single: true
}
It seems 'id' is hard-coded. id: records[i].get('provider_id'), does not look good. Though it works.
But I am still looking for a proper way to do it.
Note: The expected behavior can be found on ExtJS 4.1.1. See this jsfiddle. I have reproduced it. But this very same thing does not work on ExtJS 4.0.7
I didn't tried this myself but you need to set the ID manually with the idField property [new to ExtJS4.1.3] which is per default set to id. So I guess this will work:
{
header: 'Provider',
filter: {
type: 'list',
idField: 'provider_id',
store: Ext.getStore('MyApp.store.Provider'),
dataIndex: 'provider_id',
labelField: 'name'
}
}
Update
OK, I looked at the source and I can now tell you that this is the answer. So will have to either live with your workarround until 4.2 is out or you can apply the following changes to your Ext.ux.grid.menu.ListMenu to make it run:
add the idField with a default value.
look within the constructor for this lines
case 'object': options.push([value.id, value[this.labelField]]); break;
// some more lines
fields: ['id', this.labelField],
and replace it with
case 'object': options.push([value[me.idField], value[me.labelField]]); break;
// some more lines
fields: [me.idField, me.labelField],
and within the onLoad function look for
itemValue = records[i].get('id');
and replace it with
itemValue = records[i].get(me.idField);
and that pretty much is it.
Using ExtJS4 Store, I want to execute a Javascript function to return json data, ie. getMyJsonData, to load the data into the store.
function getMyJsonData() {
var myjson = {... };
return myjson;
}
Trawling through the doco, I can't find a way to define a callback function to load the data, all I found was a Memory Store which loads an already defined data object.
How can I call a function instead ?
Ext.define('perhoo.store.Users',
{
extend: 'Ext.data.Store',
model: 'perhoo.model.User',
autoLoad: true,
data : {
users: [
{ id: 1, name: 'joe44', email: 'joe#joe.com'},
{ id: 2, name: 'bloggs44', email: 'bloggs#joe.com'}
]
},
proxy: {
type: 'memory',
data: this.data,
reader: {
type : 'json',
root : 'users'
}
}
EDIT
The reason I want to call a function is because I want to execute LinkedIn API.
And going through Ext JSONP Proxy (as it's cross domain) makes things 10x more complicated as I have to get LinkedIn auth etc etc (which I don't know how to do it yet)
i.e.
var mydata = null;
function onLinkedInAuth() {
// Linked in api to find connections
IN.API.Connections("me").result( function(result) {
mydata = result;
} );
}
ExtJS4's store using proxy to load data, check below:
var myStore = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : '/users.json',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true
});
When executed, it reads data from the url, /users.json, and store into itself.
Also, if you want to process data yourself and load them into store yourself, you can check below:
//this is the model we will be using in the store
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'phone', type: 'string', mapping: 'phoneNumber'}
]
});
//this data does not line up to our model fields - the phone field is called phoneNumber
var data = {
users: [
{
id: 1,
name: 'Ed Spencer',
phoneNumber: '555 1234'
},
{
id: 2,
name: 'Abe Elias',
phoneNumber: '666 1234'
}
]
};
//note how we set the 'root' in the reader to match the data structure above
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
model: 'User',
data : data,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'users'
}
}
});
And you could easily usesetProxy to change the behavior when you want.
Links:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.AbstractStore-method-setProxy
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.proxy.Memory