ExtJS 6. Adding column to grid - extjs

I want to add additional column to grid dynamically on table instantiation.
So, I've added process function to gridPanel with following section
var clmn = {
xtype: 'checkcolumn',
dataIndex: 'test,
editor: {
xtype: 'checkboxfield'
}
};
config.columns.push(clmn);
As you can see, rowediting plugin is used here too.
Actually column is added and displayed on screen. But it is not hold correct data that has been loaded, only defaultValue from model.
On row modification (when rowediting plugin is started) real data is displayed.
What is the issue here? May be there is some refresh method that should be used to refresh metadata or sth like this..
Please, take into consideration that i am working via Sencha Architect

columns.push() is not proper way to do this. So you should use reconfigure method which is mentioned here. If your store is already have fields for new columns you don't have to pass it again. Just get your current columns and add your new columns and reconfigure the grid.
edit for answer : Your problem easer than before. you can just pass your columns to it like below;
var yourGenericColumns = [
{text: 'First Name', dataIndex:'firstname'},
{text: 'Last Name', dataIndex:'lastname'}];
yourGenericColumns.push({text : 'Age', dataIndex: 'age'});
Ext.create('YourApp.YourCustomGrid',{
columns : yourGenericColumns
});

Related

Display date and time of record with grid cell data

I am using a single-cell grid to show notifications in my application. How do I show date and time of notification with each cell data? The data is present in the model of the associated store. I want it to be something like the phabricator https://secure.phabricator.com/
Any pointers how I may do so?
One way to accomplish this would be to use a templatecolumn. You can then specify a tpl in the config of html representing the two sources of data.
Here is a fiddle I created demonstrating and simple and more complex tpl that resembles the data on the site you referenced.
Here is a simple example of a template column:
{
xtype: 'templatecolumn',
header:'Name',
tpl:'{first_name} {last_name}'
}
And a more complex template column with similar style to the one you referenced:
{
xtype: 'templatecolumn',
header: 'Example With Date',
flex: 1,
tpl:'<span style="display:inline-table;width:50%;">{first_name}</span><span style="width: 50%;display: inline-table;text-align: right;">{myDate}</span>'
}

Is there any way to work with vtypes on a editorgridpanel

I'm working on a editorGridPanel and I need to validate that a column can get only numeric values. It's just that every sample I can get I see working on Ext.apply(Ext.form.VTypes, etc..) but is those cases is for working with formPanel.
The editor object of the column allows for validation. I understand that the editor field behaves like a form field. I didn't find yet a difference. I would try :
columns: [{
header: ...,
dataIndex: ...,
editor: {
xtype: 'textfield',
vtypes: ...

make grid with the help of dynamically JSON array

I want to make a grid data according to JSON response of a method means if i send JSON Array with 3 element its create column name three different name as well as 10 ,20 or more dynamically according to Array size.
Please help me or suggest me some example code.If its not feasible in extjs please suggest me to another
frame work .
Sorry for my poor english.
Thanks
Naresh
Extjs 3 solution
You can add metaData to the JSON response. Inside the metaData you can send a field-config. Listen to the metachange event and update you grid accordingly.
You can find an example here: Dynamic Grid (ExtJs 3)
Extjs 4+ solution
There is a user component Dynamic Grid Link
Ext.create('Ext.window.Window', {
width: 400,
height: 400,
title: 'Example of Dynamic Grid'
layout: 'fit',
items: [
{
// All what you have to set! :)
xtype: 'dynamicGrid',
url: '/some/url'
}
]
});
This should do exactly what you are looking for!

ExtJS : datefield showing up as blank on selection of a grid row

This is a wierd problem that I am seeing. I populate my store and then the Grid using that store. Also, i used loadRecord(record) to populate a form ( Ext.form.Panel ) basing on the row selected in the Grid. One of the fields in my Ext.form.Panel is:
xtype: 'datefield',
readOnly: true,
fieldLabel: 'End Date',
name: 'soEndDate',
id:'soEndDateField',
format: 'm/d/Y'
My problem is this date field shows up as blank. I am getting the data right into the store. Because if I change the xtype to 'textfield', I can see the date in this format: 2014-01-30T05:00:00Z. And again the moment I turn back the xtype to 'datefield', the date is gone again !!!
I have literally been banging my head on this for a couple of hours now and I am not sure what kind of blunder have I been doing. I hope someone would respond to this at the earliest :(
Thanks in advance.
What is the format of the date 'soEndDate' coming in from your record? Is it '2014-01-30T05:00:00Z'?
If that's the case then the datefield doesn't know what to do with it. Either:
1) Change your format to
format: 'c'
2) Add to altFormats
altFormats: '"m/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d|n-j|n/j|c
// c being the key here.

ExtJS: Hidden column in grid showing data on store reload

I have a grid.Panel configured as follows:
var myGrid = new Ext.grid.Panel({
id:'myGridID',
layout:'anchor',
title:'My Grid',
border: false,
store:myStore,
frame:false,
columns:[{header: 'ID', hidden:true, hideable:false, dataIndex: 'data_id'},
{header:'Title', flex:0.3, sortable:true, dataIndex:'data_title'},
{header:'Description', flex:0.7, sortable:true, dataIndex:'data_description'}]
....
Its supposed to show columns Title and Description and keep column ID hidden (I have to keep the column there because I need to get the ID of the selected record).
When my web page launches I load the data in the grid perfectly. The first column (the one with header ID) is hidden as its supposed to be and columns Title and Description show just fine.
The problem is that when I reload the store after adding a record to it the grids headers show fine (only Title and Description) but the data of column ID is also shown.
I used this line to reload the store:
Ext.getCmp('myGridID').getStore().load()
I found that if I resize any column (Title or Description), the data from column ID disappears.
Why do you use 'hideable:false'? I don't think you should specify that, seems useless. Try running the code without it.

Resources