We Keep Coding

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.

sencha extjs4.1 ext.tab.panel activetab

How can I use the setactivetab for grid within tab.panel?
I need my onload button/grid to stay in the tab panel that it actives from.
When I click on the button from the second tab I want the second tab to set. Instead it returns to the first tab. Below is my bare bones code, as I stripped out my attempt to use the setactivetab:
<script type="text/javascript">
//begin menu bar
Ext.define('MainNavBar.view.ui.MainNavPanel', {
extend: 'Ext.tab.Panel',
height: 170,
width: 1000,
activeTab: 0,
initComponent: function() {
var me = this;
me.items = [
{
xtype: 'panel',
height: 145,
width: 684,
title: 'Bus Data',
dockedItems: [
{
xtype: 'toolbar',
height: 145,
width: 938,
dock: 'top',
items: [
{
xtype: 'buttongroup',
height: 140,
title: 'Bid',
columns: 2,
layout: {
columns: 2,
type: 'table'
},
items: [
{
xtype: 'button',
text: 'Bid Doc',
handler: function(){window.location = '/biddoc/';}
},
]
},
]
}
]
},
{
xtype: 'panel',
height: 115,
title: 'Reporting',
dockedItems: [
{
xtype: 'toolbar',
height: 140,
dock: 'top',
items: [
{
xtype: 'buttongroup',
height: 140,
title: 'Sales Data',
columns: 2,
layout: {
columns: 2,
type: 'table'
},
items: [
{
xtype: 'button',
text: 'Batch',
handler: function(){window.location = '/salesdatabatch/';}
}
]
}
]
}
]
},
];
me.callParent(arguments);
}
});
Ext.define('MainNavBar.view.MainNavPanel', {
extend: 'MainNavBar.view.ui.MainNavPanel',
initComponent: function() {
var me = this;
me.callParent(arguments);
}
});
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'MainNavBar',
launch: function() {
Ext.QuickTips.init();
var cmp1 = Ext.create('MainNavBar.view.MainNavPanel', {
renderTo: menu
});
cmp1.show();
}
});
//end menu bar
</script>

Lets compile everything that we discussed here and make correct answer.
#Lorenz Meyer has good point there. You have architecture problem and you can solve this for example by Ext.Ajax.request({/** code here **/});. So there is no redirecting.
If you need good example how to do this, please refer to this: Extjs - Servlets
But you did not ask for architecture problem so this is my answer.
So after a little thinking i just made some corrects to your code. Please take a look and if its something that you like it just mark as answered:
Ext.define('MainNavBar.view.ui.MainNavPanel', {
extend: 'Ext.tab.Panel',
height: 170,
width: 1000,
activeTab: 0,
initComponent: function() {
var me = this;
me.items = [
{
xtype: 'panel',
height: 145,
width: 684,
title: 'Bus Data',
dockedItems: [
{
xtype: 'toolbar',
height: 145,
width: 938,
dock: 'top',
items: [
{
xtype: 'buttongroup',
height: 140,
title: 'Bid',
columns: 2,
layout: {
columns: 2,
type: 'table'
},
items: [
{
xtype: 'button',
text: 'Bid Doc',
handler: function(){window.location = '/biddoc/';}
},
]
},
]
}
]
},
{
xtype: 'panel',
height: 115,
title: 'Reporting',
dockedItems: [
{
xtype: 'toolbar',
height: 140,
dock: 'top',
items: [
{
xtype: 'buttongroup',
height: 140,
title: 'Sales Data',
columns: 2,
layout: {
columns: 2,
type: 'table'
},
items: [
{
xtype: 'button',
text: 'Batch',
handler: function(){window.location = '/salesdatabatch/';}
}
]
}
]
}
]
}
],
listeners: {
afterrender: function(component, eOpts) {
var urlInfo = document.location.href;
if(urlInfo.contains('salesdatabatch')){
component.setActiveTab(1);
}
if(urlInfo.contains('biddoc')){
component.setActiveTab(0);
}
}
},
me.callParent(arguments);
}
});

Losing scope in combobox ExtJS 4.2

