ExtJs 4 MVC Nested Layouts - javascript

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.

Related

ExtJS 5: disable form fields in hidden card

I have a form panel with a radiogroup, and depending on the radiogroup selection, it will show some other components. If a radiofield is not selected, then its items will be hidden, as they're not part of the active card.
Now, if I have allowblank: false set on a field (and it's empty) within the hidden card, my form is still considered invalid. Being hidden means the user would not like to use it, so it should not be considered as part of the form. Here's an example.
In the example, I have 2 forms... the top form is the one that I'm curious about... is there a way to get this working without having to bind to disabled? I tried looking at hideMode, but that wasn't what I was looking for.
Ideally, I wouldn't have to create a formula for each card that I add... that seems silly. I realize I could create a generic formula, but once again, that just seems extraneous. Another option could be ditching the card layout, and binding each card to hidden and disabled, but I'm creating more formulas. Is there some sort of property I'm missing?
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('MyController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myview',
onValidityChange: function(form, isValid, eOpts) {
this.getViewModel().set('isFormValid', isValid);
}
});
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myview',
data: {
activeItem: {
myInput: 0
}
},
formulas: {
activeCardLayout: function(getter) {
var myInput = getter('activeItem.myInput');
console.log(myInput);
return parseInt(myInput);
}
}
});
Ext.define('MyForm', {
extend: 'Ext.form.Panel',
title: 'My Form',
controller: 'myview',
viewModel: {
type: 'myview'
},
layout: {
type: 'hbox'
},
listeners: {
validitychange: 'onValidityChange'
},
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
layout: {
type: 'hbox'
},
items: [{
xtype: 'button',
text: 'Save',
reference: 'saveButton',
disabled: true,
bind: {
disabled: '{!isFormValid}'
}
}]
}],
items: [{
xtype: 'radiogroup',
vertical: true,
columns: 1,
bind: {
value: '{activeItem}'
},
defaults: {
name: 'myInput'
},
items: [{
boxLabel: 'None',
inputValue: '0'
}, {
boxLabel: 'Something',
inputValue: '1'
}]
}, {
xtype: 'container',
layout: 'card',
flex: 1,
bind: {
activeItem: '{activeCardLayout}'
},
items: [{
xtype: 'container',
layout: 'fit'
}, {
xtype: 'container',
layout: 'fit',
items: [{
xtype: 'textfield',
fieldLabel: 'hello',
allowBlank: false
}]
}]
}]
});
Ext.define('MyViewModel2', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myview2',
data: {
activeItem: {
myInput: 0
}
},
formulas: {
disableSomethingCard: function(getter) {
return getter('activeItem.myInput') !== '1';
},
activeCardLayout: function(getter) {
var myInput = getter('activeItem.myInput');
console.log(myInput, 'here');
return parseInt(myInput);
}
}
});
Ext.define('MyForm2', {
extend: 'MyForm',
title: 'My Form 2 (works)',
viewModel: {
type: 'myview2'
},
items: [{
xtype: 'radiogroup',
vertical: true,
columns: 1,
bind: {
value: '{activeItem}'
},
defaults: {
name: 'myInput'
},
items: [{
boxLabel: 'None',
inputValue: '0'
}, {
boxLabel: 'Something',
inputValue: '1'
}]
}, {
xtype: 'container',
layout: 'card',
flex: 1,
bind: {
activeItem: '{activeCardLayout}'
},
items: [{
xtype: 'container',
layout: 'fit'
}, {
xtype: 'container',
layout: 'fit',
bind: {
disabled: '{disableSomethingCard}'
},
items: [{
xtype: 'textfield',
fieldLabel: 'hello',
allowBlank: false
}]
}]
}]
});
Ext.create('MyForm', {
renderTo: Ext.getBody()
});
Ext.create('MyForm2', {
renderTo: Ext.getBody()
});
}
});

How do I hide toolbar items from initcomponent

