Ext Js How to add combobox to specific cell in Grid? - javascript

I'm using Ext Js v6.2, In my application table constructed with ext js grid, I want to add combobox to specific cell [DEMO IMAGE ATTACHED], when I try to add combobox entire cell changes to combobox, But I need specific cell to be combobox. Here my code, I've searched in documentation and other stuff it doesn't help.please solve the problem.
Ext.define('OtherCharges1', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', mapping: 'name'},
{name: 'age', mapping: 'age'},
{name: 'marks', mapping: 'marks'},
{name: 'rate', mapping: 'rate'}
]
});
var newData1 = [
{name: "Freight"},
{name: "Insurance" },
{name: " Addl Chrg(High Sea)"},
{name: "Revenue Deposit on"}
]
var gridStore3 = Ext.create('Ext.data.Store', {
model: 'OtherCharges1',
data: newData1
});
var otherStore1 = Ext.create('Ext.grid.Panel', {
cls: 'custom-grid',
id: 'OtherId',
store: gridStore3,
stripeRows: true,
width: '100%',
collapsible: false,
enableColumnMove: false,
columnLines: true,
sortableColumns: false,
enableColumnHide: false,
enableColumnResize: false,
enableRowHeightSync: true,
columns:
[
{
header: "",
dataIndex: 'name',
flex: 1
},
{
editor: {
xtype: 'textfield',
selectOnFocus: true
},
dataIndex: '',
flex: .5,
sortable: true,
hideable: false,
},
{
editor: {
xtype: 'textfield',
selectOnFocus: true
},
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: false,
},
{
editor: {
xtype: 'textfield',
selectOnFocus: true
},
dataIndex: 'marks',
flex: .5,
sortable: true,
hideable: false,
},
{
editor: {
xtype: 'textfield',
selectOnFocus: true
},
dataIndex: 'rate',
flex: .5,
sortable: true,
hideable: false,
}],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})]
});

To enable editing the grid in a specific cell you need to edit the beforeedit event. Create a validation to make sure you are editing the cell you want.
In this case you will only edit the cell in column 1 and row 1.
grid.on('beforeedit', function(editor, e) {
if (e.colIdx === 1 && e.rowIdx === 1)
{
return true;
}
else
{
return false;
}
});
Remember that the ExtJS grid starts at 0.
See this example fidlle.

Related

Ext JS 3.4 : Event listener for cell editing

I'm facing issue of firing edit event using cell editor in Ext Js 3.4.
I'm trying to achieve triggering an ajax call upon a cell edited after pressing 'Enter'.
For now, I just replaced with console.log('hi') but it doesn't show anything after I pressed 'Enter'.
I'm not sure what's wrong in my code. Appreciate if someone can point it out. Thanks.
var grid = new Ext.grid.EditorGridPanel({
store: api_store,
loadMask: true,
clicksToEdit: 1,
tbar: [{
text: 'Create',
handler: function () { }
}],
columns: [
{
id: 'name',
header: 'Key Name',
width: 300,
sortable: true,
dataIndex: 'name',
editor: {
xtype: 'textfield',
allowBlank: false,
listener: {
edit: function (el) {
console.log('hi');
}
}
}
},
{
header: 'Key Value',
width: 500,
sortable: false,
dataIndex: 'key'
}
],
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
viewConfig: {
forceFit: true
},
height: 210,
stripeRows: true,
height: 350,
title: 'Keys'
});
Solution:
Use EditorGridPanel afteredit event:
afteredit(e)
Fires after a cell is edited. The edit event object has the following
properties
grid - This grid
record - The record being edited
field - The field name being edited
value - The value being set
originalValue - The original value for the field, before the edit.
row - The grid row index
column - The grid column index
Parameters:
e : Object An edit event (see above for description)
Example:
Ext.onReady(function () {
var api_store = new Ext.data.ArrayStore({
fields: ['key', 'name'],
data: [
['1', 'Name1'],
['2', 'Name2'],
['3', 'Name3']
]
});
var grid = new Ext.grid.EditorGridPanel({
renderTo: Ext.getBody(),
store: api_store,
loadMask: true,
clicksToEdit: 1,
tbar: [{
text: 'Create',
handler: function () { }
}],
listeners: {
afteredit: function(e) {
console.log('After edit. Column: ' + e.field);
}
},
columns: [
{
id: 'name',
header: 'Key Name',
width: 300,
sortable: true,
dataIndex: 'name',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header: 'Key Value',
width: 500,
sortable: false,
dataIndex: 'key'
}
],
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
viewConfig: {
forceFit: true
},
height: 210,
stripeRows: true,
height: 350,
title: 'Keys'
});
});

