We Keep Coding

Extjs 4.1 - grid with drag & drop, vertical scroll doesn't work

I have 2 grids on a window which support drag and drop each by himself and also between each other.
I can't get the vertical scroll to work when dragging above the first row in the grid or below the last row in the grid.
currently, i must first scroll all the way down if i want to drag the record to the bottom of the grid.
using containerScroll didn't solve the problem.
Ext.define('MyApp.view.DDFieldsGrid', {
extend: 'Ext.grid.Panel',
xtype: 'ddfieldsgrid',
hideHeaders: true,
multiSelect: true,
autoScroll: true,
markDirty: false,
columns: [
{ dataIndex: 'item', flex: 1 }
],
viewConfig: {
plugins: {
containerScroll: true,
ptype: 'gridviewdragdrop',
ddGroup: 'firstGridDDGroup'
}
}
});
this.mainWin = Ext.create('Ext.window.Window', {
layout: 'centered',
title: 'Blotter Fields',
resizable: false,
closeAction: 'hide',
hidden: true,
shadow: true,
tbar: [{
xtype: 'combo',
fieldLabel: 'Fields Type',
id: 'comboCategories',
editable: false,
queryMode: 'local',
selectOnFocus: true,
forceSelection: true,
iconCls: 'no-icon',
triggerAction: 'all',
store: categoreyItems,
listeners: {
select: function (ele, newValue, oldValue) {
var category = this.valueModels[0].index;
var store = Ext.getStore('availableFields');
store.filterBy(function (record) {
return category == 0 /*All*/ || record.get('category') === category;
}, this);
}
}
}, ' ', {
xtype: 'checkbox',
fieldLabel: 'Show Details field',
margin: '0 10 0 20',
//hidden: this.customizationModel._customizationView.detailsCustomOptions.showDetailsFieldsOption == false,
checked: this.customizationModel._customizationView.detailsCustomOptions.showDetailsFieldsOption,
listeners: {
click: {
fn: this.onShowDetailsField,
scope: this
}
}
}, ' ', {
xtype: 'checkbox',
fieldLabel: 'Show custom fields',
margin: '0 10 0 20',
//hidden: this.customizationModel._customizationView.detailsCustomOptions.showUserCustomFieldsOptions == false,
checked: this.customizationModel._customizationView.detailsCustomOptions.showUserCustomFieldsOptions,
listeners: {
click: {
fn: this.onShowCustomFields,
scope: this
}
}
}],
dockedItems: [
{
xtype: 'toolbar',
flex: 1,
dock: 'bottom',
layout: {
pack: 'end',
type: 'hbox'
},
items: [
{
xtype: 'button',
text: 'Cancel',
listeners: {
click: {
fn: this.onCancelSettings,
scope: this
}
}
},
{
xtype: 'button',
text: 'OK',
listeners: {
click: {
fn: this.onAcceptSettings,
scope: this
}
}
}
]
}
],
items: [{
store: availableFieldsStore,
title: 'Available Fields'
}, {
store: selectedFieldsStore,
title: 'Selected Fields'
}],
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
xtype: 'ddfieldsgrid',
height: 200,
margin: 8,
width: 300
}
});

Extjs: How to populate form with values from grid row selection

