I have grid then I can select few or all the rows and on toolbar with a "delete" button. I can delete one row, but for remove several; selected rows I don't have a method.
Can somebody help me? Thank you.
The following is for deletion of one selected row:
listeners: {
click: {
scope: this,
fn: function(sm, selection) {
var selection = this.getView().getSelectionModel().getSelection()[0];
/*if (selection.length > 1) {
store.removeAll(selection);
}*/ //This not working
else {
store.remove(selection);
}
store.sync();
}
}
}
selectionModel.getSelection() will give you array of records.
If you are able to get all the selected rows you can access each row in a loop and also you can leave some of the selected rows.
onDeleteClick : function() {
var studentGrid = this.getStudentGrid();
var studentStore = studentGrid.getStore();
var selectedRows = studentGrid.getSelectionModel().getSelection();
if (selectedRows.length) {
studentStore.remove(selectedRows);
} else {
Ext.Msg.alert('Status', 'Please select at least one record to delete!');
}
}
Related
i have done toolpip for compobox list items
listConfig: {
itemTpl: [
'<div data-qtip="{description}">{mydisplayField}</div>'
]
now I'm trying to show tooltip for selected item,current value
i have search many times but I cant can't do to this .
If you have done task like this pleas tell me.
it was so easy
on afterrender
var fieldStore = field.getStore();
Ext.create('Ext.tip.ToolTip', {
target: field,
listeners: {
beforeshow: function updateTipBody(tip) {
var value = field.getValue();
if (!value && value !== 0) {
return false; //not show
}
var record = fieldStore.getById(value);
tip.update(record.get('description'));
}
}
});
I have an ng-grid which has the Edit and Delete buttons at the bottom of the grid. Both buttons are disabled when no rows are selected.
I want to know what the correct way to delete a row for ng-Grid, when a row is selected.
I could not find any examples from their website or their wiki
I did a quick comparison of the original and the selected... something like this:
angular.forEach($scope.gridOptions.selectedItems, function(index) {
var deleteIndex = $scope.originalResource.indexOf(index);
if (deleteIndex > -1){
$scope.originalResource.splice(deleteIndex,1);
}
});
And then to unselect the rows I did this: $scope.selections.splice(0)
use this it works for both multiple rows or single row selection
$scope.mySelections = [];
$scope.gridOptions = {
data :'data',
selectedItems : $scope.mySelections,
showSelectionCheckbox : true
}
$scope.delItem = function() {
for (var i = 0; i < $scope.mySelections.length; i++) {
var index = $scope.data.indexOf($scope.mySelections[i]);
if (index != -1) {
$scope.data.splice(index, 1);
}
}
}
I have a grid and associated checkbox with it. By default when the grid loads it dispalys all the records but i want to filter it when the checkbox is selected and load back all the records when the checkbox is unchecked. Basically i want to display only the grid data with resolved date that equals "0001-01-01".I have given the checkbox code and grid screenshot below.
{
xtype: 'checkboxfield',
boxLabel: 'Filter by UN-Resolved',
id:'chkBox',
handler: function() {
var store = Ext.getCmp('defGrid').getStore();
if(Ext.getCmp('chkBox').getValue()){
store.filterBy([
{filterFn: function(item) {return item.get('ID') == 'Sales';{console.log(item);}}
]);
if(filter.data.items[0].data.ResolvedDate === '0001-01-01')
{console.log("I'm inside");}
});
}
I was finally able to resolve this... code as below ...
{
xtype: 'checkboxfield',
boxLabel: 'Filter by UN-Resolved',
id:'chkBox',
handler: function() {
var grid = Ext.getCmp('defGrid');
var checked = Ext.getCmp('chkBox').getValue();
if(checked){
if (grid.store!=undefined) {
grid.store.filterBy(function(record) {
//console.log(record.data.ResolvedDate);
return record.data.ResolvedDate === '0001-01-01' ;
});
grid.getView().refresh();
}
}
else{
var grid = Ext.getCmp('defGrid');
grid.store.clearFilter(true);
grid.getView().refresh();
}
}
}
I try to make a gridpanel with local data http://jsfiddle.net/8um4T/
This grid has add and delete within sortable: true in column, I will delete record by id (but my way fail with large data)
Here is my data
var simpleData = [];
var store = new Ext.data.ArrayStore({
fields: ['id', 'name',],
data: simpleData
});
for (i = 0; i < 20; i++) {
simpleData.push({id:''+i+'', name: 'name'+i});
}
store.loadData(simpleData);
My tbar with a add button
tbar:[
{
text:'Add',
handler:function(){
simpleData.push({id:'x', name: 'name'});
store.loadData(simpleData);
}
}
]
My action column
{
header: '',
xtype: 'actioncolumn'
, width: 50
, items: [{ // Delete button
icon: 'http://whatisextjs.com/BAHO/icons/cancel.png',
tooltip: 'Delete'
, handler: function(grids, rowIndex, colindex) {
var record = grid.getStore().getAt(rowIndex);
//Delete item in array
// if data is large will don't working
Ext.each(simpleData, function (items, idx) {
if (items.id == record.data.id) {
simpleData.splice(idx, 1);
}
});
//Delete record in store
grid.store.removeAt(rowIndex);
}
}]
}
if mydata is small then delete button will working. My data in my example is 20 record and that don't work
my idea is remove record from store after assign for simpleData. But how to do that or has another anyway to fix my problem thanks
//grid.store.removeAt(rowIndex);
// simpleData = grid.store.data; // my idea is (but how)
You need to break the loop after splicing the array by returning false. You are taking away one of the elements but the loop is not aware of it. So the last element will be undefined.
The loop will fail because the last 'items' parameter is not an object. So "items" is not an object and does not have an id.
The result is that you are removing that object from the array but you never get to the grid.store.removeAt(rowIndex); sentence. I would do:
Ext.each(simpleData, function (items, idx) {
if (items.id == record.data.id) {
simpleData.splice(idx, 1);
return false;
}
});
i am using checkboxmodel to select rows but i want to make some rows to be selection disabled based on some logic...
here is my what i am trying but 'beforeselect' function doesn't even fires
selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
mode:'multi',
listeners: {
beforeselect:function(grid){
var grid=Ext.getCmp('mylist');
var selectionModel=grid.getSelectionModel();
var selectedRecords=selectionModel.getSelection();
var myValue=selectedRecords[0].get('nowreceive');
var myvalue1=selectedRecords[0].get('received');
if(myValue>myvalue1)
{return false;}
else
return true;
}} }
),
beforecellmousedown event in the view config works for me.This is done in the viewconfig of the grid...
viewConfig: {
listeners: {
beforecellmousedown: function(view, cell, cellIdx, record, row, rowIdx, eOpts){
var myvalue=record.get('quantity_ordered');
var myvalue1=record.get('quantity_received')
if(myvalue==myvalue1)
{
return false;
}
else {
return true;
}
}
}
},
How do you know the event is not firing? It should be, but my guess is that selectedRecords[0] is not defined and that crashes your execution, because getSelection() probably returns an empty array, before any selection has occurred.
What you should do is to use the second argument of beforeselect, which is the record that's going to be added to the selection.
So you can implement your listener in a much simpler way:
beforeselect: function (selModel, record) {
if (record.get('nowreceive') > record.get('received')) {
return false;
}
}