How to highlight items in dragged panel which are already dropped in ExtJS framework?

I have 2 grid panels written in ExtJS. My code is:
var leftListGrid = Ext.create("Ext.grid.Panel",{
id:'allSubjectsGrid',
scrollable: true,
height: '100%',
flex: 1,
multiSelect: true,
padding: '20 2 20 20',
rowLines: true,
closeAction: 'hide',
columns: [
{ text: 'Available Subjects', dataIndex: 'displayname', type: 'string', flex: 1, resizable: false}
],
viewConfig: {
copy: true,
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'subjectcModulesDD'
}
},
store: SubjectData.availableSubjectStore
});
var rightListGrid = Ext.create("Ext.grid.Panel",{
height: '100%',
flex: 1,
id: 'associatedSubjectsGrid',
padding: '20 20 20 2',
multiSelect: true,
rowLines: true,
scrollable: true,
columns: [
{ text: 'Associated Subjects', dataIndex: 'displayname', type: 'string', flex: 1, resizable: false},
{
xtype: 'actioncolumn',
width:30,
sortable: false,
resizable: false,
menuDisabled: true,
align: 'center',
items: [
{
icon: '/images/delete.png',
handler: function (view, rowIndex, colIndex, item, e, record, row) {
SubjectData.selectedSubjectStore.remove(record);
}
}
]
}
],
viewConfig: {
copy: true,
plugins: {
ptype: 'gridviewdragdrop',
dropGroup: 'subjectcModulesDD'
}
},
store: SubjectData.selectedSubjectStore
});
I can drag row from leftListGrid and drop to rightListGrid (not vice-versa). I want to highlight those rows of leftListGrid which are already dropped in rightListGrid panel.
Is any config for this or how to do? I am using Extjs v5.1.1.371
You can add a getRowClass function to your left panel's viewConfig to add a custom class to rows depending on the record values.
viewConfig: {
getRowClass: function(record) {
// Your custom code to determine whether the record has a match in the right list goes here:
if(rightListGrid.getStore().find("Id",record.get("Id"))>-1) return 'my-highlight-class';
return '';
}
}
Now you can add your own CSS regarding my-highlight-class to your style sheet.
You may have to call leftListGrid.getView().refresh() after an item has been dropped into the right grid to make sure that the row class is updated.

Data is not loading in ExtJS 3.4

My new in extjs and working on ExtJS 3.2.
In that my data is not loading but if comment data column is displaying can anyone please help me.
My code is
{
xtype: 'panel',
title: "Search Result",
items: [{
xtype: 'grid',
store: new Ext.data.Store({
autoDestroy: true,
fields: ['Name', 'Roll', 'Class'],
root: 'records',
// proxy: proxy,
data: [{
Name: false,
Roll: 'a',
Class: 20
}, {
Name: true,
Roll: 'b',
Class: 25
}]
}),
columns: [{
text: 'Name',
id: 'company',
header: 'Name',
width: 130,
sortable: false,
hideable: false,
dataIndex: 'Name'
}, {
text: 'Roll',
width: 130,
header: 'Name',
dataIndex: 'Roll',
hidden: false
}, {
text: 'Class',
width: 130,
header: 'Class',
dataIndex: 'Class',
hidden: false
}]
}]
}
Inside panel I am taking grid.
Can anybody please help me.?
I am writing data outside the scope and now its working fine.
My complete code is.
var myData = [
['FFPE Slide',2,'eSample'],
['Plasma',2,'eSample'],
['Whole Blood',2,'eSample'] ];
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'stype'},
{name: 'scnt'},
{name: 'src'}
]
});
store.loadData(myData);
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: "Sample Type", width: 75, sortable: true, dataIndex: 'stype'},
{header: "Subjects Count", width: 75, sortable: true, dataIndex: 'scnt'},
{header: "Source", width: 75, sortable: true, dataIndex: 'src'}
],
stripeRows: true,
autoExpandColumn: 'company',
height:150,
width:150,
title:'Detailed Counts'
});
This is working fine.
Remove the root config (root:'records') in the store.. or try to add records property to the data object. Remove the reader as well

Need to align the check box, add multiple records and view the datefiled while edit in extjs4?

