I am new to Ext JS and trying various options on Grid. I have created a grid and added it to panel(Ext.panel.Panel). The grid is getting displayed with empty data(I have not added proxy to it). On occurrence of some event I construct a JSON Object and trigger loadData on grid.
Following is my code snippet.
Ext.define('AM.view.grid.Details', {
extend: 'Ext.grid.Panel',
alias: 'widget.details',
title: 'Widget Data',
store: {
autolaod: true,
fields: [{
name: 'widgetid',
mapping: 'widget_id',
type: 'string'
}, {
name: 'widgetname',
mapping: 'widget_name',
type: 'string'
}, {
name: 'widgetnotes',
mapping: 'widget_notes',
type: 'String'
}],
reader: {
type: 'json'
}
},
width: 620,
height: 400,
forceFit: true,
columns: [{
header: 'id',
dataIndex: 'widgetid',
hidden: true
}, {
header: 'Name',
dataIndex: 'widgetname',
width: 150
}, {
header: 'Note',
dataIndex: 'widgetnotes',
width: 150
}],
renderTo: Ext.getBody()
});
I have a function which is a callback function of another widget. When an event occurs this function getTriggered.
function someFunction(grid) {
var jsonData = formGridData();
grid.store.loadData(jsonData);
}
Please assume that grid is created and I have function formGridData() which converts the formed String to JSON Object and returns.
So when I run the app, If the jsonData is of length 5 then 5 empty rows appear in the grid.
Following is the JSONData
[{
'widget_id': 'widget-1',
'widget_name': 'gridpanel',
'widget_notes': 'This is used to handle..'
}, {
'widget_id': 'widget-2',
'widget_name': 'combo',
'widget_note': 'This is used to handle..'
}, {
'widget_id': 'widget-3',
'widget_name': 'panel',
'widget_note': 'This is used to handle..'
}]
Is there anything wrong in what I am doing?
Thanks,
Phani
Your dataIndexes on the grid are wrong.
columns: [{
header: 'id',
dataIndex: 'widget_id', //was widgetid
hidden: true
}, {
header: 'Name',
dataIndex: 'widget_name', //was widgetname
width: 150
}, {
header: 'Note',
dataIndex: 'widget_notes', //was widgetnotes
width: 150
}]
What is happening is it is seeing the right amount of rows, but since the json you have as an example is named widget_* and note widget*, it thinks they are something else, and thus can not show them in the grid as appropriate
Sorry i didn't noticed that
So it seems your dataIndex is invalid
http://jsfiddle.net/ssxenon01/WpZMU/8/
Related
I have a view in ExtJS that contains a grid where the user can select an entry plus some panel with details about the currently selected row. Each time another row is selected the view is reloaded, which causes the grid to loose input focus for keyboard navigation.
How can I reload grid store data and keep input focus on the grid? My model defines idProperty and thus the correct row gets selected, but column selection and input focus gets lost. I am using ExtJS v7.3.0.55 with the Classic Triton theme.
Example
Extend the code in the existing Grid with JSON Store Sencha Fiddle with a data model and some grid event listener to reproduce the issue:
Ext.application({
name: 'Fiddle',
launch: function () {
// My data model with custom ID field
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'email', type: 'string'},
{name: 'phone', type: 'string'},
],
idProperty: 'email',
});
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
model: 'User',
proxy: {
type: 'ajax',
// Loading data from ./simpsons.json in the fiddle ./Data folder.
url: 'simpsons.json',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
height: 300,
width: "100%",
title: 'Simpsons',
store: 'simpsonsStore',
autoLoad: true,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
// Add some event handler to reload grid data, restore selected row
listeners: {
select: function (sender) {
console.log('grid selection update');
var record = sender.getSelected();
var store = sender.getStore();
store.load();
// This will restore the selected row, but grid focus is lost
sender.setSelected(record);
}
}
});
}
});
Try to put the selection in the store`s load handler:
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
height: 300,
width: "100%",
title: 'Simpsons',
// Using Named Store
store: 'simpsonsStore',
// Load the data
autoLoad: true,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
listeners: {
select: function (selectionRowModel, selectedRecord, selectedIndex) {
var store = selectionRowModel.getStore();
store.on('load', function(store) {
selectionRowModel.select(selectedIndex, true, true);
}, this, {
single: true
})
store.load();
}
}
});
The empty text in Ext 4.2 seems to not be displaying for Ext.grid.Panel
I can demonstrate by using the javascript editor here: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.Panel
Just delete the data config for the store, and then add the emptyText config for the panel on the first example. It should look like this:
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
//No data here
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
emptyText: 'Test Empty Text', //Add emptyText
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Note that the text will show up, once you click on Name, Email, or Phone - once the grid gets sorted.
Is this an Ext bug? How can I work around this to get emptyText to show up without having to sort the panel first?
No it's a feature. The point is to not show the empty text while the grid is loading data because it is not yet known whether there is data or not.
The feature is not needed when the data is all local though, so just add the following to the grid config:
viewConfig: {
deferEmptyText: false
}
I have a grid panel and its code is:
{
xtype: 'gridpanel',
x: 10,
y: 10,
autoScroll : true,
// height: 300,
width: 300,
title: 'Grid Panel',
store: 'peopleStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'gender',
text: 'Gender'
},
{
xtype: 'numbercolumn',
dataIndex: 'age',
text: 'Age'
}
]
}
My store structure is :
Ext.define('ThemeApp.store.peopleStore', {
extend: 'Ext.data.Store',
model: 'ThemeApp.model.peopleModel',
storeId: 'peopleStore',
proxy: {
type: 'localstorage',
id: 'PeopleInfo'
}
});
I have a add row button. But only 25 rows are displayed and remaining rows goes behind these 25 rows. Does anyone knows about this problem?
When my app had a similar issue, I fixed it by setting the proxy's limitParam to the empty string, "", which is what the docs recommend if you don't want to send a limit parameter.
It could also be a result of the store's pageSize.
I have based this off of the Sencha example; however, instead of using a url to fill the store, I have tried to create an empty one and add an item to it. When I load the page, the item is successfully shown in the panel; however, I receive an error saying
Line: 18
Error: Unable to get value of the property 'dataSource': object is null or undefined
My model looks like this:
Ext.define('Ext.model.Test', {
extend: 'Ext.data.Model',
fields: [
{ name: 'testName', type: 'string' },
{ name: 'hasTestPassed', type: 'bool' },
{ name: 'hasFix', type: 'bool' }
]
});
My code looks like this:
Ext.define('Ext.app.ServerChecker', {
extend: 'Ext.grid.Panel',
requires: [
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.form.*',
'Ext.model.Test'
],
alias: 'widget.ServerChecker',
xtype: 'cell-editing',
initComponent: function () {
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
});
Ext.apply(this, {
width: this.width,
store: new Ext.data.Store({
// destroy the store if the grid is destroyed
autoDestroy: true,
model: Ext.model.Test,
proxy: {
type: 'memory',
reader: {
type: 'json',
record: 'test'
}
},
sorters: [{
property: 'common',
direction: 'ASC'
}]
}),
columns: [{
header: 'Test Name',
dataIndex: 'testName',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Result',
dataIndex: 'hasTestPassed',
width: '75px',
align: 'right',
editor: {
allowBlank: false
}
}, {
xtype: 'actioncolumn',
width: 30,
sortable: false,
menuDisabled: true,
items: [{
icon: 'resources/images/icons/fam/delete.gif',
tooltip: 'Delete Plant',
scope: this,
handler: this.onRemoveClick
}]
}],
selModel: {
selType: 'cellmodel'
},
tbar: [{
text: 'Run Tests',
scope: this,
handler: this.onRunTestsClick
}]
});
this.callParent();
this.on('afterlayout', this.loadStore, this, {
delay: 1,
single: true
})
},
loadStore: function () {
this.getStore().load({
// store loading is asynchronous, use a load listener or callback to handle results
callback: this.onStoreLoad
});
},
onStoreLoad: function () {
var rec = new Ext.model.Test({
testName: 'Yipiee',
hasTestPassed: true,
hasFix: true
});
this.getStore().insert(0, rec);
this.cellEditing.startEditByPosition({
row: 0,
column: 0
});
},
onRemoveClick: function (grid, rowIndex) {
this.getStore().removeAt(rowIndex);
}
})
Any help would be greatly appreciated. I realize that I am loading data in kind of a strange spot; however, this is for testing purposes and it would appear that it should work just fine.
Thanks in advance.
You are defining the store with a memory proxy, which is expecting the store to have a data property when loading. So, when you do this.getStore().load(..) you get an error. You actually add data to the store in the load callback, usually the callback is used to do something after the store was actually loaded.
I don't really understand what you are trying to do, but if you just want to load a record directly to the store, without any processing, you don't need the proxy at all. Your loadStore function can look like this:
loadStore: function () {
var obj = {
testName: 'Yipiee',
hasTestPassed: true,
hasFix: true
};
this.getStore().add(obj);
}
So I have this small Extjs application which consists of a grid with users. Each user has a field where I send from the server the date when he subscribed as a timestamp value (unix).
Ext.define('AP.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int', persist : false },
{ name: 'date_added', type: 'date', dateFormat: 'timestamp'},
{ name: 'username', type: 'string', persist : false }
]
});
The grid has a renderer so I can render that timestamp into a human readable format such as 29-Oct-2011 04:00 am:
...
{
header: 'Date added',
align: 'center',
sortable: true,
dataIndex: 'date_added',
width: 140,
fixed: true,
renderer: Ext.util.Format.dateRenderer('d-M-Y h:i a')
}
...
Now, everything works as intended, the values are displayed correctly but, I also have a form to edit each record in part. In my form, I can edit the date added field by providing a field xtype: 'datefield' which lets me chose the date. When I chose a new date for my record it shows something like 11/29/2011 (from my date above) but when I submit that form to update the record it posts something like this in the request payload: {"date_added": "NaN-NaN-NaNTNaN:NaN:NaN"}.
Can anybody shed a light on how do I go about saving dates in Extjs on fields that are retrieved as timestamps?
I did this with a gridpanel recently.
Even though the data returns from the database as a timestamp, using type: date worked fine for me...
// DATA MODEL
Ext.define('Particle', {
extend: 'Ext.data.Model',
fields: [
{ name: 'particle_id', type: 'long' },
{ name: 'name', type: 'string' },
{ name: 'type', type: 'string' },
{ name: 'start_date', type: 'date' },
{ name: 'sched_date', type: 'date' },
{ name: 'sched_time', type: 'date' },
{ name: 'notes', type: 'string' }
]
});
I rendered the date values in the column model as follows, note the renderer: config option. (I am using the field: config option because I used the grideditor extension in this to allow data to be edited in-line on the grid itself - you wouldn't need this if you are editing the values in a seperate form.)
// GRID COLUMN MODEL
var columns = [
{text: "Name", flex: 1, sortable: true, dataIndex: 'name', renderer: function(data,meta,record){meta.attr = 'ext:qtitle="Notes:"ext:qtip="' + record.get('notes') + '"'; return data;}},
{text: "Type", width: 55, sortable: true, dataIndex: 'case_lvl'},
{text: "RF Started", width: 80, sortable: true, dataIndex: 'start_date', renderer: Ext.util.Format.dateRenderer('j-M-Y')},
{text: "Sched Date", width: 80, sortable: true, dataIndex: 'sched_date', field: 'datefield', renderer: Ext.util.Format.dateRenderer('j-M-Y')},
{text: "Sched Time", width: 80, sortable: true, dataIndex: 'sched_time', field: 'timefield', renderer: Ext.util.Format.dateRenderer('g:i A')}
];
To answer your question specifically, I returned the date value to the database as a timestamp string by picking it out of the field using Ext.Date.format(). You could add this before submitting the form.
schedDate = Ext.Date.format(Ext.getCmp('schedDate').getValue(),'Y-m-d') + Ext.Date.format(Ext.getCmp('schedTime').getValue(),' H:i:s')
try like this in your data field:
{xtype: 'datefield',
anchor: '100%',
fieldLabel: 'Date',
name: 'date',
format: 'm d Y'}
and change the format to 'd-M-Y h:i a'