I have a form and a grid. I'm trying to allow the user to select one of the rows in the grid then click a button in order to load the data from the row into the form.
Here is my view so far:
Ext.define('Project.view.main.Main', {
extend: 'Ext.panel.Panel',
autoScroll: true,
height: 600,
layout: 'border',
bodyBorder: false,
defaults: {
collapsible: true,
split: true,
bodyPadding: 10
},
initComponent: function () {
this.items = [
{
collapsible: false,
region: 'center',
margin: '5 0 0 0',
title: 'Record Event',
id: 'SaveEvent',
bodyPadding: 5,
layout: 'column',
items: [{
xtype: 'fieldset',
title: 'Event Information',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Event',
layout: 'hbox',
defaults: {
hideLabel: 'true'
},
items: [{
xtype: 'combobox',
forceSelection: true,
name: 'eventTypeId',
width: 300,
store: {
type: 'events'
},
valueField: 'eventTypeId',
tpl: Ext.create('Ext.XTemplate',
'<ul class="x-list-plain"><tpl for=".">',
'<li role="option" class="x-boundlist-item">{eventType}/{detail}</li>',
'</tpl></ul>'
),
// template for the content inside text field
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'{eventType}/{detail}',
'</tpl>'
),
allowBlank: false
}]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'textfield',
fieldLabel: 'Event Number',
name: 'name',
allowBlank: true
}
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'datefield',
fieldLabel: 'Date',
format: 'Y-m-d',
name: 'startDate',
invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
emptyText: 'Start',
allowBlank: false
},
{
xtype: 'datefield',
format: 'Y-m-d',
name: 'endDate',
invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
margin: '0 0 0 6',
emptyText: 'End',
allowBlank: false
},
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'tagfield',
fieldLabel: 'Environment',
name: 'environmentIds',
width: 500,
store: {
type: 'environments'
},
valueField: 'environmentId',
displayField: 'environmentName',
allowBlank: false
}]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'tagfield',
fieldLabel: 'Geographic Location',
name: 'geographicLocationIds',
width: 500,
store: {
type: 'locations'
},
valueField: 'locationId',
tpl: Ext.create('Ext.XTemplate',
'<ul class="x-list-plain"><tpl for=".">',
'<li role="option" class="x-boundlist-item">{region}/Sub region: {subRegion}</li>',
'</tpl></ul>'
),
labelTpl: '{region}/Sub region: {subRegion}',
allowBlank: false
}
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'textfield',
fieldLabel: 'Geographic Location (Out of Area)',
name: 'geographicLocationNotes',
width: 400,
emptyText: 'e.g. 30.2500 N, 97.7500 W',
allowBlank: true
}
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'combobox',
forceSelection: true,
fieldLabel: 'Organization',
name: 'organizationId',
store: {
type: 'organizations'
},
valueField: 'organizationId',
displayField: 'displayName',
allowBlank: false
}
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'textarea',
fieldLabel: 'Event Notes',
name: 'eventNotes',
width: 500,
height: 74
}
]
},
{
xtype: 'textarea',
fieldLabel: 'Event ID',
name: 'eventId',
hidden: true
}
]
}],
buttons: [
{
text: 'Save Event',
handler: function() {
var form = this.up('form'); // get the form panel
var formData = form.getValues();
if (form.isValid()) { // make sure the form contains valid data before submitting
Ext.Ajax.request({
url: 'api/events/create',
method:'POST',
headers: { 'Content-Type': 'application/json' },
params : Ext.JSON.encode(formData),
success: function(form, action) {
Ext.Msg.alert('Success', action.result);
},
failure: function(form, action) {
Ext.Msg.alert('Submission failed', 'There was an error.', action.result);
}
});
} else { // display error alert if the data is invalid
Ext.Msg.alert('Submit Failed', 'Please make sure you have made selections for each required field.')
}
}
}
]
},
{
title: 'Created Events',
region: 'east',
floatable: false,
margin: '5 0 0 0',
width: 500,
minWidth: 100,
maxWidth: 1000,
collapsed: true,
xtype: 'gridpanel',
store: {
type: 'createdEvents'
},
columns: [
{
header: 'Database ID',
dataIndex: 'eventId'
},
{
header: 'Event',
dataIndex: 'eventTypeId',
renderer: function(value, p, r) {
{return r.data['eventTypeName'] + '/' + r.data['eventDetail']}
}
},
{
header: 'Event Number',
dataIndex: 'name'
},
{
header: 'Start Date',
//this will be a problem because the form date is formatted as yyyy-mm-dd
dataIndex: 'startDateYear',
renderer: function(value, p, r) {
{return r.data['startDateYear'] + '-' + r.data['startDateMonth'] + '-' + r.data['startDateDay']}
}
},
{
header: 'End Date',
dataIndex: 'endDateYear',
renderer: function(value, p, r) {
{return r.data['endDateYear'] + '-' + r.data['endDateMonth'] + '-' + r.data['endDateDay']}
}
},
{
header: 'environments',
dataIndex: 'environmentIds',
renderer: function(value, p, r) {
{return r.data['environmentNames']}
}
},
{
header: 'Geographic Location',
dataIndex: 'geographicLocationIds',
renderer: function(value, p, r) {
{ return r.data['geographicLocationRegion'] + '/' + r.data['geographicLocationSubregion'] }
}
},
{
header: 'Geographic Location Notes',
dataIndex: 'geographicLocationNotes'
},
{
header: 'Organization',
dataIndex: 'organizationID',
renderer: function(value, p, r) {
{return r.data['organizationDisplayName']}
}
},
{
header: 'Event Notes',
dataIndex: 'eventNotes'
}
],
tbar: [{
text: 'Add new record to event',
scope: this,
handler: this.onAddClick
}]
},
];
this.callParent();
},
onAddClick: function(sm, row, rec){
//how to populate the form with the grid row data?
}
});
I've tried this solution, but it didn't work for me:
http://examples.sencha.com/extjs/6.0.0/examples/kitchensink/#form-grid