I need to add one or more records at a time in grid. After click on the add button i can able to add one record at a time. but he thing is i need to add multiple record at a time.
I tried to use both clickToEdit, clicksToMoveEditor but not working.
I need to align the check box in center while edit the grid.
Main thing is while i able edit in grid i can able to only the fields except startdate and end date column. it not rendered from the database.
Can anyone help me if there is wrong config params for the grid.
this.mcmRowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1,
autoCancel: true,
listeners: {
scope: this,
canceledit: function(editor, event) {
if(!editor.record.get('FocusMarketId')) { //if it was a brand new record
console.log("edit");
console.log(editor.record.get('Id'));
var sm = this.mcmGridPanel.getSelectionModel();
App.mcmFocusMarketStore.remove(sm.getSelection());
if(sm.getCount()) {
sm.select(0);
}
}
}
}
});
var addFocusMarket = function(focusmarket) {
this.mcmRowEditing.cancelEdit();
console.log("add focus market");
var record = new Sch.model.Resource({
Id: focusmarket ? focusmarket.Id : '',
Origin: focusmarket ? focusmarket.Origin : '',
Destination: focusmarket ? focusmarket.Destination: '',
CabinClass: focusmarket ? focusmarket.CabinClass: '',
StartAvailability: focusmarket ? focusmarket.startAvailability: '',
EndAvailability: focusmarket ? focusmarket.endAvailability: ''
});
console.log("records-->"+record);
App.mcmFocusMarketStore.insert(0, record);
this.mcmRowEditing.startEdit(0, 0);
this.mcmHasChanges = true;
};
this.mcmGridPanel = new Ext.grid.GridPanel({
height: 240,
width: 540,
title: 'Results',
store: App.mcmFocusMarketStore,
multiSelect: true,
x: 0,
y: 170,
columns: [
{ xtype: 'gridcolumn', text: 'Flight#', sortable: true, width: 100, dataIndex: 'FlightNumber', hidden: true,
editor: {
xtype: 'textfield',
maxLength: 4,
minLength: 4,
maxChars: 4,
}
},
{ xtype: 'gridcolumn', text: 'Origin', sortable: true, width: 100, dataIndex: 'Origin',
editor: {
xtype: 'textfield',
maxLength: 3,
minLength: 3,
maxChars: 3,
}
},
{ xtype: 'gridcolumn', text: 'Destination', sortable: true, width: 100, dataIndex: 'Destination',
editor: {
xtype: 'textfield',
maxLength: 3,
minLength: 3,
maxChars: 3,
}
},
{ xtype: 'gridcolumn', text: 'Cabin', sortable: true, width: 80, dataIndex: 'CabinClass',
editor: {
xtype: 'textfield',
maxLength: 1,
minLength: 1,
maxChars: 1,
}
},
{ xtype: 'datecolumn', text: 'Start Date', width: 100, dataIndex: 'StartAvailability', format: 'd/m/Y',
editor: {
xtype: 'datefield',
format: 'd/m/Y'
}
},
{ xtype: 'datecolumn', text: 'End Date', width: 100, dataIndex: 'EndAvailability', format: 'd/m/Y',
editor: {
xtype: 'datefield',
format: 'd/m/Y'
}
},
{
xtype: 'gridcolumn',
text: 'Delete?',
header: 'Delete?',
dataIndex: 'delete',
width: 60,
renderer: function (value, meta, record, rowIndex, colIndex) {
return '<center><input type="checkbox" id="Delete-' + rowIndex + '"/></center>';
},
listeners :
{
checkchange : function(column, recordIndex, checked)
{
this.mcmRemoveFocusMarket();
//or send a request
}
},
handler: function() {
/* var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
store.remove(sm.getSelection());
if (store.getCount() > 0) {
sm.select(0);
}*/
},
//disabled: true,
editor: {
xtype: 'checkbox'
}
}
],
tbar: [
{
text: 'Add',
tooltip: 'Add Focus Market',
iconCls: 'icon-shift-add',
scope: me,
handler: function() {
addFocusMarket.call(me);
}
}
],
plugins: [ this.mcmRowEditing ],
1.)
Do not add records into the grid directly.
Add data to the backend and reload the store of the grid then to show newly added data in the grid
2)
Alignment should be fixed with the use of checkcolumn
3)
I am not really sure what you are asking here.
Editing seems to work from what I understand.
Are you sure you are providing data for datecolumns in the right format (date: '2014/02/04')?
// Presuming you are using ExtJS 4...
this.mcmRowEditing = Ext.create('Ext.grid.plugin.RowEditing',
{
clicksToEdit: 1,
autoCancel: true,
listeners: {
scope: this,
edit: function(editor, context, eOpts){
// do your editing processing here
// lookup api documentation for params
}
}
});
this.mcmGridPanel = Ext.create('Ext.grid.Panel',
{
height: 240,
width: 540,
title: 'Results',
store: App.mcmFocusMarketStore,
multiSelect: true,
x: 0,
y: 170,
columns: [
{ xtype: 'gridcolumn', text: 'Flight#', sortable: true, width: 100, dataIndex: 'FlightNumber', hidden: true,
editor: {
xtype: 'textfield',
maxLength: 4,
minLength: 4,
maxChars: 4,
}
},
{ xtype: 'gridcolumn', text: 'Origin', sortable: true, width: 100, dataIndex: 'Origin',
editor: {
xtype: 'textfield',
maxLength: 3,
minLength: 3,
maxChars: 3,
}
},
{ xtype: 'gridcolumn', text: 'Destination', sortable: true, width: 100, dataIndex: 'Destination',
editor: {
xtype: 'textfield',
maxLength: 3,
minLength: 3,
maxChars: 3,
}
},
{ xtype: 'gridcolumn', text: 'Cabin', sortable: true, width: 80, dataIndex: 'CabinClass',
editor: {
xtype: 'textfield',
maxLength: 1,
minLength: 1,
maxChars: 1,
}
},
{ xtype: 'datecolumn', text: 'Start Date', width: 100, dataIndex: 'StartAvailability', format: 'd/m/Y',
editor: {
xtype: 'datefield',
format: 'd/m/Y'
}
},
{ xtype: 'datecolumn', text: 'End Date', width: 100, dataIndex: 'EndAvailability', format: 'd/m/Y',
editor: {
xtype: 'datefield',
format: 'd/m/Y'
}
},
{ xtype: 'checkcolumn', text: 'Delete?', width: 60, dataIndex: 'delete', format: 'd/m/Y',
// Make checkboxes of checkcolumn unchangeable. Editor can change state then.
// Handle changes in CellEditing/RowEditing 'edit' event for consistent behavior with other columns.
listeners: {beforecheckchange: function(column, recordIndex, checked){return false}}
editor: {xtype: 'checkbox'},
// checkcolumn aligns center by default use the 2 lines below instead if you want to align left
//align: 'left',
//editor: {xtype: 'checkbox', style: 'text-align:left; display:inline; padding-left:10px;'},
}
],
tbar: [
{
text: 'Add',
tooltip: 'Add Focus Market',
iconCls: 'icon-shift-add',
scope: me,
handler: function() {
addFocusMarket.call(me);
}
}
],
plugins: [ this.mcmRowEditing ]
});

