I'm trying to connect Gridx grid to JsonStore. The code and data is bellow. The problem is that Gridx is rendered correctly but it says: No items to display. Anybody know what I'm doing wrong? Dojo and Gridx are the latest versions installed with cpm.
edit: there is no ajax requet to /test/ in the Firebug/Chrom development tools
structure: [
{ field: 'id', name: 'Id' },
{ field: 'title', name: 'Title' },
{ field: 'artist', name: 'Artist' }
],
store: new JsonRestStore({
idAttribute: 'id',
target: '/test/'
}),
Data returned by /test is like this:
{
identifier: "id",
label: "title",
items: [
{
id: 1,
title: "Title 1",
artist: "Artist 1"
},
{
id: 2,
title: "Title 2",
artist: "Artist 2"
},
...
}
Grid is created with:
this.grid = new Grid({
structure: structure,
store: store,
modules: [
Pagination,
PaginationBar,
//Focus,
SingleSort,
ToolBar
],
//paginationInitialPage: 3,
paginationBarSizes: [10, 25, 50, 100],
paginationBarVisibleSteppers: 5,
paginationBarPosition: 'bottom'
}, this.gridNode);
have you specified which cache to use? In your case it should be an Async cache.
require([
'gridx/core/model/cache/Async',
.....
], function(Cache, ...){
this.grid = new Grid({
cacheClass: Cache,
......
});
I've found that this happens when the server doesn't return the Content-Range header in the response. Apparently the store isn't smart enough to just count the items in the returned array...
Related
We currently have a dgrid with a single column and rows like this:
Recently I added some code so that we can delete rows with the little X button that appears above the row when we hover them.
The handler calls this to delete the row:
this.grid.store.remove(rowId);
When we delete a row, since it's instantaneous and each row contains similar text, it's not always obvious to the user that something just happened.
I was wondering if it would be possible add some sort of dojo or css animation to the row deletion, like the deleted row fading or sliding out. This would make the row deletion more obvious.
Thanks
I have created a jsfiddle for animating(wipeOut) a selected row.
require({
packages: [
{
name: 'dgrid',
location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
},
{
name: 'xstyle',
location: '//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
},
{
name: 'put-selector',
location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
}
]
}, [
'dojo/_base/declare',
'dgrid/OnDemandGrid',
'dgrid/Selection',
'dojo/store/Memory',
"dojo/fx",
'dojo/domReady!'
], function(declare, Grid, Selection, Memory,fx) {
var data = [
{ id: 1, name: 'Peter', age:24 },
{ id: 2, name: 'Paul', age: 30 },
{ id: 3, name: 'Mary', age:46 }
];
var store = new Memory({ data: data });
var options = {
columns: [
/*{ field: 'id', label: 'ID' },*/
{ field: 'name', label: 'Name' },
{ field: 'age', label: 'Age' }
],
store: store
};
var CustomGrid = declare([ Grid, Selection ]);
var grid = new CustomGrid(options, 'gridcontainer');
grid.on('dgrid-select', function (event) {
// Report the item from the selected row to the console.
console.log('Row selected: ', event.rows[0].data);
//WipeOut animation for selected row.
fx.wipeOut({ node: event.rows[0].element }).play();
});
});
What would be the best practice or design approach for the following scenario:
There is a json been returned from the server that has information about people and their addresses
I need to show a form with the general information of the person plus a list with every address.
In this list it is mandatory that each address is an item of the list because it will be multiselect true in order to do something else.
What I have done is:
a)define a model "Persona" with a hasMany relation to "Direccion"(spanish for address), my proxy is here in the model
b)define a model "Direccion"
c)define a list and try to play with the itemTpl config in order to display 1 address per itemList but so far I can only display all the addresses for a given person in the same itemList.
Is there a way to achieve this ?
Is this approach good given this scenario?
I was trying to do only 1 request and have only 1 store to fill out this 2 components but now I'm having doubts about it.
So what would be the best design/practice given this scenario?
JSON response
{
"personas": [
{
"id": 1,
"nombre": "jon",
"apellido": "caballero",
"direcciones": [
{
"direccionId": 1,
"calle": "fco villa",
"colonia": "barona"
},
{
"direccionId": 2,
"calle": "duraznos",
"colonia": "canutillo"
}
]
}
]
}
Models
Ext.define('Associations.model.Direccion', {
extend: 'Ext.data.Model',
config: {
idProperty: 'direccionId',
fields: [
{ name: 'calle', type: 'auto' },
{ name: 'colonia', type: 'auto' }
]
}
});
Ext.define('Associations.model.Persona', {
extend: 'Ext.data.Model',
requires: ['Associations.model.Direccion'],
config: {
fields: [
{ name: 'nombre', type: 'auto' },
{ name: 'apellido', type: 'auto' },
],
hasMany:[
{
foreignKey: 'direccionId',
associationKey: 'direcciones',
name: 'direcciones',
model: 'Associations.model.Direccion'
}
],
proxy: {
type:'ajax',
url: 'data/respuesta.json',
reader: {
type:'json',
rootProperty:'personas'
}
}
}
});
Store
Ext.define('Associations.store.Persona', {
extend: 'Ext.data.Store',
requires: [
'Associations.model.Persona'
],
config: {
model: 'Associations.model.Persona',
autoLoad: true
}
});
List
Ext.define('Associations.view.PersonaList', {
extend: 'Ext.List',
xtype: 'personalist',
config: {
onItemDisclosure: true,
emptyText: 'No se encontraron personas',
store: 'Persona',
padding: 10,
margin: 10,
itemTpl : [
'<tpl for="direcciones">',
'<li>Colonia {colonia}</li>',
'<li>Calle {calle}</li>',
'</tpl>',
].join('')
}
});
Any ideas?
Thanks in advance.
When you do model.load() and the model has a hasMany relation to another model a store for the child objects is autogenerated therefore the best approach would be to load the model get the store of the child records and set it to the list.
I've noticed a problem with ST2 and selectfield pickers. I'm testing this on Desktop browser and tablet and both seem to show the same problem.
The problem seems to stem from having form data that is empty or uninitialised.
My example is a user logs into their account and needs to set their marital status. As this has never been set before the backing store model is actually 'null' for their marital status. When they click the picker, the pick for some reason picks the first item in the checklist automatically. This is evident by the check-mark on the right side of the item. The 2nd side-effect of this is, if you then select the first item, ST2 doesn't see this as an item change and so doesn't then propagate the selection change back to the form.
Is this is a bug? How do I get round this problem?
Ext.define('Gender', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'Id', type: 'int'},
{name: 'ItemName', type: 'string'}
]
}
});
Ext.define('Details', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'Gender', type: 'int'}
]
}
});
var myGenderStore = Ext.create('Ext.data.Store', {
model: 'Gender',
data : [
{Id: 1, ItemName: 'Male'},
{Id: 2, ItemName: 'Female'}
]
});
var myDetailsStore = Ext.create('Ext.data.Store', {
model: 'Details',
data : [
{ Gender: null }
]
});
var p = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Select',
items: [
{
xtype: 'selectfield',
label: 'Choose one',
displayField: 'ItemName',
valueField: 'Id',
store: myGenderStore,
name: 'Gender'
}
]
}
]
});
p.setRecord(myDetailsStore.getAt(0))
Ext.Viewport.setActiveItem(p);
// notice the picker has 'Male' selected even though the backing store for the Gender field is null
// also, we want to select Male from the list, but this isn't reflected on the form
// run below command in console window after selecting 'Male' even though it is selected and it shows null
// It only seems to like changes to the value as selecting female works. If then select Male from Female this also works.
p.getValues().Gender;
you can set value for the select field
p.down('selectfield[name=Gender]').setValue(myGenderStore.getAt(0).get('Id'))
see example: http://www.senchafiddle.com/#OuCtQ#GQJ2C
thanks
Just set the autoSelect config property to false,to prevent default selection like this:
{
xtype: 'selectfield',
label: 'Choose one',
displayField: 'ItemName',
valueField: 'Id',
store: myGenderStore,
name: 'Gender',
autoSelect:false
}
I have a Blog model with hasMany Posts (and many other fields). Now I want to list these posts in a List-view like that:
[My post #1]
[My post #2]
[My post #3]
As far as the API described, I'm able to pass either a store or a data attribute to Ext.dataview.List. But I was not able to find out how to pass the hasMany records to the list so it will display an item for each of them.
Do I really have to create another store? Isn't it possible to configure my dataview to something like store: 'Blog.posts' or data: 'Blog.posts' or even records: 'Blog.posts'?
Extend the dataview.List to define the itemtpl to loop through the posts
itemTpl: new Ext.XTemplate(
'<tpl for="**posts**" >',
'<div>{TheBlogPost}</div>',
'</tpl>'
)
As #Adam Marshall said, this doesn't work as easy as I imagined.
Sencha autogenerates stores from associations if you know how to access them.
So you simply can switch out the list's store for the autogenerated "substore" when it has loaded.
This approach probably has some problems, e.g. when listpaging plugin is used, but it is quick.
Example:
MODELS
Ext.define('Conversation', {
extend: 'Ext.data.Model',
config: {
fields: [
],
associations:
[
{
type: 'hasMany',
model: "Message",
name: "messages",
associationKey: 'messages'
}
]
}
});
Ext.define('Message' ,
{
extend: "Ext.data.Model",
config: {
idProperty: 'id_message',
fields: [
{ name: 'text', type: 'string' },
{ name: 'date', type: 'string' },
{ name: 'id_message', type: 'int' },
{ name: 'me', type: 'int'} // actually boolean
]
}
}
);
JSON
[
{
"messages": [
{"id_message": 11761, "date": 1378033041, "me": 1, "text": "iiii"},
{"id_message": 11762, "date": 1378044866, "me": 1, "text": "hallo"}
]}
]
CONTROLLER
this.getList().getStore().load(
{
callback: function(records, operation, success) {
//IMPORTANT LINE HERE:
getList().setStore(Ext.getStore(me.getList().baseStore).getAt(0).messages());
},
scope: this
}
);
LIST-VIEW
{
flex: 1,
xtype: 'list',
itemId: 'ConversationList',
data: [],
store: 'ConversationStore',
baseStore: 'ConversationStore',
itemTpl:
' {[app.util.Helpers.DateFromTimestamp(values.date)]}<br><b>{name}</b>' +
' {[app.util.Helpers.fixResidualHtml(values.text)]} </div>' +
},
I am using a grid panel in which I need to make a column as a link(It should look like link-with no action). I am using listener in the gridpanel and on click of a cell its working fine. Only thing is 1st column should look like a link. But how to put href="#" I am not sure. This is my code:
var addressDetailsStore = Ext.create('Ext.data.Store', {
id:'addressDetailsStore',
autoLoad: true,
fields:
[
'addressType',
'street1',
'street2',
'province',
'city',
'country'
],
proxy: {
type: 'ajax',
url: 'resources/json/addressDetails.json', // url that will load data with respect to start and limit params
reader: {
type: 'json',
root: 'items',
}
}
});
Ext.define('iOMS.view.common.addressView', {
extend: 'Ext.grid.Panel',
alias: 'widget.AddressViewPanel',
layout: 'fit',
collapsible: true,
title:'Address',
store: addressDetailsStore,
listeners:{
cellclick:function (iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent){
// Getting the event and I am doing logic here..
}
I just want 'addressType' columns appear like a link and I dont know where to put href...
Thanks for your responses.
-Praveen
You could also use a template column:
columns: [
{ text: 'External Link', xtype: 'templatecolumn', tpl: '{title}'}
]
You can specify the columns you want, and for the column with just a link, add a renderer. This example might help you.
var template = new Ext.XTemplate(
' ').compile();
columns:[
{
header: "",
renderer: function () {
return template.applyTemplate();
}
},
You can use renderer function like as follow
columns: [
{
header: 'number',
dataIndex: 'number',
flex: 1,
renderer: function(number) {
return Ext.String.format('{0}', number);
}
},