I have a popup window with a combobox and a few buttons. The idea is to make a selection in the combobox and then either save the selection to a store or cancel. I have done this before and never had any problems, but with this code I get Uncaught TypeError: Cannot call method 'apply' of undefined whenever I try to interact with the combo. It seems to me like ExtJS is trying to run code meant for the store on the combobox.
I load the popup window with Ext.create('Account.Window.Reuse');
The definitions:
Ext.define('SimpleAccount', {
extend: 'Ext.data.Model',
idProperty: 'AccountID',
fields: [ {
name: 'AccountID',
type: 'int',
useNull: true
}, 'Name']
});
var userAccountReuseStore = Ext.create('Ext.data.Store', {
model: 'SimpleAccount',
storeId: 'userAccountReuseStore',
data: [{"AccountID":"1", "Name":"FirstAccount"},
{"AccountID":"2", "Name":"SecondAccount"},
{"AccountID":"3", "Name":"ThirdAccount"}]
});
Ext.define('Account.Reuse.ComboBox', {
extend: 'Ext.form.ComboBox',
alias: 'widget.accountReuseComboBox',
initComponent: function(){
Ext.apply(this, {
fieldLabel: 'Account',
displayField: 'Name',
valueField: 'AccountID',
queryMode: 'local'
})
}
});
Ext.define('Account.Reuse.Fieldset', {
extend: 'Ext.form.FieldSet',
alias: 'widget.accountReuseFieldset',
initComponent: function(){
Ext.apply(this, {
items: [
{
xtype: 'label',
cls: 'text-important',
margin: '0 0 10 0',
style: 'display: block',
text: 'Only attach an account you have permission to use. After attaching the account you will not be able to use, remove, or edit it until approved by SCSAM'
},
{
xtype: 'accountReuseComboBox',
store: userAccountReuseStore
}
]
});
this.callParent();
}
});
Ext.define('Account.Reuse.Details', {
extend: 'Ext.form.Panel',
alias: 'widget.accountReuseDetails',
initComponent: function(){
Ext.apply(this, {
plain: true,
border: 0,
bodyPadding: 5,
fieldDefaults: {
labelWidth: 55,
anchor: '100%'
},
layout: {
type: 'vbox',
align: 'stretch',
flex: 1
},
items: [
{
xtype: 'accountReuseFieldset',
defaults: {
labelWidth: 89,
anchor: '100%',
layout: {
type: 'vbox',
defaultMargins: {top: 0, right: 5, bottom: 0, left: 0},
align: 'stretch'
}
},
title: 'Details',
collapsible: false
}]
});
this.callParent();
}
});
Ext.define('Account.Window.Reuse', {
extend: 'Ext.window.Window',
alias: 'widget.accountWindowReuse',
initComponent: function(){
Ext.apply(this, {
title: 'Account Details',
width: 400,
autoShow: true,
modal: true,
layout: {
type: 'fit',
align: 'stretch' // Child items are stretched to full width
},
items: [{
xtype: 'accountReuseDetails',
id: 'attachAccountReuseForm'
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
layout: {
pack: 'center'
},
items: [{
minWidth: 80,
text: 'Attach',
id: 'saveButton',
handler: function(){
var rec = this.up('accountWindowReuse').down('accountReuseDetails').getValues();
var store = Ext.getStore('userAccountReuseAttachStore');
store.add(rec);
this.up('window').close();
}
},{
minWidth: 80,
text: 'Cancel',
handler: function(){
this.up('window').close();
}
}]
}]
});
this.callParent();
}
});

It looks like you forget call parent in your Account.Reuse.ComboBox initComponent function so combobox is not initialized properly.
Your Account.Reuse.ComboBox initComponent function should look like this:
initComponent: function(){
Ext.apply(this, {
fieldLabel: 'Account',
displayField: 'Name',
valueField: 'AccountID',
queryMode: 'local'
});
this.callParent();
}

How to send data in sencha between 2 views

