I have a simple grid, which looks like so:
{
xtype: "grid",
columns: [{
header: 'Title', flex: 1, dataIndex: 'Title'
}],
store: Ext.create('Ext.data.Store', {
fields:['id', 'Title']
})
}
And I have a function (attached to a button) which, I believe, should populate this grid with some data. It does it like so:
grid.store.removeAll();
records = [{"id":"1", "Title", "Hello world"}];
grid.store.add(records);
grid.store.load();
console.log(grid.store.getCount());
But for some insane reason, the store is empty and grid.store.getCount() echoes "0". What the heck is going on? PS. I'm using ExtJS 6.
EDIT
If however I slightly change my code to this:
...
store: Ext.create('Ext.data.Store', {
autoLoad: false,
fields:['id','Title'],
data:[{"id": 1,"Title": "Hello world"}]
})
...
//and in function just one line of code:
grid.store.load();
then it starts working. So, it seems like the whole problem is with store.add. It does not do what it should.
Just remove grid.store.load().
The load marks the store as needing a load, but if your adding records using add that is not what you need.
Working example: https://fiddle.sencha.com/#fiddle/1fbv
Related
Im using the modern toolkit with extjs 6.5.1.
I want to use the renderer property in a grid cell to use html. The renderer simply returns '<a>...</a>' but when I use this it will encode the html code so that the cell shows '<a>...</a>' instead of a link.
Regarding to the answers on this thread I will need a cell property with "encodeHtml" turned to false but as soon as I add a cell property the renderer wont get executed anymore (Even when I use EncodeHtml) and shows the data like there was no renderer property.
Why cant I use the renderer property anymore?
Heres my code:
{
xtype: 'gridcolumn',
renderer: function(value, record, dataIndex, cell, column) {
console.log('hello world');
return '<a>...</a>';
},
width: 30,
text: '...',
cell: {
xtype: 'textcell',
encodeHtml: false
}
}
What it looks like without encodeHtml
This behavior is because you specify
cell: {
xtype: 'textcell'
}
in the first place. Just remove it, and your renderer can return HTML. This should work:
{
xtype: 'gridcolumn',
renderer: function(value, record, dataIndex, cell, column) {
console.log('hello world');
return '<a>...</a>';
},
width: 30,
text: '...'
}
At least id does in my application, where I use renderers returning html to generate special formatting.
If you need to specify the cell property, because of something you didn't show in your code, use the default cell xtype instead: gridcell.
I have written a simple program to fetch data from an external JSON file and display it in Dojo Gridx. However, it is not working.
Dojo Code:
require(["dojo/text!json_to_gridx/js/data.json", "dojo/json", "gridx/Grid"], function(myJSONData, JSON, Gridx) {
// fetch and parse JSON
var myJSON = JSON.parse(myJSONData);
console.log(myJSON); // working fine
// create datastore
var store = myJSON; // should this be changed?
// create Gridx
if(!window.grid){
console.log('working'); // working fine
gridx = new Gridx({
id: 'grid',
store: store,
structure: [
{id: 'name', field: 'name', name: 'Name'},
{id: 'company', field: 'company', name: 'Company'}
]
});
console.log('working2'); // does not work
gridx.placeAt('gridContainer');
gridx.startup();
}
});
JSON:
[{"name": "Rahul Desai","company": "PSL"},{"name": "Alston","company": "PSL"}]
I am getting an error:
TypeError: cacheClass is not a constructor Model.js
How do I fix this? Please help!
EDIT: I was being suggested to use Memory Store and "gridx/core/model/cache/Async"
Now, the code for creating the Gridx looks like:
this._disksGrid = new Gridx({
id: 'grid',
cacheClass: asyncCache,
store: store,
structure: [
{id: 'name', field: 'name', name: 'Name'},
{id: 'company', field: 'company', name: 'Company'}
]
});
No error now, but the Gridx is not displayed. Any idea why?
EDIT 2: Turns out I was starting wrong grid in previous edit. Now the Gridx shows up but the second value is repeated and the first value does now show up.
Name Company
Alston PSL
Alston PSL
I made the changes mentioned in EDIT and EDIT 2 and also added unique IDs to every row of JSON and validated it correctly. That solved the problem.
I have a grid.panel on the side with table names and I'd like to show the table(or it's structure) when the user clicks on it, in another grid.panel inside a tab view.
what i did:
in the actionlistener
var store = Ext.data.StoreManager.lookup('Tables');
currentTable = store.findRecord('name',record.get('name'));
var structureView = Ext.ComponentQuery.query('structure')[0];
structureView.showTable(currentTable);
in the view
showTable: function(table) {
this.storeObj.getProxy().url = '/tables/stucture/' + table.data.name;
this.storeObj.load();
this.update();
}
In the Tables store I have table descriptors, with some basic data like name, etc. and the list with table names displays the content of this store. So I look up the Tables store and get the tabledescriptor and pass it to the view, which then loads the store('Columns' in this case) with the data it will display. And all this works fine until I switch tabs. After changing the active tab and then changing back data is not refreshed on clicking on another table's name and I get this: Uncaught TypeError: Cannot call method 'removeChild' of null. It seems that it can't load the store anymore after changing the active tab. I found this issue on forums but I couldn't find a solution for it.
Do you have any ideas?
Thanks for your time.
Edit:
Ext.define('App.view.Table.Structure', {
extend: 'Ext.grid.Panel',
alias: 'widget.structure',
store: 'Columns',
width: 800,
storeObj: undefined,
initComponent: function () {
this.columns = [{
header: 'Column name',
dataIndex: 'name',
flex: 1
}, {
header: 'Position',
dataIndex: 'position',
flex: 1
}, {
header: 'Default value',
dataIndex: 'defaultValue',
flex: 1
}, {
header: 'Column type',
dataIndex: 'type',
flex: 1
}, ];
this.storeObj = Ext.StoreManager.lookup('Columns');
this.callParent(arguments);
}
Well I managed to solve it at last, but I don't really understand why this solved the problem. So this is what I did:
Every time I needed to update the Columns store(or the others) I looked it up
instead of just looking it up in the initcomponent.
Instead of calling update() method I called reconfigure()
Now it works like charm, but I don't see why update didn't do the trick and why I had to look up the store every time I wanted to call load() on it... So if someone could explain it I would be thankful.
UPDATE:
here is my reader/store - not sure what to add to the reader to make this work
Ext.define('YT.store.Videos', {
extend: 'Ext.data.Store',
model: 'YT.model.Video',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'https://gdata.youtube.com/feeds/api/videos',
reader: {
type: 'json',
root: 'feed',
record: 'entry',
successProperty: 'success'
},
listeners: {
exception: function(store, response, app){
console.log('exception...');
console.log(response);
}
}
}
});
Here is my model:
Ext.define('YT.model.Video', {
extend: 'Ext.data.Model',
autoLoad: true,
fields: [
'title',
'published',
'content'
]
});
Here is a sample response:
{
version: '1.0',
encoding: 'UTF-8',
feed: {
junk: 'blahblahblahblah',
entry: [
title: {
$t: 'title'
},
content: {
encoding: 'flash/application',
src: 'http://youtube.com/watch?q=someCatVideo'
},
published: {
$t: '12-28-2012'
}
]
}
}
I'm not sure how to reconcile the two.
I've tried...
Ext.define('YT.model.Video', {
extend: 'Ext.data.Model',
autoLoad: true,
fields: [
{name: 'title', mapping: 'title.$t'},
{name: 'published', mapping: 'published.$t'},
{name: 'content', mapping: 'content.src'}
]
});
Bonus:
Definitely looking for tips on how to debug the implementation of these techniques, I'm rather new to JavaScript MVC.
You are on the right track with mapping, but you also need to define a reader where you specify where your records are in the JSON you get back - see official docs for good examples.
Incidentally, who thought $t was a good idea for a map key?
EDIT:
After your edits here is your working code:
http://jsfiddle.net/dbrin/mSJg3/
As far as debugging: the key for your issue was to clearly see the payload from the service (I used FireBug to inspect JSON object returned). Then mapping your Model class to fit the JSON object through mapping attribute and finally adjust JSON reader to let it know how to navigate your JSON payload (see my code example).
Once your exception listeners are not firing anymore (see code example for those again) that means you got your data into the store. To actually see the data I used Illuminations firebug plugin to inspect the data store. I saw only one record. What the heck? I observed id Property being set to some funky URL. This was happening by default as i did not specify an id attribute on the model. I resorted to spacifying idProperty to undefined to get around this funky behavior (see model code).
I used jsfiddle to quickly iterate through changes and running to see errors in the reader. Once I had no more errors I had jsfiddle show me the app I just build in such a way that I could use Illuminations plugin by using the show/light url: http://jsfiddle.net/dbrin/mSJg3/show/light/
I'm writing a simple application storing and displaying timestamped messages. Messages are JSON objects containing, say 2 main fields like:
{
"emitted": "2011-12-08 12:00:00",
"message": "This is message #666"
}
I have a model to describe these messages:
Ext.define('Message', {
extend: 'Ext.data.Model',
fields: [
{ name: 'emitted', type: 'date' },
{ name: 'message', type: 'string' }
]
});
I have no problem displaying these messages in a grid. However, i would now like to display these messages in a chart. For instance, I would be able to grab numbers (like the #666 in the above example) and display a line chart.
Ideally, i don't want to create a new store for the chart, i would like to reuse the same message store, but apply a filter on the fields to grab the proper value. I don't know, something that might look like:
var chart = {
xtype: 'chart',
...
series: [{
type: 'line',
axis: ['left', 'bottom'],
xField: 'emitted',
yField: {fieldName:'message', fieldGrabber: function(v) {
new RegExp("This is message #(\d+)$", "g").exec(v)[1]
}}
}]
};
Does this kind of thing is possible in ExtJS ?
I just tried to explain what I'm trying to do, i have no idea where to find such a feature: in the chart class, in the store class, or using a kind pf proxy to the store.
Side note:
I cannot ask the data to be properly formatted to the server. The messages I receive are not backed up anywhere, they are just live events streamed to the client via socketIO.
Any advices greatly appreciated!
You should extract the value inside you model to a separate field:
Ext.define('Message', {
extend: 'Ext.data.Model',
fields: [
{ name: 'emitted', type: 'date' },
{ name: 'message', type: 'string' },
{ name: 'nr', convert: function(v, r){
return r.get('message').replace(/^.*#/, '');
} }
]
});
Or you might be better off just having the 'nr' field and using a renderer in Grid that displays it as "This is message #{nr}".
Then you can use the 'nr' field directly in you chart.
I switched to Highcharts and threw ExtJS out to the trash :P