i trying to find some way to display/insert/update the information on the form where the information is dynamic. the extjs i currently using is Ext JS 7.1.x Classic
the schema are as below
name of item
cost price of the item
product code of the item
location ([latitude and longitude];rack number;shelves number)
remarks
For example the forms will have a list of location in the form for that item which i able to to add, delete and update each row of location?
data are as show below
PowerBank,10,MPB001,["000.1,111";2;2,"000.2,222";2;2,"000.1,111";1;2],My Power Bank
Earphone,4,MEP001,["000.1,111";2;3],My Earphone
i thinking of something like ListView or Datagrid?
For initial data, update data and insert you can use
form.setValues({
name: 'PowerBank',
cost: 10,
code: 'MPB001',
locationLatitude: '000.1',
locationLongitude: '111'
rack: 2,
shelves: 2,
remarks: 'My Power Bank'
});
Other than that you could use data-binding
data-binding
Let's say you have a grid and bind the selection:
xtype: 'grid',
bind: {selection: '{gridSelection}'}
And you have the selected dataset in your viewModel
data: {
gridSelection: null
}
Then you can add the data to the form like this:
items: {
xtype: 'textfield',
name: 'remarks',
bind: {value: '{gridSelection.remarks}'}
}
problem
you might run into a problem if you are trying to listen on the dirty states with data-binding. But you can solve this by making all fields not dirty after the data-binding triggers.
Related
I'm currently doing a trial on AG-Grid master detail feature. Things are working fine but my data will be refreshed every 10 seconds. This caused the details to close when the data is refresh and I have to open the detail rows again.
Are there any options to save the state of the details that was opened?
Plunkr
Data is set to refresh every 5 seconds , expand the detail row and when the data refreshes the detail will be collapse. I've set rememberGroupStateWhenNewData : true
https://plnkr.co/edit/SgYD3vH8CXW9W9B8HD6N?p=preview
var gridOptions = {
rememberGroupStateWhenNewData:true,
columnDefs: columnDefs,
masterDetail: true,
detailCellRendererParams: {
detailGridOptions: {
rememberGroupStateWhenNewData:true,
columnDefs: [
{field: 'callId'},
{field: 'direction'},
{field: 'number'},
{field: 'duration', valueFormatter: "x.toLocaleString() + 's'"},
{field: 'switchCode'}
],
onFirstDataRendered(params) {
params.api.sizeColumnsToFit();
}
},
getDetailRowData: function (params) {
params.successCallback(params.data.callRecords);
}
},
onFirstDataRendered(params) {
params.api.sizeColumnsToFit();
}
};
A little late, but this may help others.. If you use Immutable data mode, and set the refresh mode of your detail to 'rows', your master and detail will update in-place.
Check these links for more info:
https://www.ag-grid.com/react-data-grid/immutable-data/
https://www.ag-grid.com/react-data-grid/master-detail-refresh/
The problem is that you're using api.setRowData to update the data.
https://www.ag-grid.com/javascript-grid-data-update/
This is the simplest of the update methods. When you call
api.setRowData(newData), the grid discards all previous selections and
filters, and completely overwrites the old data with the new. This was
the first way the grid worked and is the most 'brute force' way.
Use this method if you want to load the grid with a brand new set of
data.
This description does not match what you're trying to do, so you should use one of the other methods. Try api.updateRowData(transaction), there are plenty of examples for it in the demos.
Did you try rememberGroupStateWhenNewData?
https://www.ag-grid.com/javascript-grid-grouping/#keeping-group-state
have the same issue here, rememberGroupStateWhenNewData only works on row grouping, not master/detail grids.
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
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.
Is it posible to change grid's store in ExtJS 4?
For example, i have two models:
User = Ext.define('User',{
extend: 'Ext.data.Model',
[...],
hasMany: 'Product'
});
Product = Ext.define('Product',{
extend: 'Ext.data.Model',
[...]
});
and two grids.
The first grid is linked with Store which uses User model and loads nested json data from backend, like
{
users: [{
id: 1,
products: [
{id: 1},
{id: 2}
]
}, {
id: 2,
products: [
{id: 3},
{id: 4},
{id: 5}
]
}]
}
All i want to get is when you click on the row in the first grid, the second grid must show products of the user, without connection to the server.
All i know is that user.products(); returns a Ext.data.Store object.
So the idea is to change second grid's store to user.products();, but there is no such method grid.setStore() :-)
Thanks in advance
I think a better solution would be to :
grid1.on('itemclick', function(view, record) {
grid2.reconfigure(record.products());
);
You are looking at stores the wrong way. A store is attached to the grid forever, hence there is no grid.setStore(). You do NOT change a store for a grid, instead you change the DATA in the store for that grid.
Now, solution to your problem: You are correct with the part that you already have a instance of store with your data. ie; user.products(). Still, you will have to create a store for your grid. This store will not have any data though. Now, when you need to display products information, you need to load the grid's store with data. You can use:
load()
loadData()
loadRecord()
to load data into your store. In your case, you can do the following:
myStore = user.products();
grid.getStore().loadRecords(myStore.getRange(0,myStore.getCount()),{addRecords: false});
If you want to attach a store to a grid after the grid has been created, you can use the bindStore() method.
var store = user.products();
grid.getView().bindStore(store);
Alternatively you can also use load(), loadData(), loadRecords() methods, and copy the data into your store.
Abdel Olakara's answer helped me out when I needed to update data on something that didn't have reconfigure (custom class inheriting from Ext.form.FieldSet).
But you don't need to specify addRecords or the range for getRange, because the defaults have us covered in this case.
This means you can do:
myStore = user.products();
grid.getStore().loadRecords(myStore.getRange());
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