im learning sencha and i could not do data transfer between two views. I have 2 views. first view has datalist. when datalist item clicked im opening another view. and i need to send the list item values to second view.
can anyone help me please?
first view.
Ext.define('griddeneme.view.pnlAna', {
extend: 'Ext.Panel',
alias: 'widget.pnlana',
requires: [
'Ext.XTemplate'
],
config: {
layout: {
type: 'vbox'
},
items: [
{
xtype: 'panel',
flex: 1,
style: 'background-color:#81BEF7',
items: [
{
xtype: 'button',
docked: 'left',
height: 15,
itemId: 'mybutton1',
style: 'margin-Top',
ui: 'decline',
text: 'Çıkış'
}
]
},
{
xtype: 'panel',
flex: 9,
layout: {
type: 'vbox'
},
items: [
{
xtype: 'list',
flex: 1,
itemId: 'mylist',
itemTpl: [
'<div>{ad} - {yazar}</div>'
],
store: 'strYazarlar'
}
]
}
],
listeners: [
{
fn: 'onMybutton1Tap',
event: 'tap',
delegate: '#mybutton1'
},
{
fn: 'onMylistItemTap',
event: 'itemtap',
delegate: '#mylist'
}
]
},
onMybutton1Tap: function(button, e, eOpts) {
var pnlAna = Ext.create('griddeneme.view.pnlGiris');
Ext.Viewport.setActiveItem(pnlAna);
},
onMylistItemTap: function(dataview, index, target, record, e, eOpts) {
//alert(record.data.ad);
var Details=Ext.create('griddeneme.view.pnlDetail');
Details.setData(record);
Ext.Viewport.setActiveItem(Details);
}
});
second view
Ext.define('griddeneme.view.pnlDetail', {
extend: 'Ext.Panel',
alias: 'widget.pnldetail',
config: {
layout: {
type: 'vbox'
},
items: [
{
xtype: 'panel',
flex: 1,
style: 'background-color:#81BEF7',
items: [
{
xtype: 'button',
docked: 'left',
height: 15,
ui: 'back',
text: 'Geri'
}
]
},
{
xtype: 'panel',
flex: 8,
itemId: 'mypanel7',
style: '',
items: [
{
xtype: 'label',
html: 'Kitap Adı:',
id: '',
minWidth: 150,
style: 'color:green; float:left'
},
{
xtype: 'label',
html: 'f',
id: 'lblAd'
},
{
xtype: 'label',
html: 'Yazar:',
minWidth: 150,
style: 'float:left;color:green;'
},
{
xtype: 'label',
html: 'ggg',
id: 'lblKitap'
}
],
listeners: [
{
fn: function(component, eOpts) {
alert(record.data.ad);
},
event: 'initialize'
}
]
}
]
}
});

Ext.define('griddeneme.view.pnlDetail', {
extend: 'Ext.Panel',
alias: 'widget.pnldetail',
config: {
someData: null,
...
And on instantiating your pnlDetail:
onMylistItemTap: function(dataview, index, target, record, e, eOpts) {
var Details=Ext.create('griddeneme.view.pnlDetail',{
someData: // here you can set your data
});
Ext.Viewport.setActiveItem(Details);
}

ExtJs 4 MVC Nested Layouts

I'm trying to implement a simple framework for an app. The idea is to create a background viewport type 'layout' with a north region containing the page header and an interchangeable center region.
When my app starts, a Login form is shown. If the user/password is ok, the form is destroyed and the main layout should appear. The main layout should insert a nested layout in its center region.
This is my background layout code:
Ext.define('DEMO.view.BackgroundLayout', {
extend: 'Ext.container.Viewport',
alias: 'widget.background',
requires: [
'DEMO.view.Main'
],
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>'
},
{
xtype: 'mainview',
region: 'center',
forceFit: false,
height: 400
}
]
});
me.callParent(arguments);
}
});
The main layout is this:
Ext.define('DEMO.view.Main', {
extend: 'Ext.container.Viewport',
alias: 'widget.mainview',
requires: [
'DEMO.view.MyGridPanel'
],
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
console.log('bb');
Ext.applyIf(me, {
items: [
{
xtype: 'mygridpanel',
region: 'center',
forceFit: false
},
{
xtype: 'container',
height: 38,
forceFit: false,
region: 'north',
items: [
{
xtype: 'button',
height: 34,
id: 'btnLogout',
action: 'logout',
text: 'Logout'
}
]
}
]
});
me.callParent(arguments);
}
});
As you can see, the center region needs an xtype named "mygridpanel". This is the code for it:
Ext.define('DEMO.view.ui.MyGridPanel', {
extend: 'Ext.grid.Panel',
border: '',
height: 106,
title: 'My Grid Panel',
store: 'MyJsonStore',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
viewConfig: {
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Id',
text: 'Id'
},
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'Sales',
text: 'Sales'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
disabled: true,
id: 'btnDelete',
allowDepress: false,
text: 'Delete'
},
{
xtype: 'button',
disabled: true,
id: 'btnEdit',
allowDepress: false,
text: 'Edit'
}
]
}
]
});
me.callParent(arguments);
}
});
My problem is that when I call Ext.create('DEMO.view.BackgroundLayout', {}); it only shows the nested layout, and the background layout is hidden, also I get this error in Chrome's console:
Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3
What I'm doing wrong?.
Thanks in advance,
Leonardo.