I need to do something like this, but on the server side.
http://dev.sencha.com/ext/5.1.0/examples/kitchensink/#binding-associations
My code (when I select one Customers grid row):
selectionchange: function(sm, grid, value, selected, eOpts) {
var storeCustomers = grid.getStore();
var gridOrders = Ext.ComponentQuery.query('#gridOrdersItemId')[0];
var storeOrders = gridOrders.getStore();
var id_customers = storeCustomers.findRecord('id_customers', value); //It does not work; return null
console.log(id_customers ); //null
console.log(value); //undefined
storeOrders.proxy.extraParams = {
'id_customers': id_customers
},
storeOrders.load();
}
For some reason I can not get the value of id_customers when I select a grid record. the result is null.
Any idea how to solve this?
Thanks in advance.
Edited: 06-07-2015
selectionchange: function(sm, grid, record, value, selected, eOpts) {
var storeCustomers = grid.getStore();
var gridOrders = Ext.ComponentQuery.query('#gridOrdersItemId')[0];
var storeOrders = gridOrders.getStore();
var records = grid.getSelectionModel().getLastSelected(record);
storeOrders.proxy.extraParams = {
'id_customers': records.get('id_customers')
},
storeOrders.load();
}
Regarding this:
For some reason I can not get the value of id_customers when I select
a grid record. the result is null.
here is a possible solution:
selectionchange: function(grid, records) {
var storeOrders = Ext.ComponentQuery.query('#gridOrdersItemId')[0]
.getStore();
storeOrders.proxy.extraParams = {
'id_customers': records[0].get('id_customers')
},
storeOrders.load();
}
Related
ExtJs is a new world for me. I hope I can get the problem explained very well.
I have a grid with different editor columns. If I change one and save it, I have to change the output.
I do it with
e.row.cells[e.colIdx].childNodes[0].innerText = '{s name=column/express/yes}JA{/s}';
e.row.cells[e.colIdx].classList.add("warning");
If I change 2 different fields at the same time, e.colIdx does not fit anymore to the right column.
Is there a getter or anything else to get the column of a special grid column ?
Here is the complete code
onSavePosition: function(editor, e, store, options) {
var me = this,positionStore;
if (((e.newValues.md_express != e.originalValues.md_express) && e.record.internalId > 0)
|| e.newValues.md_supplier != e.originalValues.md_supplier) {
var customCallback = function (position, success) {
Ext.Ajax.request({
method: 'POST',
url: '{url controller=AttributeData action=saveData}',
params: {
_foreignKey: e.record.internalId,
_table: 's_order_details_attributes',
__attribute_md_express: Number(e.newValues.md_express),
__attribute_md_supplier: e.newValues.md_supplier
},
success:function(response){
var t=this;
me.getOrderList().store.load();
var selectedRowIndex=e.grid.getSelectionModel().getCurrentPosition().row;
var selectedRowRecord=e.grid.getStore().getAt(selectedRowIndex);
selectedRowRecord.set('md_express',e.newValues.md_express);
selectedRowRecord.set('md_supplier',e.newValues.md_supplier);
selectedRowRecord.commit();
debugger;
if((e.newValues.md_express != e.originalValues.md_express)) {
if (e.newValues.md_express == true) {
e.row.cells[e.colIdx].childNodes[0].innerText = '{s name=column/express/yes}JA{/s}';
e.row.cells[e.colIdx].classList.add("warning");
} else {
e.row.cells[e.colIdx].childNodes[0].innerText = '{s name=column/express/no}NEIN{/s}';
e.row.cells[e.colIdx].classList.remove("warning");
}
}
}
});
};
options.callback = customCallback;
}
me.callParent([editor, e, store, options]);
}
my solution is
var colIdx = me.getColumnIndex(editor.grid,'md_express');
getColumnIndex: function(grid, dataIndex) {
gridDataIndices = Ext.Array.pluck(grid.columns, 'dataIndex');
return Ext.Array.indexOf(gridDataIndices, dataIndex);
}
this sends back the column index of the given column in my grid.
Found here
how to find column index using dataIndex Extjs 4
I'm using a Ext.ux.LiveSearchGridPanel and i want to hide all rows that have no match.
When the search field is empty, I want all elements to be displayed.
I'm using a Ext.data.Store that contains my data.
I tried to find a config for this, but had no luck.
You can handle search field and filter store by this value. Something like this:
Ext.create('Ext.ux.LiveSearchGridPanel', {
...
listeners: {
afterrender: function() {
var me = this,
store = me.getStore();
me.textField.on('change', function(cmp) {
var searchValue = cmp.getValue();
store.clearFilter(true);
if (!searchValue) {
return;
}
store.filter(function(record) {
// you can filter store by some column
var companyName = record.get('company');
if (!me.caseSensitive) {
companyName = companyName.toLowerCase();
searchValue = searchValue.toLowerCase();
}
if (me.regExpMode) {
var match = companyName.match(searchValue);
return match ? this.indexOf(match[0]) : -1;
}
return companyName.indexOf(searchValue) != -1;
});
})
}
}
});
Look my fiddle example
I am using Ext.data.Store's each(). But this method, when store is filtered, only loops over the filtered records. Do we have any other method or work around to loop over all the records of a store even when a filter is applied on the store.
var attStore = Ext.getStore("myStore");
var allRecords = attStore.snapshot || attStore.data;
allRecords.each(function (record) {
if (record.data.IsUpdated) {
record.set('updatedByUser', true);
}
else {
record.set('updatedByUser', false);
}
record.commit();
});
The line var allRecords = attStore.snapshot || attStore.data;actually returns all the records as intended but when I try to update that record (or one of the property in that record using record.data.property = something) That record is not getting updated.
Thanks
use this
var allRecords = store.snapshot || store.data;
and loop like this
allRecords.each(function(record) {
console.log(record);
});
see this store snapshot
On Sencha Touch 2.3 I needed to do the following to bypass the filter.
var allRecords = store.queryBy(function(){return true;});
allRecords.each(function(r){
doStuff();
});
Starting from Extjs 5 use the following
Ext.data.Store.each( fn, [scope], [includeOptions] )
i.e.
store.each(function(record) {
// ...
}, scope, {filtered: true});
// Here's how you can do that ...
myStore.each(function(record)
{
record.fields.each(function(field)
{
var fieldValue = record.get(field.name);
});
// Alternatively...
/*
for (var rd in record.data)
{
var fName = rd;
var fValue = record.data[rd];
}
*/
}, this);
You can use getStore().getDataSource().each(function (r) {}); function to get all data even store
I need keep the default feature of reordering columns and add
possibility drop the column in a second grid, building in the last a list
with the columns of first grid.
I hope has been clear.
I solved the issue extending DropZone. This implementation receive as constructor param the target grid, and this, be in the rbar (docked control) of source grid. The key is set ddGroup to "header-dd-zone-" plus id from source grid. I hope this is useful.
Ext.define('Crud.FilterDropZone', {
extend: 'Ext.dd.DropZone'
, constructor: function() {}
, init: function (grid) {
var me = this;
if (grid.rendered) {
me.grid = grid;
me.ddGroup = 'header-dd-zone-' + grid.up('grid').id;
grid.getView().on({
render: function(v) {
me.view = v;
Crud.FilterDropZone.superclass.constructor.call(me, me.view.el);
},
single: true
});
} else {
grid.on('render', me.init, me, {single: true});
}
}
, getTargetFromEvent: function (e) {
return {};
}
, onNodeDrop: function (nodeData, source, e, data) {
var header = data.header
, store = Ext.getCmp(e.target.id).getStore();
//store.add(new store.RecordType({ property: header.text, value: '', reference: header.dataIndex}));
store.add([[header.text, '', header.dataIndex]]);
}
});
I am developing a checkbox grid list with pagination using the EXTJS grid. I need to remember the selected record when the page navigation is performed.
Details:
1) Go to page:1 and selected rows 1,2 and 3.
2) Now navigate to page:2
3) Come back to page:1
4) The rows 1,2 and 3 which are already selected should be shown as selected
Is there is any api in grid which handles this kind of function?
Thanks in advance.
Thanks for your responses. I have achieved my design by implementind a plugin for grid. The plugin looks as,
Ext.namespace('Ext.ux.plugins');
Ext.ux.plugins.CheckBoxMemory = Ext.extend(Object,
{
constructor: function(config)
{
if (!config)
config = {};
this.prefix = 'id_';
this.items = {};
this.idProperty = config.idProperty || 'id';
},
init: function(grid)
{
this.view = grid.getView()
this.store = grid.getStore();
this.sm = grid.getSelectionModel();
this.sm.on('rowselect', this.onSelect, this);
this.sm.on('rowdeselect', this.onDeselect, this);
this.store.on('clear', this.onClear, this);
this.view.on('refresh', this.restoreState, this);
},
onSelect: function(sm, idx, rec)
{
this.items[this.getId(rec)] = true;
},
onDeselect: function(sm, idx, rec)
{
delete this.items[this.getId(rec)];
},
restoreState: function()
{
var i = 0;
var sel = [];
this.store.each(function(rec)
{
var id = this.getId(rec);
if (this.items[id] === true)
sel.push(i);
++i;
}, this);
if (sel.length > 0)
this.sm.selectRows(sel);
},
onClear: function()
{
var sel = [];
this.items = {};
},
getId: function(rec)
{
return rec.get(this.idProperty);
}
});
This plugin was called from gird as,
Ext.grid.Gridpanel({
store: 'someStore',
plugins: [new Ext.ux.plugins.CheckBoxMemory({idProperty: "recordID"})]
});
Hope this helps some one.
I don't think there is. You;d need to store IDs of selected records in some separate store/array and use it to re-apply selections when page is changed.
You could put a MixedCollection Object at the global scope to keep track of these records. This will allow you to store global settings of different object types.