Hello im struggling with ExtJs im Trying to change color in ExtJs grid where cell name is 'statuscode' if statuscode is 1 the cell has to change color in green! anybody an idea? Thanks
Ext.define('Shopware.apps.ArticleUpdateLog.model.ArticleUpdateLog', {
extend: 'Shopware.data.Model',
configure: function () {
return {
controller: 'ArticleUpdateLog'
};
},
fields: [
{ name : 'id', type: 'int', useNull: true },
{ name : 'importTimestamp', type: 'string' },
{ name : 'statuscode', type: 'string', useNull: true },
{ name : 'status', type: 'string', useNull: true }
]
});
Each column of a grid has a renderer config render: function(value, meta, record). So you can check with record.get('status') the current value and add a css style to the given cell.
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-renderer
Also look at the meta paramenter which grants access to style the specific cell you want.
Related
I have an Extjs form wherein we can assign age for a person. So when I assign blank in Age field and save it to DB that works good (in DB age goes as blank). But when I try to refresh and display it again then it displays 0.
I tried with allowBlank:true but it doesn't work.
This also doesn't work :
https://www.sencha.com/forum/showthread.php?181270-Hi-how-can-i-set-null-for-a-numberfield
Form :
Ext.define('com.view.xxxx.entities.forms.yyyyyyy', {
statics: {
buildItems: function ()
{
return [
{
xtype: 'fieldset',
title: 'Person',
defaultType: 'textfield',
defaults: { anchor: '100%'},
items: [
{fieldLabel: 'Age', name: 'age', xtype: 'numberfield', labelWidth: 130}
]
}
]
}
}
});
How can we force number field to display data from DB as is i.e. blank as blank?
My suggestion is to use a Model that converts any non-numeric value to a empty string and use this model in your form:
Ext.define('Fiddle.model.ageModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.field.Field'
],
fields: [{
name: 'name'
}, {
name: 'age',
convert: function (v, rec) {
return typeof (v) === 'number' ? v : '';
},
}]
});
See this exemple
I prefer to use Number field in model with allowNull variable.
And allowBlank must be true in numberfield.
Ex.
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [
{ name: 'age', type: 'number', allowNull: true }
]
});
I was running into this, and changing my code to use the allowNull option seemed to fix my issue (for Ext-js 6). What isn't documented well is that when you define a field as type 'null', without the convert function or the allowNull option set to true, the store treats the value as '0' if it is actually null since 'null' is not a valid 'number'. It took me a while to figure that out on my own.
If running an older version though and allowNull doesn't work, you may be able to resolve it by additionally specifying a convert function that checks for null and returns null. Yes, it's a kludge, but it seemed to work for me before I tried using allowNull. Also works for v6 if you don't specify allowNull at all, like this:
{ name: 'age', type: 'number', convert:
function (v, rec) {
return (v === null ? null : v);
}
}
I had originally changed my app to use the convert function and had it working, but switched to using allowNull after finding this post since that's cleaner/clearer, but the convert function option was one I found on an old Sencha forum post.
I am creating a custom plugin where I need to list some stuff in the backend area. Each item in the list has the option to open a detail window where I want to display some info and a SELECT OPTION field but not sure how to create it. That field is just to select the option you want and save it in the database.
Is it possible to create it in myplugin/Resources/views/backend/my_plugin/model/product.js file?
I have something like this (sample):
Ext.define('Shopware.apps.MyPlugin.model.Product', {
extend: 'Shopware.data.Model',
configure: function() {
return {
controller: 'MyPlugin',
detail: 'Shopware.apps.MyPlugin.view.detail.Product'
};
},
fields: [
{ name : 'id', type: 'int', useNull: true },
{ name : 'Name', type: 'string' },
{ name : 'Lastname', type: 'string' },
{ name : 'Date', type: 'date' },
{ name : 'Color', type: 'SELECT?' }
]
});
Of course the Color field doesnt recognize the SELECT there but I was wondering if there's another word for it?
I was hoping to create that new field like this:
fields: [
...
{
name : 'Color',
type: 'SELECT?',
values: {'green', 'blue', 'red'}
}
]
If I am completly wrong could you please guide me where to create this field?
Thanks in advance.
You're defining a model, not a plugin and it looks like you want to configure 'Color' as an enum? Am I right?
The standard types are:
Ext.data.field.Field //(Default, implies no conversion)
Ext.data.field.String
Ext.data.field.Integer
Ext.data.field.Number
Ext.data.field.Boolean
Ext.data.field.Date
(see documentation under Field Types)
You can probably just use a string unless you want model validation...
You could create a custom type, extended from string or field and use a custom validator. (see same page under Validation)
Example:
Ext.define('App.field.Color', {
extend: 'Ext.data.field.Field',
alias: 'data.field.color',
// Match list of colors
validators: {
type: 'list',
list: ['green', 'blue', 'red']
}
});
Ext.define('App.model.Product', {
extend: 'Ext.data.Model',
fields: [
{ name : 'id', type: 'int', useNull: true },
{ name : 'Name', type: 'string' },
{ name : 'Lastname', type: 'string' },
{ name : 'Date', type: 'date' },
{ name : 'Color', type: 'color' }
]
});
I have to append a value to the data fetched from the store before rendering it to the grid in ExtJs.
Please guide me on achieving the above mentioned functionality.
Currently the grid is populated in the following manner:
Ext.define("MyApp.view.ShowDetails",{
extend: 'Ext.grid.Panel',
requires:['MyApp.store.MyStore'],
store:'MyStore',
stateId: 'stateGrid',
selType : 'checkboxmodel',
selModel : {
mode : 'MULTI'
},
plugins : [Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit : 2
})],
defaultType: 'textfield',
columns: [
{
header: 'Userid',
width: 150,
dataIndex: 'uid',
editor :
{
allowBlank : true
}
},
...
Yes this is possible,using the convert property in field declaration in MODEL
An Example:
{
name: 'uid',
type: 'string',
convert: function (value, record) {
if (!value)
return value+'D';
else
return value;
}
},
I have a IPIdentifierMod model that has a hasone association with BaseInfo model
Ext.define('JP.model.IPIdentifierMod', {
extend:'Ext.data.Model',
fields:[
'enterpriseIdType',
{
name: 'referenceVerifiedDate',
type: 'date',
convert: function(v, record) {
return Ext.Date.format((new Date(v)), 'Y-m-d');
console.log(v);
console.log(record);
}
}
],associations: [
{ type: 'hasOne',
model: 'BaseInfoMod',
name:'enterpriseIdType'
}
]
});
baseInfo:
Ext.define('JP.model.BaseInfoMod', {
extend:'Ext.data.Model',
fields:[
'typeId',
'typeName',
'parentId',
'priority'
],
proxy: {
type: 'ajax',
reader: {
type: 'json',
root:'results',
idProperty: 'typeId'
},
api: {
read : contextPath + '/baseInfo/getBaseInfo'
},
extraParams: {
baseEntityNo: ''
}
}
});
and I show IPIdentifierMod data in a grid
corresponding grid column to show naemType of BaseInfo is:
{
header:'Name Type',
dataIndex:'enterpriseIdType',
sortable:true,
renderer: function(value) {
return value.typeName;
}
},
This works fine. The enterpriseIdType.typeName is displayed in the column.
I now added a RowEditingPlugin and added the following editor to this column
editor: {
allowBlank: false,
xtype: 'combobox',
displayField: 'typeName',
valueField: 'typeId',
store: 'EnterpriseIdType',
}
In the editor,the value of the field is "[object Object]" .
I need to render this object to display the name just like I did to the actual column.
Also when I choose an item in the ComboBox, an enterpriseIdType object is not created in the data,
it just saves the value of the field specified in the valueField.
I searched it and find something like my problem without any answer.
sencha forum
thank you
I read in Ext JS in Action ( by J. Garcia) that if we have an instance of Ext.data.Record, we can use the form's loadRecord method to set the form's values. However, he does not give a working example of this (in the example that he uses data is loaded into a form through a file called data.php). I have searched many forums and found the following entry helpful as it gave me an idea on how to solve my problem by using form's loadRecord method:
load data from grid to form
Now the code for my store and grid is as follows:
var userstore = Ext.create('Ext.data.Store', {
storeId: 'viewUsersStore',
model: 'Configs',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/user/getuserviewdata.castle',
reader: {
type: 'json',
root: 'users'
},
listeners: {
exception: function (proxy, response, operation, eOpts) {
Ext.MessageBox.alert("Error", "Session has timed-out. Please re-login and try again.");
}
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
id: 'viewUsersGrid',
title: 'List of all users',
store: Ext.data.StoreManager.lookup('viewUsersStore'),
columns: [
{ header: 'Username', dataIndex: 'username' },
{ header: 'Full Name', dataIndex: 'fullName' },
{ header: 'Company', dataIndex: 'companyName' },
{ header: 'Latest Time Login', dataIndex: 'lastLogin' },
{ header: 'Current Status', dataIndex: 'status' },
{ header: 'Edit',
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 50,
items: [{
icon: '../../../Content/ext/img/icons/fam/user_edit.png',
tooltip: 'Edit user',
handler: function (grid, rowIndex, colIndex) {
var rec = userstore.getAt(rowIndex);
alert("Edit " + rec.get('username')+ "?");
EditUser(rec.get('id'));
}
}]
},
]
});
function EditUser(id) {
//I think I need to have this code here - I don't think it's complete/correct though
var formpanel = Ext.getCmp('CreateUserForm');
formpanel.getForm().loadRecord(rec);
}
'CreateUserForm' is the ID of a form that already exists and which should appear when user clicks on Edit icon. That pop-up form should then automatically be populated with the correct data from the grid row.
However my code is not working. I get an error at the line 'formpanel.getForm().loadRecord(rec)' - it says 'Microsoft JScript runtime error: 'undefined' is null or not an object'.
Any tips on how to solve this?
Rec is undefined in your EditUser function. You give an ID as parameter to your EditUser, you need to give the record to it as a parameter instead.
//The call
EditUser(rec);
function EditUser(rec) {
var formpanel = Ext.getCmp('CreateUserForm');
formpanel.getForm().loadRecord(rec);
}