I want a price field to be displayed as '$'+ 'PRICE' but nothing shows when I use the included code. Can someone please tell me how to concatenate so that the view displays price as $123('PRICE')?
{
xtype : 'textfield',
label : 'Price',
name : 'PRICE'(this comes from store data),
readOnly : true
}
You are asking for the textfield to have a read only value of $XXX, $XXX('PRICE') and 'PRICE'(XXXX) all in the same question. However I think your mistake is just that you are using the name config instead of value. Give the following a shot an see if you can make that work.
{
xtype : 'textfield',
label : 'Price',
value : '$' + 'Price',
readOnly : true
}
If it turns out that you are instead having trouble getting the actual numeric value for price into the field that is a different issue just post the code involved with loading that data and I'll do my best to help.
Good luck, Brad
Related
I am using ExtJS 6 (although from what I can tell it applies up to version 7.4 as well) and I have a grid with a booleancolumn xtype. For that boolean column I wanted to use the filter list option. Yes I know there is a boolean filter option however I don't like how it works using a radio button. I wanted to be able to select the Yes or No with checkboxes, however I found that only the option with true as the value worked. Here is my column config:
{
header: 'Active'
, dataIndex: 'inactive'
, xtype: 'booleancolumn'
, trueText: 'No'
, falseText: 'Yes'
, filter:{
type: 'list',
options: [[true,"No"],[false, "Yes"]]
}
}
This didn't work when excluding the 'options' property and letting it get the data from the store either by the way. After looking through the code I discovered that it takes the 'options' config and creates its own Ext.Data.Store using that as the data. See here as a simple example that can be run that will get the same issue:
var teststore = new Ext.data.Store({
fields: [
'id',
'text'
],
data: [[true,"No"],[false, "Yes"]]
});
The problem is that the 'false' boolean value is changed and is replaced with a dynamically created generic id. I discovered the issue lays in the constructor for 'Ext.data.Model' for the following line:
if (!(me.id = id = data[idProperty]) && id !== 0) {
If that line evaluates to true it will replace the id with the generated one. To fix this I just added ' && id !== false' to the end of the if statement and this fixed the issue.
I have not tested this fully, however the logic seems sound and it looks like the same type of issue occurred with the value of '0' hence the ' && id !==0'. Since we are directed here from the sencha forums I wanted to bring this up in case it helps someone.
Since my post already has the answer I will post a better way to do it other than directly changing the Ext code file (whether this is the proper way I may be wrong). Instead, you can create a new js file that will need to be included in your application (you can name it ext-overrides.js). In the new js file you need only type:
Ext.override(Ext.data.Model, {
constructor: function(data, session) {
.....
}
}
You would then copy the constructor function code from your version of the ExtJS code in where the '.....' is (if perchance the constructor function arguments are different you would have to update those as well) and just add the suggested change I made above in the 'question'. A search of the Extjs code for Ext.define('Ext.data.Model' should get you there easily and then just scroll to the constructor function.
I am using API's to receive multiple row data from a particular user, my doubt is how one can display that data in react using AG-Grid format.
this.setState
({
data: res.data,
columnDefs: [
{
headerName: " CreateDate", field: " CreateDate"
}, {
headerName: "Task Name", field: "TaskName"
}],
rowData:[{
//facing errors while assigning these values
TaskName : data.TaskName,
CreateDate : data[0].CreateDate
}]
})
Hi Aboli I am sharing stackblitz which will help you to do what you are trying to achieve.
I have assumed a lot about your data object since we dont know much about it. usually data should come in key value pair where keys matches to the field name which you have defined in your coldef object so that ag-grid can consume it directly.
But sometimes we need to sanitize data so that it matches with the way column field have been defined. feel free to ask more question and try to be a bit elaborative with code so that you can get solution faster.
here is the stackblitz example.
Some help please.
I'm trying to display a xtype depending on value that i get from database.
I have created the store to fetch data from my server side, and it receives only boolean value true or false nothing else.
var hidden= Ext.create('Ext.data.Store',
{
fields: ['hidden'],
autoLoad: true,
proxy:
{
type: 'ajax',
url: 'hidden/compare',
reader:
{
type: 'json',
root: 'data'
}
}
});
Here is the example what i want, but i don't know what to add instead value_from_the_store
text: 'Now you see me, now you don't',
xtype: value_from_the_store == false ? 'hidden' : 'textfield',
If you look at the docs for Ext.data.Store, you'll see several functions that allow you to access the data in the store.
Ext.data.Store
I'm not sure which record you want to access, or if there is only one record, but you can get records by index using getAt, or by ID using getById. You can get the first record using first. There are also several find functions, which allow you to search for a specific record.
Since you said there is only one record, you could just use first. You'll also need to get the specific field in the record using get('hidden').
xtype: hidden.first().get('hidden') ? 'hidden' : 'textfield',
Here, you can try this fiddle - https://fiddle.sencha.com/#fiddle/lho
I've created this fiddle in Ext 5 but you can still make it work in 4. Hope this helps.
Here is the same fiddle for Ext 4.2 - https://fiddle.sencha.com/#fiddle/lji
And in the fiddle, instead of calling the function, you can even do this -
xtype: store.getAt([0]).get('hidden')? 'hidden' : 'textfield'
Another way of fetching the value from the store is by -
store.findRecord('hidden', 'true').get('hidden')
store.findRecord('fieldName', 'Either a string that the field value should begin with, or a RegExp to test against the field.')
Here's your link to the API doc
I am using Extjs 4.2, so i have a grid with rowediting plugin. All works fine, I want to know how I can update one field value, depending on another field. I mean for example if in my grid I have field1, and field2, I need to update field3 value with field1 + field2 values when one of those were changed. Normally using jquery we can code a change event for each of the fields, but how i can do this on rowediting event?
Is this possible?
You can use edit events of rowedit as follow:
Sencha Fiddle : Grid RowEditor - Change cell value based on condition
grid.on('edit', function(editor, e){
/**
* here I am checking the column name to complete process
* you change what you want
*/
if (e.field == "name") {
e.record.set('result', parseInt(e.record.get('dummy')) + parseInt(e.record.get('age')));
}
})
You have to add editors to the columns, the editor is like any component, has listeners, type etc. then add a change listener
Example:
...
{
header: 'HeaderName',
dataIndex: 'man_peso',
type: 'number',
width: 50,
editor: {
enableKeyEvents: true,
listeners: {
change: function(c, e, eOpts) {
//here you can modify others components
}
},
xtype: 'textfield',
maskRe: /[0-9\.]/,
maxLength: 16
},
...
When you use RowEditor, the e.field value entirely depends on the field that was clicked on to edit the row.
To illustrate the problem:
In the previous answer, open the fiddle link (https://fiddle.sencha.com/#fiddle/4pj).
Double click the email field and change the name.
The handler will not update the result field as e.field will now be 'email' and not 'name'.
That is, Row Editor considers the field on which you click as the edited field. This does not make sense as it is a 'row' editor and is most probably used to edit multiple fields in the row.
To get the list of only modified fields, use e.record.getChanges(). These will give you only the modified fields and their new values.
I have a grid that is populated with records returned from an ajax request. When I exclude the id field from the model, all my results display properly (minus the id):
var model = Ext.define('Model', {
extend: 'Ext.data.Model',
fields: [
{name : 'name', mapping : 'element.name', type : 'auto'},
{name : 'uid', mapping : 'element.uid', type : 'auto'},
//{name : 'id', mapping : 'element.attributes[0].attrvalue', type : 'auto'},
However, I can't include this field without truncating hundreds of records. From what I understand, Ext does not allow for duplicate IDs. In my grid, it is necessary to display multiple of the same IDs.
How can I accomplish this?
Set idProperty of you Model to something else. The Default value is 'id'. This field is used as unique identifier of models.
Well this is silly. It was as easy as changing the name : 'id' to anything besides 'id':
{name : 'elementId', mapping : 'element.attributes[0].attrvalue', type : 'auto'}
And of course matching that to the grid:
{header : 'ID', dataIndex : 'elementId'}
I suppose there is reason to keep unique IDs for each record in an Ext.Store, just like any other set of data/database. It just wasn't apparent that id was a keyword in the framework that must be unique in every store's record.