Your example does not work because there is no form xtype definition nor Ext.form.Panel presented.
Please look carefully to that Sencha - KitchenSink. You will see that there is definition of Ext.form.Panel since KitchenSink.view.form.FormGrid extends from that.
So your first step should be:
Change this
Ext.define('Project.view.main.Main', {
extend: 'Ext.panel.Panel',
to
Ext.define('Project.view.main.Main', {
extend: 'Ext.form.Panel',
and this is example that could potentially works:
Ext.define('Project.view.main.Main', {
extend: 'Ext.form.Panel',
autoScroll: true,
height: 600,
layout: 'border',
bodyBorder: false,
defaults: {
collapsible: true,
split: true,
bodyPadding: 10
},
initComponent: function () {
this.items = [
{
collapsible: false,
region: 'center',
margin: '5 0 0 0',
title: 'Record Event',
id: 'SaveEvent',
bodyPadding: 5,
layout: 'column',
items: [{
xtype: 'fieldset',
title: 'Event Information',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Event',
layout: 'hbox',
defaults: {
hideLabel: 'true'
},
items: [{
xtype: 'combobox',
forceSelection: true,
name: 'eventTypeId',
width: 300,
store: {
type: 'events'
},
valueField: 'eventTypeId',
tpl: Ext.create('Ext.XTemplate',
'<ul class="x-list-plain"><tpl for=".">',
'<li role="option" class="x-boundlist-item">{eventType}/{detail}</li>',
'</tpl></ul>'
),
// template for the content inside text field
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'{eventType}/{detail}',
'</tpl>'
),
allowBlank: false
}]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'textfield',
fieldLabel: 'Event Number',
name: 'name',
allowBlank: true
}
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'datefield',
fieldLabel: 'Date',
format: 'Y-m-d',
name: 'startDate',
invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
emptyText: 'Start',
allowBlank: false
},
{
xtype: 'datefield',
format: 'Y-m-d',
name: 'endDate',
invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
margin: '0 0 0 6',
emptyText: 'End',
allowBlank: false
},
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'tagfield',
fieldLabel: 'Environment',
name: 'environmentIds',
width: 500,
store: {
type: 'environments'
},
valueField: 'environmentId',
displayField: 'environmentName',
allowBlank: false
}]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'tagfield',
fieldLabel: 'Geographic Location',
name: 'geographicLocationIds',
width: 500,
store: {
type: 'locations'
},
valueField: 'locationId',
tpl: Ext.create('Ext.XTemplate',
'<ul class="x-list-plain"><tpl for=".">',
'<li role="option" class="x-boundlist-item">{region}/Sub region: {subRegion}</li>',
'</tpl></ul>'
),
labelTpl: '{region}/Sub region: {subRegion}',
allowBlank: false
}
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'textfield',
fieldLabel: 'Geographic Location (Out of Area)',
name: 'geographicLocationNotes',
width: 400,
emptyText: 'e.g. 30.2500 N, 97.7500 W',
allowBlank: true
}
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'combobox',
forceSelection: true,
fieldLabel: 'Organization',
name: 'organizationId',
store: {
type: 'organizations'
},
valueField: 'organizationId',
displayField: 'displayName',
allowBlank: false
}
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'textarea',
fieldLabel: 'Event Notes',
name: 'eventNotes',
width: 500,
height: 74
}
]
},
{
xtype: 'textarea',
fieldLabel: 'Event ID',
name: 'eventId',
hidden: true
}
]
}],
buttons: [
{
text: 'Save Event',
handler: function() {
var form = this.up('form'); // get the form panel
var formData = form.getValues();
if (form.isValid()) { // make sure the form contains valid data before submitting
Ext.Ajax.request({
url: 'api/events/create',
method:'POST',
headers: { 'Content-Type': 'application/json' },
params : Ext.JSON.encode(formData),
success: function(form, action) {
Ext.Msg.alert('Success', action.result);
},
failure: function(form, action) {
Ext.Msg.alert('Submission failed', 'There was an error.', action.result);
}
});
} else { // display error alert if the data is invalid
Ext.Msg.alert('Submit Failed', 'Please make sure you have made selections for each required field.')
}
}
}
]
},
{
title: 'Created Events',
region: 'east',
floatable: false,
margin: '5 0 0 0',
width: 500,
minWidth: 100,
maxWidth: 1000,
collapsed: true,
xtype: 'gridpanel',
store: {
type: 'createdEvents'
},
columns: [
{
header: 'Database ID',
dataIndex: 'eventId'
},
{
header: 'Event',
dataIndex: 'eventTypeId',
renderer: function(value, p, r) {
{return r.data['eventTypeName'] + '/' + r.data['eventDetail']}
}
},
{
header: 'Event Number',
dataIndex: 'name'
},
{
header: 'Start Date',
//this will be a problem because the form date is formatted as yyyy-mm-dd
dataIndex: 'startDateYear',
renderer: function(value, p, r) {
{return r.data['startDateYear'] + '-' + r.data['startDateMonth'] + '-' + r.data['startDateDay']}
}
},
{
header: 'End Date',
dataIndex: 'endDateYear',
renderer: function(value, p, r) {
{return r.data['endDateYear'] + '-' + r.data['endDateMonth'] + '-' + r.data['endDateDay']}
}
},
{
header: 'environments',
dataIndex: 'environmentIds',
renderer: function(value, p, r) {
{return r.data['environmentNames']}
}
},
{
header: 'Geographic Location',
dataIndex: 'geographicLocationIds',
renderer: function(value, p, r) {
{ return r.data['geographicLocationRegion'] + '/' + r.data['geographicLocationSubregion'] }
}
},
{
header: 'Geographic Location Notes',
dataIndex: 'geographicLocationNotes'
},
{
header: 'Organization',
dataIndex: 'organizationID',
renderer: function(value, p, r) {
{return r.data['organizationDisplayName']}
}
},
{
header: 'Event Notes',
dataIndex: 'eventNotes'
}
],
listeners: {
scope: this,
selectionchange: this.onSelectionChange
}
}
];
this.callParent();
},
onSelectionChange: function(model, records) {
var rec = records[0];
if (rec) {
this.getForm().loadRecord(rec);
}
}
});

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 ]
});

