Data binding example extjs sencha - javascript

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

Related

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

How to POST a grid within a form in ExtJS

I have a form that has comboboxes, tagfields, date pickers, etc., and a grid. Each of these elements has a different store. The user is going to make selections from the comboboxes, etc,. and enter values into the grid. Then the values from the grid and other form elements are all sent on a POST to the server. I know how to POST the data from the comboboxes, tagfields, and date pickers. However, I don't know how to send the data in the grid with the form. Here is the form view:
Ext.define('ExtTestApp.view.main.List', {
extend: 'Ext.form.Panel',
xtype: 'cell-editing',
frame: true,
autoScroll: true,
title: 'Record Event',
bodyPadding: 5,
requires: [
'Ext.selection.CellModel',
'ExtTestApp.store.Personnel'
],
layout: 'column',
initComponent: function(){
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
});
Ext.apply(this, {
//width: 550,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%',
msgTarget: 'side'
},
items: [{
xtype: 'fieldset',
//width: 400,
title: 'Event Information',
//height: 460,
//defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Event',
layout: 'hbox',
defaults: {
hideLabel: 'true'
},
items: [{
xtype: 'combobox',
name: 'eventTypeId',
width: 300,
//flex: 1,
store: {
type: 'events'
},
valueField: 'eventTypeId',
// Template for the dropdown menu.
// Note the use of the "x-list-plain" and "x-boundlist-item" class,
// this is required to make the items selectable.
allowBlank: false
}
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'datefield',
fieldLabel: 'Date',
format: 'Y-m-d',
name: 'startDate',
//msgTarget: 'under', //location of error message, default is tooltip
invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
//flex: 1,
emptyText: 'Start',
allowBlank: false
},
{
xtype: 'datefield',
format: 'Y-m-d',
name: 'endDate',
//msgTarget: 'under', //location of error message
invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
//flex: 1,
margin: '0 0 0 6',
emptyText: 'End',
allowBlank: false
}
]
}]
},
{
xtype: 'fieldset',
//height: 460,
title: 'Platform Information',
//defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [
{
xtype: 'fieldcontainer',
layout: 'hbox',
fieldLabel: 'Platform',
//combineErrors: true,
defaults: {
hideLabel: 'true'
},
items: [
{
xtype: 'combobox',
name: 'platformId',
store: {
type: 'platforms'
},
valueField: 'platformId',
allowBlank: false
}
]
}
]
},
{
xtype: 'fieldcontainer',
layout: 'hbox',
fieldLabel: 'Software Type(s)',
//combineErrors: true,
defaults: {
hideLabel: 'true'
},
items: [
{
xtype: 'tagfield',
width: 400,
//height: 50,
fieldLabel: 'Software Type(s)',
name: 'softwareTypeIds',
store: {
type: 'softwareTypes'
},
labelTpl: '{softwareName} - {manufacturer}',
valueField: 'softwareTypeId',
allowBlank: false
}
]
},
{
xtype: 'gridpanel',
layout: 'anchor',
defaults: {
anchor: '100%'
},
width: 1300,
//columnWidth: 0.78,
//title: 'Metrics',
plugins: [this.cellEditing],
title: 'Personnel',
store: {
type: 'personnel'
},
columns: [
{ text: 'Name', dataIndex: 'name', editor: 'textfield' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone', flex: 1 }
]
}
],
buttons: [
{
text: 'Save Event',
handler: function() {
var form = this.up('form'); // get the form panel
// 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(form.getValues()),
success: function(form, action) {
Ext.Msg.alert('Success', action.result);
},
failure: function(form, action) {
//console.log(form.getForm().getValues());
Ext.Msg.alert('Submission failed', 'Please make sure you selected an item for each required field.', 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.')
// }
}
}
]
});
this.callParent();
}
});
var grid = Ext.ComponentQuery.query('grid')[0];
Here is the store for the grid:
Ext.define('ExtTestApp.store.Personnel', {
extend: 'Ext.data.Store',
alias: 'store.personnel',
fields: [
'name', 'email', 'phone'
],
data: { items: [
{ name: 'Jean Luc', email: "jeanluc.picard#enterprise.com", phone: "555-111-1111" },
{ name: 'Worf', email: "worf.moghsson#enterprise.com", phone: "555-222-2222" },
{ name: 'Deanna', email: "deanna.troi#enterprise.com", phone: "555-333-3333" },
{ name: 'Data', email: "mr.data#enterprise.com", phone: "555-444-4444" }
]},
autoLoad: true,
proxy: {
type: 'memory',
api: {
update: 'api/update'
},
reader: {
type: 'json',
rootProperty: 'items'
},
writer: {
type: 'json',
writeAllFields: true,
rootProperty: 'items'
}
}
});
Ideally, you would need to create a custom "grid field" so that the grid data is picked up on form submit like any other field.
You can also use this workaround: in the "Save Event" button handler, dig out the grid store and fish data out of it:
var gridData = [];
form.down('gridpanel').store.each(function(r) {
gridData.push(r.getData());
});
Then get the rest of the form data and put the grid data into it:
var formData = form.getValues();
formData.gridData = gridData;
Finally, include it all in your AJAX call:
params: Ext.JSON.encode(formData)

