I am trying to save state of grid columns,
I set
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
and configured grid with
stateful: true,
stateId: 'uniqueGridId',
Right now it saves everything about grid, even I do not have stateEvents.
How do I save only column hide / show state?
I tried
initStateEvents : function(){
this.colModel.on('hiddenchange', function(){ this.saveState; });
}
but nothing chages...
Anyway to save hide /show column state and only hide /show column state?
If somebody need it:
applyState: function(state) {
var cs = state.columns;
if (cs.length !== 0) {
for (var i = 0, len = cs.length; i < len; i++) {
var s = cs[i], c = Ext.getCmp(s.id);
if (typeof c !== "undefined") {
if (typeof s.hidden !== "undefined") {
c.hidden = s.hidden;
}
}
}
}
},
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
In Extjs, I want to know whether I can restrict the dragging of elements within a specific x,y co-ordinates, just like an option, containment in jQuery-UI.
Currently this is my code:
abc.prototype.initDrag = function(v) {
v.dragZone = new Ext.dd.DragZone(v.getEl(), {
containerScroll : false,
getDragData : function(e) {
var sourceEl = e.getTarget(v.itemSelector, 10);
var t = e.getTarget();
var rowIndex = abc.grid.getView().findRowIndex(t);
var columnIndex = abc.grid.getView().findCellIndex(t);
var abcDragZone = v.dragZone ; //Ext.getCmp('idabcDragZone');
var widthToScrollV = $(window).width()-((columnIndex-1)*100);
var widthToScrollH = $(window).height()-((5-rowIndex)*30);
abcDragZone.setXConstraint(0,widthToScrollV);
abcDragZone.setYConstraint(widthToScrollH,0);
if ((rowIndex !== false) && (columnIndex !== false)) {
if (sourceEl) {
abc.isDragged = true;
def.scriptGrid.isDraggableForObject = false;
def.scriptGrid.dragRowIndex = false;
d = sourceEl.cloneNode(true);
d.id = Ext.id();
d.textContent = "\$" + abc.grid.getColumnModel().getColumnHeader(columnIndex);
return {
ddel : d,
sourceEl : d,
sourceStore : v.store
}
}
}
},
getRepairXY : function() {
return this.dragData.repairXY;
},
});
}
But the problem is that the initdrag is called when the csv sheet is added to DOM. Only when its added that element can be accessed and the individual cells' drag limits can be set. So once I add a csv, the limits are not getting set. If I add it again to DOM then the limits work. Is there an option like the jQuery UI containment for draggable, here in extjs?
edit:
I even tried :
constrainTo( constrainTo, [pad], [inContent] )
body had an id of #abc
when I tried with
dragZoneObj.startDrag = function(){
this.constrainTo('abc');
};
which is a method of the DragZone class. It still did not cover the whole body tag.
I am trying to customize a data table using ag-grid in my Angular 1.5 based project. The customization is that the user is allowed to select a maximum number of rows in the table, for example, the maximum is 2.
I have the following code by using node.setSelected(false) that I found in the documentation page here, but I got the error: node.setSelected is not a function when the selection exceeds the maximum of 2.
var gridOptions = {
columnDefs: columnDefs,
rowSelection: 'multiple',
onRowSelected: onRowSelected
};
function onRowSelected(event) {
var curSelectedNode = event.node;
var selectionCounts = vm.gridOptions.api.getSelectedNodes().length;
if (selectionCounts > 2) {
var oldestNode = vm.gridOptions.api.getSelectedNodes()[0]; // get the first node, to be popped out
oldestNode.setSelected(false); // causes the above 'not a function' error
}
}
Does anyone know what might be wrong with ag-grid for its setSelected() API? or any better way to do this customization?
it turns out that setSelected(false) method is outdated in its current ag-grid API, and I found that I can use deselectIndex() method to deselect the oldest node:
if (selectionCounts > 2) {
vm.gridOptions.api.deselectIndex(0, true); // This works!
}
Hope this will help someone else in the future!
var columnDefs =[{
headerName: 'Name',
field: 'name',
width: 108,
minLength: 1,
maxLength: 20,
editable: true
}]
- Modify prototype in file .js
TextCellEditor.prototype.init = function (params) {
var eInput = this.getGui();
var startValue;
// Set min & max length
if (params.column.colDef.maxLength)
eInput.maxLength = params.column.colDef.maxLength;
if (params.column.colDef.minLength)
eInput.minLength = params.column.colDef.minLength;
// cellStartedEdit is only false if we are doing fullRow editing
if (params.cellStartedEdit) {
this.focusAfterAttached = true;
var keyPressBackspaceOrDelete = params.keyPress === constants_1.Constants.KEY_BACKSPACE
|| params.keyPress === constants_1.Constants.KEY_DELETE;
if (keyPressBackspaceOrDelete) {
startValue = '';
}
else if (params.charPress) {
startValue = params.charPress;
}
else {
startValue = params.value;
if (params.keyPress !== constants_1.Constants.KEY_F2) {
this.highlightAllOnFocus = true;
}
}
}
else {
this.focusAfterAttached = false;
startValue = params.value;
}
if (utils_1.Utils.exists(startValue)) {
eInput.value = startValue;
}
this.addDestroyableEventListener(eInput, 'keydown', function (event) {
var isNavigationKey = event.keyCode === constants_1.Constants.KEY_LEFT || event.keyCode === constants_1.Constants.KEY_RIGHT;
if (isNavigationKey) {
event.stopPropagation();
}
});
};
I've tried this:
Ext.override(Ext.form.Field, {
setFieldLabel: function(text) {
if (this.rendered) {
var labelSeparator = this.labelSeparator;
if (typeof labelSeparator == 'undefined') {
if (this.ownerCt && this.ownerCt.layout && typeof
this.ownerCt.layout.labelSeparator != 'undefined')
labelSeparator = this.ownerCt.layout.labelSeparator;
else
labelSeparator = '';
}
var formItem = this.el.up('.x-form-item', 10);
if (formItem) {
var label = formItem.child('.x-form-item-label');
if (label)
label.update(text + labelSeparator);
}
} else
this.fieldLabel = text;
}
})
but it only fires once.
I have a formpanel (form a) that lets you edit a set of data, and that set of data will be the fieldLabel of another form (form b). At start, when I "edit" the fieldLabel from form a, it works, (form b's fieldLabel is changed), but after opening form b from a button (e.i. Create button), and editting the fieldLabel (inputtin in a textfield) from form a again, the fieldLabel in form b is not changed.
formItem = this.el.up('.x-form-item', 10); becomes null.
how to resolve this?
Thanks.
Solve:
Ext.override(Ext.form.Field, {
setFieldLabel: function(text) {
if (this.rendered) {
var labelSeparator = this.labelSeparator;
if (typeof labelSeparator == 'undefined') {
if (this.ownerCt && this.ownerCt.layout && typeof this.ownerCt.layout.labelSeparator != 'undefined')
labelSeparator = this.ownerCt.layout.labelSeparator;
else
labelSeparator = '';
}
var formItem = this.el.up('.x-form-item', 10);
if (formItem) {
var label = formItem.child('.x-form-item-label');
if (label)
label.update(text + labelSeparator);
} else {
this.labelEl.update(text);
}
} else {
this.fieldLabel = text;
}
}
});
Just call setText() method. More simple.
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.