Data binding example extjs sencha

I've a grid example that i want to make it look like this url below
http://docs.sencha.com/extjs/4.2.2/#!/example/grid/binding.html
The grid code is :
var grid_modal = Ext.create('Ext.grid.Panel',
{
width: '100%',
height: 450,
frame: true,
loadMask: true,
collapsible: false,
title: 'Detail data',
store: list_data,
columns: [
{
header: 'Number',
width: 130,
sortable: true,
dataIndex: 'doc_no',
xtype: 'templatecolumn',
tpl: '{doc_no}<br/>{pp_id}'
}, {
header: 'Date.',
width: 100,
sortable: true,
dataIndex: 'pp_date',
xtype: 'datecolumn',
format:'d-m-Y'
}, {
header: 'Vendor',
width: 160,
sortable: true,
dataIndex: 'org_order',
xtype: 'templatecolumn',
tpl: '{org_order}'
}],
dockedItems:
[{
xtype: 'pagingtoolbar',
store: list_data,
dock: 'bottom',
displayInfo: true
},{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
cls: 'contactBtn',
scale: 'small',
text: 'Add',
handler: function(){
window.location = './pp/detail/'
}
},'->','Periode :',
set_startdate('sdatepp',start),
's.d',
set_enddate('edatepp',end),
'-',
{
xtype : 'textfield',
name : 'find_pp',
id : 'find_pp',
emptyText: 'Keywords' ,
listeners: {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
onFindPP('find_pp','sdatepp','edatepp')
}
}
}
}]
}],
});
I don't understand how to add data binding to below grid that i make. so it makes look like same as the example on extjs doc. please help me find out how to make the data grid binding. thank you for your attention and help.