How can I get the id in Extjs checkcolumn?

Im tiro in Extjs.
That is my model:
Ext.define('CatModel', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [{
name: "name",
convert: undefined
}, {
name: "id",
convert: undefined
}]
});
store:
var store = Ext.create('Ext.data.TreeStore', {
model:'CatModel',
root: {
expanded: true
},
proxy: {
type: 'ajax',
reader: 'json',
url: 'item_access.jsp?fullpage=true&show_cat=1'
}
});
and treePanel:
var treePanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel',
title: 'Sample Layouts',
region:'north',
split: true,
height: 560,
minSize: 150,
rootVisible: false,
autoScroll: true,
store: store,
columns: [
{
xtype: 'treecolumn',
text: 'name',
flex: 2.5,
sortable: true,
dataIndex: 'name'
},
{
text: 'id',//I want to get this id
flex: 1,
dataIndex: 'id',
sortable: true
}
, {
xtype: 'checkcolumn',
text: 'Done',
dataIndex: 'done',
width: 55,
stopSelection: false,
menuDisabled: true,
listeners:{
checkchange:function(cc,ix,isChecked){
//alert(isChecked);
//I want to get this row id in here
}
}
}]
});
In checkchange function there are three parameter one unknown,two is index, and three is check status ...
So how can I get the the same row id where I check the checkbox??
Can I find that id number by checkbox row index??
You should be able to get the record from the TreeView with the row index, and then get the id property from it:
listeners:{
checkchange: function(col, idx, isChecked) {
var view = treePanel.getView(),
record = view.getRecord(view.getNode(idx));
console.log(record.get('id'));
}
}

Categories