I have a button inside ExtJs toolbar as below
Ext.define('Member.view.members.MembersGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.membersGrid',
id: 'membersGrid',
cls: 'custom-grid',
requires: [],
viewConfig : {
enableTextSelection: true
},
frame: true,
store: '',
//id: 'transGrid',
height: 150,
columns: [
{
xtype: 'rownumberer'
},
{
hidden:true,
width: 10,
dataIndex: 'id',
text: 'id'
},
/*{
width: 100,
//flex: 1,
dataIndex: 'member_number',
text: 'Member Number'
},*/
{
width: 150,
flex: 1,
dataIndex: 'member_names',
text: 'Member Names'
}],
dockedItems: [
{
xtype: 'toolbar',
itemId: 'toptoolbar',
id:'toptoolbar',
flex: 1,
dock: 'top',
items: [
{
xtype: 'button',
text: 'Pin_Reset',
id: 'pinReset',
itemId: 'pinReset',
iconCls: 'pin_reset'
}
]
}
],
initComponent: function() {
Ext.getCmp('pinReset').hidden = true;
this.callParent();
}
});
I want the button to appear hidden after render. I thought Ext.getCmp('pinReset').hidden = true; will do since I have assigned the button an id. Getting the following error 'Cannot set property 'hidden' of undefined' on Chrome developer tools.
Extjs Version: 5.1
initComponent is called before the rendering.So it is not able to find the button.You can use 'afterrender' event instead for this.
Add following code instead of initComponent:
listeners:{
afterrender: function() {
Ext.getCmp('pinReset').hidden = true;
}
}
Working Code:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.grid.Panel', {
alias: 'widget.membersGrid',
id: 'membersGrid',
cls: 'custom-grid',
renderTo:Ext.getBody(),
requires: [],
viewConfig : {
enableTextSelection: true
},
frame: true,
store: '',
//id: 'transGrid',
height: 150,
columns: [
{
xtype: 'rownumberer'
},
{
hidden:true,
width: 10,
dataIndex: 'id',
text: 'id'
},
/*{
width: 100,
//flex: 1,
dataIndex: 'member_number',
text: 'Member Number'
},*/
{
width: 150,
flex: 1,
dataIndex: 'member_names',
text: 'Member Names'
}],
dockedItems: [
{
xtype: 'toolbar',
itemId: 'toptoolbar',
id:'toptoolbar',
flex: 1,
dock: 'top',
items: [
{
xtype: 'button',
text: 'Pin_Reset',
id: 'pinReset',
itemId: 'pinReset',
iconCls: 'pin_reset'
}
]
}
],
listeners:{
afterrender: function() {
Ext.getCmp('pinReset').hidden = true;
}
}
});
}
});
<link rel="stylesheet" href="https://extjs.cachefly.net/ext-4.1.1-gpl/resources/css/ext-all.css">
<script type="text/javascript" src="https://extjs.cachefly.net/ext-4.1.1-gpl/ext-all-debug.js"></script>
You are using initComponent instead of afterRender in your codesnippet. Is that correct?
I would use the reference-property and use it like this:
items: [
{
xtype: 'button'
reference: 'myButton'
}
]
...
afterRender: function() {
this.lookupReference('myButton').setHidden(true);
this.callParent();
}

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

Sencha Touch2 - Panels with Card layout not working

