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.
Related
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
});
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>'
}
I am using this for my angular grid
http://ui-grid.info/
and i want to add serial numbers to all rows.
I tried this
{name: 'ID', field: '', displayName: 'Row Number', cellTemplate: '<div>{{row.rowIndex + 1}}</div>'},
But it keep showing on 1 in the column. Lool like row.rowIndex is not giving returning anything.
How can i fix that. Thanks
I was very much on to hacking ui-grid found that interpolation of 'rowRenderIndex' solved for me.
use
<span>{{rowRenderIndex+1}}</span>
for serial numbers in ui-grid
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: ...
Which have the means to derive a description of the field (such as text, combobox) of the table in front of the text input field?
Appearance that was:
ie a question mark next to the field - it points to a question mark - shows information on the field. When the mouse is a query to the database from there from a particular table to get a description of the field.
How best to implement it?
http://jsfiddle.net/akat/UgLN4/
(You will have to use an appropriate image and probably style it so that it looks 'better')
A pretty ugly but easy way to do this is just to include the HTML for the icon in the description.
new Ext.FormPanel({
height: 100,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
fieldLabel: 'Status <img src="./questionmark.png" title="User status" />'
}]
})
It might be more elegant to look at writing a plugin for Ext.form.Field .