Can someone help me to figure out a way to arrange the columns irrelevant of it columns array positioning? For example, in below grid columns array i just want to display Phone as 1st column and Name as 2nd column. How can i achieve that programmatically?
Columns Array:-
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email'
}, {
text: 'Phone',
dataIndex: 'phone'
}]
While debugging the grid column config with Chrome developer tools, i figured out a parameter "fullColumnIndex" which value getting increased for every column. But specifying that explicitly doesn't make any difference :(
Thanks!
You can do it by using reconfigure method. Docs — http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.panel.Table-method-reconfigure
Here is the description of this method:
reconfigure( [store], [columns] )
Reconfigures the grid / tree with a new store/columns. Either the store or the > columns can be omitted if you don't wish to change them.
The enableLocking config should be set to true before the reconfigure method is > executed if locked columns are intended to be used.
Parameters
store : Ext.data.Store (optional)
The new store. You can pass null if no new store.
columns : Object[] (optional)
An array of column configs
Related
In the kitchen sink classic pivot grid configuration plugin example there are row numbers in the first column of the grid.
Does anyone know how to do this?
Here's the link to the example
https://examples.sencha.com/extjs/7.1.0/examples/kitchensink/?classic#configurable-pivot-grid
I tried setting rowNumbers to true but it didn't work
Thanks
rownumberer is column type. you must use it in columns
columns: [
{xtype: 'rownumberer'},
{text: "Company", flex: 1, sortable: true, dataIndex: 'company'},
]
Edited:
sorry for wrong answer. it was for ordinary grid. to show rowNumbeber on pivot grid set
selModel: {
type: 'spreadsheet'
},
Is it possible to put a custom column definition for select fields in a ui grid and pick up the rest of the fields from the data schema? This use case arises because my json data schema is variable and there's just one column I'm sure about(its presence in data) and would like to apply a custom cell template to just that column.
Grid options:
$scope.gridOptions = {
data: data,
columnDefs: [
{ field: 'name', width: 250, cellTemplate: "../../tpl/grid/name_template.html" }
]
}
where data is the json object of variable schema.
If I define the grid this way, only the name field from my data object will be displayed in the grid. Is it possible to use the custom column def for the name field and also display the other objects in the data object without specifying column definitions for them?
To provide more clarity:
my data object can be:
[{name: 'apple', type: 'fruit', seasonal: true}]
or:
[{name: 'apple', color: 'green', taste: 'sour'}]
Basically my use case is such that there's no way for me to know before hand what columns will be returned from the query that initialises the grid data object but I'm sure of the fact that a name column will be part of the data returned by the query. I would want to supply a custom cell template and other properties to the name field and also display the other columns that might be there.
The normal behaviour is that if I specify a column definition for one column in the field, then I have to specify definitions for all the other columns that are part of the data to make them visible and in my case I don't know what the other field names might be.
$scope.gridOptions = {
data: data,
columnDefs: [
{ field: 'name', width: 250, cellTemplate: $.get('url-to-your-template.html') }
]
}
Check if the above works. You can use your own service for fetching template
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 Panel with 4 columns, one of these is numeric (number up to 4 digit), and I would like to sort the row by this colum. My problem is Ext JS sorts the rows as if the column was textual, so 5 is sorted after 3000.
I tried to use a numberColumn instead of a normal column (specifying the x-type in the columns of the GridPanel), but it doesn't change the sorting.
Thus I tried to format the numbers so 5 would appear like 0005, and 0005 would be before 3000. But the format options of the numberColumn do not appear to let me specify a minimal number of digit (in Java, using NumberFormat, 0000 would work, but here it doesn't).
So I put a renderer to force my number to appear with 4 digits, it works, but it seems that the sort method use the values before beeing rendered, wich is quite logical.
I'm stuck after trying all my ideas, does anyone have a clue?
If you're using a remote store sort, then the sorting is done remotely (the database, like mysql). So what is the type of column on the database for that field? If it's a char or varchar, then that's the issue.
I've had a similar issue, the column type doesn't fix this. To have a proper ordering the type in model should be numeric.
1) Set your field type as integer in model definition.
Ext.define('myModel', {
extend: 'Ext.data.Model',
fields: [{ name: 'myField', type: 'int' }]
});
2) Create a Store using that model.
var myStore = Ext.create('Ext.data.Store',{
model: 'myModel'
});
3) Define a GridPanel using the store and link your field as dataIndex into columns definition.
Ext.create('Ext.grid.Panel',{
store: myStore,
columns: [{
header: 'Numbers', dataIndex: 'myField'
}]
});
I encountered a similar problem where by exj grids sort by each digit in your number, so for example a list might be reordered to 1, 2, 22, 3, 4, 41, 5... for what its worth, i found in extjs4, that defining the type as int in the model did the trick, I havent specified the local or remote sort but it seems to be working...
Ext.define('ExtMVC.model.Contato', {
extend: 'Ext.data.Model',
fields: [{'id', type: 'int'}, 'name', 'phone', 'email']
});
This is my code that connects to a MySQL. I followed this -> {'id', type: 'int'}, and it work out fine... Thank you all! I'm using Ext js 4.2.x