I have tabpanel, which contains a few tabs. I will be concentrating on the 6th tab here - navigatingPanels.js file. In this file, I have a card layout, so that the user can fill form1 & move to form2 on submission (slide to form2). I also have a docked toolbar, with a back button, so that the user can move back to form1 (if needed). It gives an error -
Uncaught Error: [ERROR][Ext.Base#callParent] Invalid item given: undefined, must be either the config object to factory a new item, or an existing component instance.
The app can be seen here - http://maalguru.in/touch/Raxa-70/MyApp/
Update - If I add one extra card to the concerned panel, & remove the form1 & form2 (required panels/cards), then it works fine. In this case I have to setActiveItem to the desired cards (form1 & form2). Changed Viewport - http://pastebin.com/P4k04dBQ
Is there any solution to achieve with only 2 panels/cards ?
Viewport.js
Ext.define('MyApp.view.Viewport', {
extend: 'Ext.TabPanel',
xtype: 'my-viewport',
config: {
fullscreen: true,
tabBarPosition: 'bottom',
items: [{
xclass: 'MyApp.view.navigatingPanels'
}]
}
});
NavigatingPanels.js
Ext.define('MyApp.view.navigatingPanels', {
extend: 'Ext.Panel',
id: 'navigatingPanels',
xtype: 'navigatingPanels',
config: {
iconCls: 'user',
title: 'Navigating Panels',
layout: 'card',
animation: {
type: 'slide',
direction: 'left'
},
defaults: {
styleHtmlContent: 'true'
},
items: [{
docked: 'top',
xtype: 'toolbar',
title: 'Registeration Form',
items: [{
text: 'Back',
ui: 'back',
align: 'centre',
//back button to take the user back from form2 to form1
handler: function() {
Ext.getCmp('navigatingPanels').setActiveItem(form1);
}
}]
},
form1,
form2
]
}
});
var form1 = new Ext.Panel({
scrollable: 'vertical',
items: [{
xtype: 'fieldset',
title: 'Form 1',
items: [{
xtype: 'textfield',
label: 'Name',
name: 'name',
},
{
xtype: 'button',
text: 'Save Data & move to form2',
ui: 'confirm',
//TODO add some action: to store data
//save data & move to form2
handler: function() {
Ext.getCmp('navigatingPanels').setActiveItem(form2, {
type: 'slide',
direction: 'right'
});
console.log("Form1");
}
}
]
}]
});
var form2 = new Ext.Panel({
scrollable: 'vertical',
items: [{
xtype: 'fieldset',
title: 'Form 2',
items: [{
xtype: 'textareafield',
label: 'Message',
name: 'message'
},
{
xtype: 'button',
text: 'Submit Data',
ui: 'confirm',
//TODO add some action: to store data
//action: 'Submit Data'
}
]
}]
});
App.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'MyApp',
controllers: ['Main'],
launch: function() {
Ext.create('MyApp.view.Viewport', {
fullscreen: true
});
}
});
Finally I got the answer. The component instances should not be given as items in Ext.define, instead their config should be given. The setActiveItem can be called the the normal way -
Ext.getCmp('navigatingPanels').setActiveItem(0);
CODE SNIPPET
Ext.define('MyApp.view.navigatingPanels', {
extend: 'Ext.Panel',
id: 'navigatingPanels',
xtype: 'navigatingPanels',
config: {
iconCls: 'user',
title: 'Navigating Panels',
layout: 'card',
animation: {
type: 'slide',
direction: 'left',
duration: 300
},
defaults: {
styleHtmlContent: 'true'
},
items: [{
docked: 'top',
xtype: 'toolbar',
title: 'Registeration Form',
items: [{
text: 'Back',
ui: 'back',
align: 'centre',
//back button to take the user back from form2 to form1
handler: function() {
Ext.getCmp('navigatingPanels').setActiveItem(0, {
type: 'slide',
reverse: 'true',
duration: '300'
});
console.log(Ext.getCmp('navigatingPanels'));
}
}]
},
{
xtype: 'fieldset',
title: 'Form 1',
scrollable: 'vertical',
items: [{
xtype: 'textfield',
label: 'Name',
name: 'name',
},
{
xtype: 'button',
text: 'Save Data & move to form2',
ui: 'confirm',
//TODO add some action: to store data
//save data & move to form2
handler: function() {
Ext.getCmp('navigatingPanels').setActiveItem(1, {
type: 'slide',
direction: 'right'
});
console.log("Form1");
}
}
]
},
{
scrollable: 'vertical',
items: [{
xtype: 'fieldset',
title: 'Form 2',
items: [{
xtype: 'textareafield',
label: 'Message',
name: 'message'
},
{
xtype: 'button',
text: 'Submit Data',
ui: 'confirm',
//TODO add some action: to store data
//action: 'Submit Data'
}
]
}]
}
]
}
});
Try this...
myNavigationPanel = Ext.create('MyApp.view.navigatingPanels');
myNavigationPanel.setActiveItem(0);
Ext.define('MyApp.view.Viewport', {
extend: 'Ext.TabPanel',
xtype: 'my-viewport',
config: {
fullscreen: true,
tabBarPosition: 'bottom',
items: [{
xclass: 'MyApp.view.Home'
},
{
xclass: 'MyApp.view.Contact'
},
{
xclass: 'MyApp.view.Products'
},
{
xclass: 'MyApp.view.Forms'
},
{
xclass: 'MyApp.view.NestedTabPanels'
},
myNavigationPanel
]
}
});

Categories