Difficulty in passing selected row from grid to new window in extjs

I have a grid panel and when the user selects the row and clicks the edit button or dbl clicks the row, I want to send the selected row to the new window. But I am having trouble in sending the data.
Here is my grid panel. (List.js)
Ext.define('MyApp.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',
require: [ 'MyApp.view.student.StudentForm' ],
title: 'Student Records',
scrollable: true,
margin: 20,
layout: {
type: 'vbox',
align: 'stretch'
},
reference: 'studentGrid',
frame: true,
collapsible: true,
store: 'StudentStore',
collapsible: true,
columns: [
{
text: 'Name',
dataIndex: 'name',
flex: 1
},
{
text: 'Address',
dataIndex: 'address',
flex: 1
},
{
text: 'Phone',
dataIndex: 'phone',
flex: 1
},
{
text: 'Email',
dataIndex: 'email',
flex: 1
},
{
text: 'Faculty',
dataIndex:'faculty',
flex: 1
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Add',
iconCls: 'fa fa-plus',
listeners: {
click: 'onAdd'
}
},
{
xtype: 'button',
text: 'Edit',
iconCls: 'fa fa-edit',
id: 'editButton',
listeners: {
click: 'onEdit'
}
},
{
xtype: 'button',
text: 'Delete',
iconCls: 'fa fa-trash-o',
bind: {
disabled: '{ !mainlist.selection }'
},
listeners: {
click: 'onDelete'
}
}]
}
],
// toolbar for our store filter field
tbar: [{
xtype: 'textfield',
fieldLabel: 'Search Student',
emptyText: '...type to filter',
width: 300,
listeners: {
change: 'onSearch'
},
triggers: {
clear: {
cls: 'x-form-clear-trigger',
handler: function(){
this.reset();
}
}
}
}]
});
And this my Controller (MainController.js)
createDialog: function(record)
{
if (record)
{
var form = Ext.create('MyApp.view.student.StudentForm');
form.loadRecord(record);
form.show();
}
Ext.create('MyApp.view.student.StudentForm').show();
},
onEdit: function(button, e, options){
var row = button.up('mainlist').getSelection();
debugger;
this.createDialog(row[0]);
},
And here is the pop up window where the data has to be loaded(StudentForm.js)
Ext.define('MyApp.view.student.StudentForm', {
extend: 'Ext.window.Window',
xtype: 'student-form',
height: 400,
width: 500,
layout: {
type: 'fit'
},
reference: 'form',
title: 'Add Student',
closable: true,
modal: true,
items: [{
xtype: 'form',
id : 'formId',
bodyPadding: 5,
modelValidation : true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'fieldset',
flex: 1,
title: 'Student Information',
layout: 'anchor',
defaultType: 'textfield',
defaults: {
anchor: '100%',
msgTarget: 'side'
},
items: [
{
xtype: 'hiddenfield',
name: 'id',
fieldLabel: 'Label'
},
{
fieldLabel: 'Name',
name: 'name'
},
{
fieldLabel: 'Address',
name: 'address'
},
{
fieldLabel: 'Phone',
name: 'phone'
},
{
fieldLabel: 'Email',
name: 'email'
},
{
xtype: 'combo',
fieldLabel: 'Faculty',
name: 'facultyName',
queryMode: 'local',
displayField: 'facultyName',
valueField: 'facultyName',
store: {
fields: ['facultyName'],
data: [{
facultyName: 'computing'
}, {
facultyName: 'multimedia'
}, {
facultyName: 'networking'
}]
}
}
]
}],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
layout: {
pack: 'end',
type: 'hbox'
},
items: [
{
xtype: 'button',
text: 'Save',
iconCls: 'fa fa-check',
listeners: {
click: 'onSave'
}
},
{
xtype: 'button',
text: 'Cancel',
iconCls: 'fa fa-times',
listeners: {
click: 'onCancel'
}
}
]
}]
}]
});
What am I missing here?Any suggestions?
It says loadRecord() is not a function
Your MyApp.view.student.StudentForm is not actually a form. It is a window, hence there is no loadRecord method.
Instead of form.loadRecord(record); call form.down('form').loadRecord(record).
Remember, it is worth naming things what they are.

