Extjs Grid - Delete all record has a conditional - extjs

I have a grid and a button will delete in http://jsfiddle.net/9zB8R/
My field like fields: ['id', 'name', 'type']. If type == delete i will delete it.
I init data like:
var simpleData = [];
var store = new Ext.data.ArrayStore({
fields: ['id', 'name', 'type'],
data: simpleData
});
for (i = 0; i < 20; i++) {
simpleData.push({id:''+i+'', name: 'name'+i, type: 'delete'});
}
//this record will not delete
simpleData.push({id:'20', name: 'enable', type: 'enable'});
store.loadData(simpleData);
I have a tbar like below but that can't delete all record have type == delete. How can i fix that. Thanks.
tbar:[
{
text:'Delete all type = delete',
handler:function(){
store.each(function(item, idx) {
if (item && item.get('type')=='delete') {
store.removeAt(idx);
}
});
}
}
]

The problem is with the "each" loop. Removing items in the loop is changing store size and hence only some of the items are getting deleted.
To get around it, you can loop through the store in reverse order and then delete as below:
var grid = new Ext.grid.GridPanel({
width: 400,
height: 600,
store: store,
loadMask: true,
renderTo: Ext.getBody(),
tbar:[
{
text:'Delete all type = delete',
handler:function(){
var i = store.getCount()-1;
for (i; i>=0; i--) {
if (store.getAt(i).get('type')=='delete') {
store.removeAt(i);
}
}
}
}
],

Related

Position a specific row of a grid as the first row

How to set a particular row in grid as the first row in the grid I have tried selecting the row as shown below
var grid = interface.down('directorReviewGrid');
store.removeAll();
store.load({
params: {
workflow_stage: workflow_stage
},
callback: function(records, operation, success) {
var rowIndex = this.find('id', id);
/*where 'id': the id field of your model,
record.getId() is the method automatically created by Extjs.
You can replace 'id' with your unique field.. And 'this' is your store.*/
grid.getView().scrollRowIntoView(rowIndex);
grid.getView().select(rowIndex);
}
});
You can implement using store.insert( 0, records ) and for go to particular that, you can use grid.getView().focusRow(rowIdx).
You can check in this working FIDDLE. Hope this will help/guide you to achieve your requirement.
CODE SNIPPET
var char = 'ABCDEFGHJKLIMNOPQRSTUVWXYZ';
function getRandomNumber() {
return Math.floor(Math.random() * 26);
}
function getRandomName() {
let name = '';
for (let i = 0; i < 6; i++) {
name += char.charAt(getRandomNumber());
}
return name;
}
function getData() {
let data = [];
for (let key = 0; key < 100; key++) {
data.push({
id: key,
name: getRandomName()
})
}
return data
}
Ext.create('Ext.data.Store', {
storeId: 'gridstore',
fields: ['id', 'name'],
data: getData()
});
Ext.create('Ext.grid.Panel', {
title: 'Focus to Row',
store: 'gridstore',
columns: [{
text: 'ID',
dataIndex: 'id'
}, {
text: 'Name',
dataIndex: 'name',
flex: 1
}],
height: window.innerHeight,
renderTo: Ext.getBody(),
tbar: ['->', {
text: 'Move Selected Row to First',
handler: function () {
var grid = this.up('grid'),
store = grid.getStore(),
selctionM = grid.getSelectionModel(),
rec = selctionM.getSelection()[0];
//If selected record is available
if (rec) {
store.remove(rec) //First the remove the store
store.insert(0, rec); //Insert into 1st postion
selctionM.select(rec); //Select same record
grid.getView().focusRow(rec); //Focuses a particular row and brings it into view. Will fire the rowfocus event.
} else {
Ext.Msg.alert('Info', 'Please select any row');
}
}
}]
});

Extjs Combobox store value from another object

I have a object that has some values that i want to display in a combobox that i am adding to a form panel inside a for loop.
this is the contents of the object object
but in my combobox i get data as [object Object]
here is what i am currently doing
for(var i = 0; i < data.length ; i++)
{
console.log('ad');
var storeStates = new Ext.data.ArrayStore({
fields: ['optionText'],
data : [data[i].data.selectOptions.list[i].optionText]
});
var cb = new Ext.form.ComboBox({
fieldLabel: data[i].data.name,
hiddenName: 'fieldTypeName',
id: data[i].data.name.toString(),
valueField: 'optionText',
displayField: 'optionText',
typeAhead: true,
allowBlank: false,
mode: 'local',
selectOnFocus: true,
triggerAction: 'all',
emptyText: 'Survey Field Type',
disabled: this.existingField,
width: 190,
store: storeStates,
listeners: {
'select': function (combo, newValue, oldValue) {
}
}
});
Ext.getCmp('survey-field-form').add(cb);
//Ext.getCmp('survey-field-form').doLayout();
console.log('added');
}
You need to change your store definition from Ext.data.ArrayStore to Ext.data.Store & data as data[i].data.selectOptions.list
var storeStates = new Ext.data.Store({
fields: ['optionText'],
data : data[i].data.selectOptions.list
});
I think you need to define your store like that to get the correct display:
var storeStates = new Ext.data.JsonStore({
data: data[i].data.selectOptions.list,
fields: [{name: "optionText", type: "string"}]
});
I solved it by creating a reader and a store and pushing data into the store and then loading the store like this
// create a Record constructor:
var rt = Ext.data.Record.create([
{name: 'optionValue'},
{name: 'optionText'}
]);
var myStore = new Ext.data.Store({
// explicitly create reader
reader: new Ext.data.ArrayReader(
{
idIndex: 0 // id for each record will be the first element
},
rt // recordType
)
});
var myData = [];
for(var j = 0; j < data[i].data.selectOptions.list.length; j++)
{
var optionText = data[i].data.selectOptions.list[j].optionText.toString();
var optionValue = data[i].data.selectOptions.list[j].optionValue.toString();
myData.push([optionValue, optionText]);
}
myStore.loadData(myData);
Hope this helps someone else

ExtJs4 to ExtJs5 Upgrade: GroupedColumn Chart is not working

I am new to Extjs5. I am upgrading extJs4 to ExtJs 5. I am trying to implement a groupedColumn chart but no data shows up only the axises are visible. Even I am not getting any error.
My code is as follows:
Ext.define('Result', {
extend: 'Ext.data.Model',
fields: [
{ name: 'state', type: 'string', mapping:0 },
{ name: 'product', type: 'string', mapping:1 },
{ name: 'quantity', type: 'int', mapping:2 }
]
});
var store = Ext.create('Ext.data.ArrayStore', {
model: 'Result',
groupField: 'state',
data: [
['MO','Product 1',50],
['MO','Product 2',75],
['MO','Product 3',25],
['MO','Product 4',125],
['CA','Product 1',50],
['CA','Product 2',100],
['WY','Product 1',250],
['WY','Product 2',25],
['WY','Product 3',125],
['WY','Product 4',175]
]
});
Ext.define('Ext.chart.series.AutoGroupedColumn', {
extend: 'Ext.chart.series.Bar',
type: 'autogroupedcolumn',
alias: 'series.autogroupedcolumn',
gField: null,
constructor: function( config ) {
this.callParent( arguments );
// apply any additional config supplied for this extender
Ext.apply( this, config );
var me = this,
store = me.chart.getStore(),
// get groups from store (make sure store is grouped)
groups = store.isGrouped() ? store.getGroups().items : [],
// collect all unique values for the new grouping field
groupers = store.collect( me.gField ),
// blank array to hold our new field definitions (based on groupers collected from store)
cmpFields = [];
// first off, we want the xField to be a part of our new Model definition, so add it first
cmpFields.push( {name: me.xField } );
// now loop over the groupers (unique values from our store which match the gField)
/* for( var i in groupers ) {
// for each value, add a field definition...this will give us the flat, in-record column for each group
cmpFields.push( { name: groupers[i], type: 'int' } );
}*/
for (var i = 0; i < groupers.length; i++) {
var name = groupers[i];
cmpFields.push({name:name,type:'number'});
}
// let's create a new Model definition, based on what we determined above
Ext.define('GroupedResult', {
extend: 'Ext.data.Model',
fields: cmpFields
});
// now create a new store using our new model
var newStore = Ext.create('Ext.data.Store', {
model: 'GroupedResult'
});
// now for the money-maker; loop over the current groups in our store
for( var i = 0; i < groups.length; i++ ) {
// get a sample model from the group
var curModel = groups[ i ].items[ 0 ];
// create a new instance of our new Model
var newModel = Ext.create('GroupedResult');
// set the property in the model that corresponds to our xField config
newModel.set( me.xField, curModel.get( me.xField ) );
// now loop over each of the records within the old store's current group
for( var x = 0; x < groups[ i ].items.length; x++) {
// get the record
var dataModel = groups[ i ].items[ x ];
// get the property and value that correspond to gField AND yField
var dataProperty = dataModel.get( me.gField );
var dataValue = dataModel.get( me.yField );
// update the value for the property in the Model instance
newModel.set( dataProperty, dataValue );
// add the Model instance to the new Store
newStore.add( newModel );
}
}
// now we have to fix the axes so they work
// for each axes...
me.chart.axes.every( function( item, index, len ) {
// if array of fields
if( typeof item.getFields()=='object' ) {
// loop over the axis' fields
for( var i in item.fields ) {
// if the field matches the yField config, remove the old field and replace with the grouping fields
if( item.getFields(i)==me.yField ) {
Ext.Array.erase( item.getFields(), i, 1 );
Ext.Array.insert( item.getFields(), i, groupers );
break;
}
}
}
// if simple string
else {
// if field matches the yField config, overwrite with grouping fields (string or array)
if( item.getFields()==me.yField ) {
item.setFields(groupers);
}
}
});
// set series fields and yField config to the new groupers
me.fields,me.yField = groupers;
// update chart's store config, and re-bind the store
me.chart.store = newStore;
me.chart.bindStore( me.chart.store, true );
// done!
}
})
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
legend: {
position: 'right'
},
axes: [
{
type: 'numeric',
position: 'left',
fields: ['quantity'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Quantity',
grid: true,
minimum: 0
},
{
type: 'category',
position: 'bottom',
fields: ['state'],
title: 'State'
}
],
series: [
{
type: 'autogroupedcolumn',
axis: 'left',
highlight: true,
xField: 'state',
yField: 'quantity',
gField: 'product'
}
]
});
I have used Ext.chart.series.Bar in place of Ext.chart.series.Column as Ext.chart.series.Column no more valid in ExtJs 5. I also have made other minor essential changes required to make my code compatible to ExtJs 5. You can also check this example on https://fiddle.sencha.com/#fiddle/hvk .
I have already spent 3 days on it. Please help!! Thanks in advance.
#Samir, If you want a Grouped Chart which is non-stacked use stacked: false property in series. Modify the code of #MonicaOlejniczak as:
legend :{
docked: right
}
series: {
.......
........
stacked: false,
}
This should solve your problem.

Go back to the selection in Data Grid after reloading the page ExtJS 4.1 [duplicate]

I have a problem. I use extjs grid. This grid will be refreshed every seconds.
I refresh with this function:
ND.refresh = function() {
ND.commList.load();
}
var refreshSeconds = refreshRate * 1000;
var t = setInterval('ND.refresh()', refreshSeconds);
But when someone selected a row to highlight it it reset this selection.
How can I remember the selected row and highlight it again after refresh?
This is my grid:
var grid = Ext.create('Ext.grid.Panel', {
autoscroll: true,
region: 'center',
store: ND.dashBoardDataStore,
stateful: true,
forceFit: true,
loadMask: false,
stateId: 'stateGrid',
viewConfig: {
stripeRows: true
},
columns: [{
text: 'Vehicle',
sortable: true,
flexible: 1,
width: 60,
dataIndex: 'vehicle'
}, {
text: 'CCU',
sortable: true,
flexible: 0,
width: 50,
renderer: status,
dataIndex: 'ccuStatus'
}]
});
Thanks guys
I wrote simple Ext.grid.Panel extension that automatically selects back rows that were selected before store reload. You can try it in this jsFiddle
Ext.define('PersistantSelectionGridPanel', {
extend: 'Ext.grid.Panel',
selectedRecords: [],
initComponent: function() {
this.callParent(arguments);
this.getStore().on('beforeload', this.rememberSelection, this);
this.getView().on('refresh', this.refreshSelection, this);
},
rememberSelection: function(selModel, selectedRecords) {
if (!this.rendered || Ext.isEmpty(this.el)) {
return;
}
this.selectedRecords = this.getSelectionModel().getSelection();
this.getView().saveScrollState();
},
refreshSelection: function() {
if (0 >= this.selectedRecords.length) {
return;
}
var newRecordsToSelect = [];
for (var i = 0; i < this.selectedRecords.length; i++) {
record = this.getStore().getById(this.selectedRecords[i].getId());
if (!Ext.isEmpty(record)) {
newRecordsToSelect.push(record);
}
}
this.getSelectionModel().select(newRecordsToSelect);
Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
}
});
The straightforward solution is just save somewhere in js index of selected row. Then after reload you could easily select this row by index using grid's selection model.
Get selection model: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel-method-getSelectionModel
var selectionModel = grid.getSelectionModel()
Get selected rows: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-getSelection
var selection = selectionModel.getSelection()
Set selected row back: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-select
selectionModel.select(selection)
Here is another way to select the previously selected record:
var selectionModel = grid.getSelectionModel()
// get the selected record
var selectedRecord = selectionModel.getSelection()[0]
// get the index of the selected record
var selectedIdx = grid.store.indexOfId(selectedRecord.data.id);
// select by index
grid.getSelectionModel().select(selectedIdx);
For some reason the grid.getSelectionModel().select(record) method wasn't working for me, but selecting by index seems to work.
Edit: found out why grid.getSelectionModel().select(record) method wasn't working. Apparently the store is reloaded, the record instances aren't the same (they have different automatically generated Ext IDs). You have to use selectAt() in this case.
for extjs 4.1.7 users
need a workarround about the statement in
refreshSelection() {
...
Ext.defer(this.setScrollTop, 30, this,
[this.getView().scrollState.top])
}
thus setScrollTop no longer exists
so a working soluction is add
me.getView().preserveScrollOnRefresh = true;
in initComponent
Ext.define('PersistantSelectionGridPanel', {
extend: 'Ext.grid.Panel',
selectedRecords: [],
initComponent: function() {
this.callParent(arguments);
this.getStore().on('beforeload', this.rememberSelection, this);
this.getView().on('refresh', this.refreshSelection, this);
//-------------------------------------------
me.getView().preserveScrollOnRefresh = true;
//-------------------------------------------
},
rememberSelection: function(selModel, selectedRecords) {
if (!this.rendered || Ext.isEmpty(this.el)) {
return;
}
this.selectedRecords = this.getSelectionModel().getSelection();
this.getView().saveScrollState();
},
refreshSelection: function() {
if (0 >= this.selectedRecords.length) {
return;
}
var newRecordsToSelect = [];
for (var i = 0; i < this.selectedRecords.length; i++) {
record = this.getStore().getById(this.selectedRecords[i].getId());
if (!Ext.isEmpty(record)) {
newRecordsToSelect.push(record);
}
}
this.getSelectionModel().select(newRecordsToSelect);
}
});
i have make modification on this code.
If you make selection, and aplys a filter on the store and reload it, the selection model have a first empty array in this selected collection ( at index 0 ).
This modification is in the last line of the "refreshSelection" function.
if (newRecordsToSelect.length >= 1){
this.getSelectionModel().select(newRecordsToSelect);
Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
}

remember after refresh selected row in extjs grid

I have a problem. I use extjs grid. This grid will be refreshed every seconds.
I refresh with this function:
ND.refresh = function() {
ND.commList.load();
}
var refreshSeconds = refreshRate * 1000;
var t = setInterval('ND.refresh()', refreshSeconds);
But when someone selected a row to highlight it it reset this selection.
How can I remember the selected row and highlight it again after refresh?
This is my grid:
var grid = Ext.create('Ext.grid.Panel', {
autoscroll: true,
region: 'center',
store: ND.dashBoardDataStore,
stateful: true,
forceFit: true,
loadMask: false,
stateId: 'stateGrid',
viewConfig: {
stripeRows: true
},
columns: [{
text: 'Vehicle',
sortable: true,
flexible: 1,
width: 60,
dataIndex: 'vehicle'
}, {
text: 'CCU',
sortable: true,
flexible: 0,
width: 50,
renderer: status,
dataIndex: 'ccuStatus'
}]
});
Thanks guys
I wrote simple Ext.grid.Panel extension that automatically selects back rows that were selected before store reload. You can try it in this jsFiddle
Ext.define('PersistantSelectionGridPanel', {
extend: 'Ext.grid.Panel',
selectedRecords: [],
initComponent: function() {
this.callParent(arguments);
this.getStore().on('beforeload', this.rememberSelection, this);
this.getView().on('refresh', this.refreshSelection, this);
},
rememberSelection: function(selModel, selectedRecords) {
if (!this.rendered || Ext.isEmpty(this.el)) {
return;
}
this.selectedRecords = this.getSelectionModel().getSelection();
this.getView().saveScrollState();
},
refreshSelection: function() {
if (0 >= this.selectedRecords.length) {
return;
}
var newRecordsToSelect = [];
for (var i = 0; i < this.selectedRecords.length; i++) {
record = this.getStore().getById(this.selectedRecords[i].getId());
if (!Ext.isEmpty(record)) {
newRecordsToSelect.push(record);
}
}
this.getSelectionModel().select(newRecordsToSelect);
Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
}
});
The straightforward solution is just save somewhere in js index of selected row. Then after reload you could easily select this row by index using grid's selection model.
Get selection model: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel-method-getSelectionModel
var selectionModel = grid.getSelectionModel()
Get selected rows: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-getSelection
var selection = selectionModel.getSelection()
Set selected row back: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-select
selectionModel.select(selection)
Here is another way to select the previously selected record:
var selectionModel = grid.getSelectionModel()
// get the selected record
var selectedRecord = selectionModel.getSelection()[0]
// get the index of the selected record
var selectedIdx = grid.store.indexOfId(selectedRecord.data.id);
// select by index
grid.getSelectionModel().select(selectedIdx);
For some reason the grid.getSelectionModel().select(record) method wasn't working for me, but selecting by index seems to work.
Edit: found out why grid.getSelectionModel().select(record) method wasn't working. Apparently the store is reloaded, the record instances aren't the same (they have different automatically generated Ext IDs). You have to use selectAt() in this case.
for extjs 4.1.7 users
need a workarround about the statement in
refreshSelection() {
...
Ext.defer(this.setScrollTop, 30, this,
[this.getView().scrollState.top])
}
thus setScrollTop no longer exists
so a working soluction is add
me.getView().preserveScrollOnRefresh = true;
in initComponent
Ext.define('PersistantSelectionGridPanel', {
extend: 'Ext.grid.Panel',
selectedRecords: [],
initComponent: function() {
this.callParent(arguments);
this.getStore().on('beforeload', this.rememberSelection, this);
this.getView().on('refresh', this.refreshSelection, this);
//-------------------------------------------
me.getView().preserveScrollOnRefresh = true;
//-------------------------------------------
},
rememberSelection: function(selModel, selectedRecords) {
if (!this.rendered || Ext.isEmpty(this.el)) {
return;
}
this.selectedRecords = this.getSelectionModel().getSelection();
this.getView().saveScrollState();
},
refreshSelection: function() {
if (0 >= this.selectedRecords.length) {
return;
}
var newRecordsToSelect = [];
for (var i = 0; i < this.selectedRecords.length; i++) {
record = this.getStore().getById(this.selectedRecords[i].getId());
if (!Ext.isEmpty(record)) {
newRecordsToSelect.push(record);
}
}
this.getSelectionModel().select(newRecordsToSelect);
}
});
i have make modification on this code.
If you make selection, and aplys a filter on the store and reload it, the selection model have a first empty array in this selected collection ( at index 0 ).
This modification is in the last line of the "refreshSelection" function.
if (newRecordsToSelect.length >= 1){
this.getSelectionModel().select(newRecordsToSelect);
Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
}

Resources