public ActionResult ExPage()
{
return View();
}
public JsonResult GetData()
{
return Json(db.Products.ToList().Select(x => new Products { ProductID = x.ProductID, ProductName = x.ProductName, UnitPrice = x.UnitPrice, UnitsInStock = x.UnitsInStock }), JsonRequestBehavior.AllowGet);
}
<script type="text/javascript">
Ext.onReady(function () {
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['ProductID', 'ProductName', 'UnitPrice', 'UnitsInStock'],
proxy: {
type: 'ajax',
url: '/Home/GetData'
}
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
title: 'Products',
columns:
[
{ text: 'Id', dataIndex: 'ProductID', width: 50 },
{ text: 'Name', dataIndex: 'ProductName', width: 200 },
{ text: 'Price', dataIndex: 'UnitPrice', width: 80 },
{ text: 'Stock', dataIndex: 'UnitsInStock', width: 60 }
],
width: 450,
renderTo: Ext.getBody()
});
});

Extjs Form with dynamically shown/hidden fields on combo selection

Using Ext 4.1 I'd like to create a form with select combo, and depending on the currently selected option different subfields would be shown/hidden. Example below :
Right now I have a combo and a set of two date fields that are hidden on render. When a combo value is changed I have an event listener that will display those fields. But I'm not sure if it's the best method to tackle this. Would a fieldset work better in this case ?
Ext.define('TooltipForm', {
extend: 'Ext.form.Panel',
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
bodyPadding: 10,
initComponent: function(){
this.on('afterrender', this.onAfterRender, this);
this.callParent(arguments);
},
onAfterRender: function(){
this.items.each(function(item){
item.on('change', this.onChange, this);
}, this);
},
onChange: function(field, newValue){
if (field.name === 'range'){
switch(newValue){
case 'fit':
console.log('fit view');
break;
case 'complete':
console.log('complete view');
break;
case 'date range':
console.log('date range view');
break;
}
}
},
fieldDefaults: {
labelAlign: 'top',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
items: [
{
width: 50,
xtype: 'combo',
mode: 'local',
value: 'fit',
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: me.rangeFieldLabel,
name: 'range',
queryMode: 'local',
store: ['fit', 'complete', 'date range']
},
{
width:50,
xtype: 'datefield',
fieldLabel: 'date from',
name: 'datefrom',
hidden: true
},
{
width:50,
xtype: 'datefield',
fieldLabel: 'date to',
name: 'dateto',
hidden:true,
}
]
});

Something along these lines:
Ext.define('TooltipForm', {
extend: 'Ext.form.Panel',
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
bodyPadding: 10,
rangeFieldLabel: 'Foo',
initComponent: function() {
Ext.apply(this, {
fieldDefaults: {
labelAlign: 'top',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
items: [{
itemId: 'range',
width: 50,
xtype: 'combo',
value: 'fit',
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: this.rangeFieldLabel,
name: 'range',
queryMode: 'local',
store: ['fit', 'complete', 'date range']
}, {
itemId: 'dateFrom',
width: 50,
xtype: 'datefield',
fieldLabel: 'date from',
name: 'datefrom',
hidden: true
}, {
itemId: 'dateTo',
width: 50,
xtype: 'datefield',
fieldLabel: 'date to',
name: 'dateto',
hidden: true,
}]
});
this.callParent(arguments);
this.child('#range').on('change', this.onChange, this);
},
onChange: function(field, newValue) {
switch(newValue) {
case 'fit':
console.log('fit view');
// do something else
break;
case 'complete':
this.child('#dateFrom').hide();
this.child('#dateTo').hide();
break;
case 'date range':
this.child('#dateFrom').show();
this.child('#dateTo').show();
break;
}
},
});
Ext.onReady(function(){
new TooltipForm({
renderTo: document.body
});
});