How to show grid in window with ExtJs?

Thare is problem in my ExtJs app.
I want to show grid in window. I says:
Column Model:
var markCm = new Ext.grid.ColumnModel({
columns:[{
header: 'Аннотация',
dataIndex: 'annotation',
width: 230,
},{
header: 'Дата',
dataIndex: 'mark_date',
width: 30
},{
header: 'Статус',
dataIndex: 'status',
width: 30
}],
defaults: {
flex: 1
}
});
console.log("1");
Grid:
var markGrid = new Ext.grid.GridPanel({
//store: markStore,
cm: markCm,
selModel: new Ext.grid.RowSelectionModel(),
stripeRows : true,
//height: 400,
//loadMask: true,
id: 'markGrid',
autoScroll: true,
});
Window:
console.log("2");
var markWin = new Ext.Window({
id: 'markWindow',
layout: 'fit',
title:'Спискок маркеров',
autoScroll:false,
//width:600,
items:[markGrid],
listeners:{
}
});
console.log("3");
markWin.show();
console.log("4");
And in firebug i see:
1
2
3
TypeError: this.ds is undefined
...ng(this.enableUrlEncode)?this.enableUrlEncode:"data"]=Ext.encode(h);k.params=l}e...
Whats can be wrong?
UPDATE
I try add store like in this example
var markGrid = new Ext.grid.GridPanel({
store: Ext.create('Ext.data.ArrayStore', {}),
cm: markCm,
selModel: new Ext.grid.RowSelectionModel(),
stripeRows : true,
//height: 400,
//loadMask: true,
id: 'markGrid',
autoScroll: true,
});
and get error:
1
TypeError: d[a] is not a constructor
...ng(this.enableUrlEncode)?this.enableUrlEncode:"data"]=Ext.encode(h);k.params=l}e...
You are missing a store. Every grid needs a store. (this.ds is undefined => ds is probably dataStore)
I don't know what version you are working with. (check that by typing Ext.versions.extjs.version in the console)
In case you are working with latest ExtJS version (4.x) it is preferred to use Ext.define and Ext.create instead of using the 'new' keyword :)
Here is a working fiddle
Ext.onReady(function () {
Ext.define('MyApp.model.Mark', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'annotation',
type: 'string'
}, {
name: 'mark_date',
type: 'date'
}, {
name: 'status',
type: 'string'
}]
});
Ext.define('MyApp.store.Marks', {
extend: 'Ext.data.Store',
//best to require the model if you put it in separate files
requires: ['MyApp.model.Mark'],
model: 'MyApp.model.Mark',
storeId: 'markStore',
data: {
items: [{
id: 1,
annotation: "Test",
mark_date: "2013-04-24 9:28:00",
status: "Done"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
itemId: 'markGrid',
store: Ext.create('MyApp.store.Marks'),
loadMask: true,
width: 400,
columns: [{
header: 'Аннотация',
dataIndex: 'annotation',
width: 230,
flex: 1
}, {
header: 'Дата',
dataIndex: 'mark_date',
width: 30,
flex: 1
}, {
header: 'Статус',
dataIndex: 'status',
width: 30,
flex: 1
}]
});
var window = Ext.create('Ext.window.Window', {
renderTo: Ext.getBody(),
items: [grid]
});
window.show();
});
UPDATE
You are using an example from Ext 4.x => Ext.data.ArrayStore
can't be created via Ext.create but use the new keyword in Ext versions < 4.x :)
http://jsfiddle.net/Vandeplas/BZUxa/
Ext.onReady(function () {
var markCm = new Ext.grid.ColumnModel({
columns: [{
header: 'Аннотация',
dataIndex: 'annotation',
width: 230,
}, {
header: 'Дата',
dataIndex: 'mark_date',
width: 30
}, {
header: 'Статус',
dataIndex: 'status',
width: 30
}],
defaults: {
flex: 1
}
});
var markGrid = new Ext.grid.GridPanel({
store: new Ext.data.ArrayStore({}),
cm: markCm,
selModel: new Ext.grid.RowSelectionModel(),
stripeRows: true,
//height: 400,
//loadMask: true,
id: 'markGrid',
autoScroll: true,
});
var markWin = new Ext.Window({
id: 'markWindow',
layout: 'fit',
title: 'Спискок маркеров',
autoScroll: false,
//width:600,
items: [markGrid],
listeners: {}
});
markWin.show();
});

GridPanel in Extjs is not loaded

I have this code in my application, but this not load any data. Data is accessible but wont display in my gridpanel, anyone have idea, why?
Ext.onReady(function () {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var btnAdd = new Ext.Button({
id: 'btnAdd',
text: 'Adicionar',
iconCls: 'application_add',
handler: function (s) {
}
});
var btnEdit = new Ext.Button({
id: 'btnEdit',
text: 'Editar',
iconCls: 'application_edit',
handler: function (s) {
}
});
var btnRemove = new Ext.Button({
id: 'btnRemove',
text: 'Apagar',
iconCls: 'application_delete',
handler: function (s) {
}
});
var tbar = new Ext.Toolbar({
items: [btnAdd, btnEdit, btnRemove]
});
var formFind = new Ext.FormPanel({
height: 100
});
var store = new Ext.data.JsonStore({
remoteSort: true,
idProperty: 'ContentId',
root: 'rows',
totalProperty: 'results',
fields: [
{ name: 'ContentId', type: 'int' },
{ name: 'Name' },
{ name: 'Version' },
{ name: 'State' },
{ name: 'CreatedDateTime' },
{ name: 'PublishedDateTime'},
{ name: 'CreatedByUser' },
{ name: 'PublishedByUser' }
],
proxy: new Ext.data.ScriptTagProxy({
url: '/Admin/ArticleList'
})
});
store.setDefaultSort('ContentId', 'desc');
var paging = new Ext.PagingToolbar({
store: store,
pageSize: 25,
displayInfo: true,
displayMsg: 'Foram encontrados {2} registos. Mostrando {0} de {1}',
emptyMsg: "Nenhum registo encontrado."
});
var grid = new Ext.grid.GridPanel({
id: 'grid',
height: 700,
store: store,
loadMask: true,
loadingText: 'Carregando...',
autoHeight: true,
cm: new Ext.grid.ColumnModel ([
{ id: 'ContentId', dataIndex: 'ContentId', header: 'Identif.', width: 60, sortable: true },
{ id: 'Name', dataIndex: 'Name', header: 'Titulo', width: 75, sortable: true },
{ id: 'Version', dataIndex: 'Version', header: 'Versão', width: 75, sortable: true },
{ id: 'State', dataIndex: 'State', header: 'Estado', width: 75, sortable: true },
{ id: 'CreatedDateTime', dataIndex: 'CreatedDateTime', header: 'Data de Criação', width: 85, sortable: true },
{ id: 'PublishedDateTime', dataIndex: 'PublishedDateTime', header: 'Data de Publicação', width: 75, sortable: true },
{ id: 'CreatedByUser', dataIndex: 'CreatedByUser', header: 'Criado por', width: 75, sortable: true },
{ id: 'PublishedByUser', dataIndex: 'PublishedByUser', header: 'Publicado por', width: 85, sortable: true }
]),
stripeRows: true,
viewConfig: { forceFit: true },
bbar: paging
});
var panel = new Ext.Panel({
id: 'panel',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: tbar,
items: [grid]
});
store.load(); // trigger the data store load
});
You shouldn't be using a ScriptTagProxy. If you read the docs you'll see that it's used only in limited cases to retrieve context from remote server in a particular format.
You want a HttpProxy instead.

Categories