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()
});
}
});
Related
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();
}
Here is my view:
Ext.define('NG.view.order.Header', {
extend: 'Ext.form.Panel',
alias: 'widget.orderheader',
scroll: 'vertical',
layout: 'column',
defaults: {
columnWidth: .33,
border: false
},
config: {
order: null
},
constructor: function (config) {
var me = this;
me.items = me.createItems();
me.callParent(arguments);
me.setOrder(config.order);
},
// creates this view items.
createItems: function () {
var items = [{
//column 1
layout: 'form',
defaultType: 'displayfield',
defaults: {
margin:'0 0 15 0'
},
items: [{
fieldLabel: 'No',
name: 'orderNumber'
}, {
fieldLabel: 'Ver',
name: 'version'
}, {
fieldLabel: 'Date',
name: 'orderDate',
renderer: Ext.util.Format.dateRenderer(Date.patterns.defaultFormat)
}, {
fieldLabel: 'Amount',
name: 'totalAmount'
}]
}, {
//column 2
layout: 'form',
defaultType: 'displayfield',
items: [{
fieldLabel: 'Supplier',
name: 'vendorName'
}, {
fieldLabel: 'Supplier No',
name: 'vendorDuns'
}, {
fieldLabel: 'Customer',
name: 'customerName'
}, {
fieldLabel: 'Buyer',
name: 'orderBuyerName'
}]
}]
return items;
}
});
As you can see I have set a margin on the first column fields.
Its seems this value is ignored .
Is this a known issue ??
Is there a workaround?
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
]
}
});
I have a sample login form. In that there is a controller, view and a model.I would like to validate the form. my Form panel id is 'formPanelLogin' and have to update the form record in the controller. but this code "formPanelLogin.updateRecord (teamModel);" can't work and error message like "updateRecord is not define".
Please give me an answer for this problem. my code will following..
//Controller
Ext.define('MyApp.controller.mvcController', {
extend: 'Ext.app.Controller',
config: {
refs: {
BtnSubmit: "#btnSubmit",
BtnCancel:"#btnCancel",
BtnPromoHome:"#PromotionsBtnHome",
BtnThirdBack:"#thirdBtnBack",
BtnSecondBack:"#btnUnderHoodService",
},
control: {
BtnSubmit:
{
tap: "onBtnSubmitTap"
},
BtnCancel:
{
tap: "onBtnCancelTap"
},
BtnPromoHome:
{
tap: "onBtnPromoHomeTap"
},
BtnSecondBack:
{
tap: "onBtnSecondBackTap"
},
BtnThirdBack:
{
tap: "onBtnThirdBackTap"
}
}
},
onBtnCancelTap: function (options)
{
//formPanelLogin.reset();
var teamModel = Ext.create('MyApp.model.MyModel'),
errors, errorMessage = '';
formPanelLogin.updateRecord (teamModel);
errors = teamModel.validate();
if (!errors.isValid()) {
errors.each(function (err) {
errorMessage += err.getMessage() + '<br/>';
}); // each()
Ext.Msg.alert('Form is invalid!', errorMessage);
} else {
Ext.Msg.alert('Form is valid!', '');
} // if
console.log("Cancel");
},
});
//view
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
layout:
{
type: 'card'
},
items: [
{
xtype: 'panel',
id: 'panelOuter',
layout:
{
type: 'card',
animation:
{
type: 'slide'
}
},
items: [
{
xtype: 'panel',
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'MVC',
items: [
{
xtype: 'button',
docked: 'left',
id: 'btnBack'
},
{
xtype: 'button',
docked: 'right',
id: 'btnHome'
}
]
},
{
xtype: 'formpanel',
docked: 'top',
height: 117,
id: 'formPanelLogin',
scrollable: true,
items: [
{
xtype: 'fieldset',
id: 'loginform',
items: [
{
xtype: 'textfield',
label: 'UserName',
name: 'userName',
labelWidth: '40%',
name: 'usernameField',
placeHolder: '...... Type here .......',
required: true
},
{
xtype: 'passwordfield',
label: 'Password',
labelWidth: '40%',
required: true
}
]
}
]
},
{
xtype: 'panel',
height: 45,
id: 'btnPanel',
items: [
{
xtype: 'button',
docked: 'right',
id: 'btnSubmit',
ui: 'action-small',
width: 85,
text: 'Submit'
},
{
xtype: 'button',
docked: 'right',
id: 'btnCancel',
ui: 'decline-small',
width: 85,
text: 'Cancel'
}
]
}
]}
]
},
});
//model
Ext.define('MyApp.model.MyModel', {
extend: 'Ext.data.Model',
config: {
fields : [
{
name: 'userName',
type: 'string'
},
{
name: 'password',
type: 'string'
}
],
validations: [
{
field: 'userName',
type: 'presence',
message: 'User Name is required.'
}
]
}
});
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.