I added a listener onParentPagePopupCommit for button in popup which was declared in parent view controller and added the popup in view port, now the view model bindings are working as expected, but not sure how to invoke the parent view controller methods without exposing the same methods names in child view controller. Is there any way to extend View Controller during runtime in ExtJs Modern 6.5.
Fiddle
onShowChildPopup: function (sender) {
var popup = sender.up('panel').popups['childPopup'],
pageCtrler = sender.lookupController(),
pageVM = pageCtrler.getViewModel(),
page = pageCtrler.getView(),
popupCtrler = new Ext.app.ViewController({
parent: pageCtrler, //setting parent ctrler
//popup commit event on popup view controller
onPopupCommit: function () {
debugger;
Ext.Msg.alert("Popup Update", "Popup View Controller Invoked")
console.log("popup view controller - commit");
},
// this works but any other way
// same methods name on popup view ctrler...
/*onParentPagePopupCommit: function(){
debugger;
// I don't like this way of invoking a parent method
// this may introduce few more bugs if the parent gets value from its own
// view model - (this will be parent vm and not child/popup.)
// need something similar to extend inorder to reuse certain methods..
this.parent.onParentPagePopupCommit();
var vm = this.getViewModel().get('vm');
vm.set('fullName',this.getFullName());
}*/
}),
popupVM = new Ext.app.ViewModel({
parent: pageVM, //setting parent view model
links: {
//vm is not merging with parent
//vm: {
childvm: {
reference: 'ChildModel',
create: {
address: "child Address",
phone: "child Phone"
}
}
}
});
popup.controller = popupCtrler;
popup.viewModel = popupVM;
popup = Ext.create(popup);
popup.setShowAnimation({
type: 'slideIn',
duration: 325,
direction: 'up'
});
popup.setHideAnimation({
type: 'slideOut',
duration: 325,
direction: 'down'
});
popup.setCentered(true);
/* popup.on('show', function () {
debugger;
});*/
Ext.Viewport.add(popup).show();
//popup.showBy(page, "c-c");
}
For this you need to use extend config in controller.
For example:
Ext.define('Person', {
say: function(text) { alert(text); }
});
Ext.define('Developer', {
extend: 'Person',
say: function(text) { this.callParent(["print "+text]); }
});
In this FIDDLE, I have created a demo using your code and made some modification. I hope this will help or guide your to achieve you requirement.
Code Snippet
Ext.define('ParentModel', {
extend: 'Ext.data.Model',
alias: 'model.parentmodel',
fields: [{
name: 'firstName',
type: 'string'
}, {
name: 'lastName',
type: 'string'
}, {
name: 'address',
type: 'string'
}]
});
Ext.define('ChildModel', {
extend: 'Ext.data.Model',
alias: 'model.childmodel',
fields: [{
name: 'address',
type: 'string'
}, {
name: 'phone',
type: 'number'
}, {
name: 'fullName',
type: 'string'
}]
});
Ext.define('PageViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.pageviewmodel',
links: {
vm: {
reference: 'ParentModel',
create: {
firstName: 'firstName-ParentVM',
lastName: 'lastName-ParentVM'
}
}
}
});
Ext.define('PageViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.pageviewcontroller',
init: function () {
this.callParent(arguments);
},
//i understand fullname can also be done on model using formula/conver
//this is just a sample
getFullName: function () {
var vm = this.getViewModel().get('vm');
return vm.get('firstName') + " " + vm.get('lastName');
},
//popup commit event on parent view controller
onParentPagePopupCommit: function (button) {
var vm = button.up('formpanel').getViewModel().get('vm');
vm.commit();
Ext.Msg.alert("Parent Page Update", "Parent View Controller Invoked");
console.log("Page view controller - commit");
},
onShowChildPopup: function (button) {
var popup = button.up('panel').popups['childPopup'],
pageCtrler = button.lookupController(),
pageVM = pageCtrler.getViewModel(),
page = pageCtrler.getView(),
popupVM = new Ext.app.ViewModel({
parent: pageVM, //setting parent ViewModel
links: {
//vm is not merging with parent
//vm: {
childvm: {
reference: 'ChildModel',
create: {
address: "child Address",
phone: "child Phone"
}
}
}
});
popup.viewModel = popupVM;
popup = Ext.create(popup);
popup.setShowAnimation({
type: 'slideIn',
duration: 325,
direction: 'up'
}).setHideAnimation({
type: 'slideOut',
duration: 325,
direction: 'down'
}).setCentered(true);
Ext.Viewport.add(popup).show();
}
});
//Need to extend popup controller from PageViewController(parent)
Ext.define('PopupViewController', {
extend: 'PageViewController',
alias: 'controller.popupviewcontroller',
//popup commit event on popup view controller
onPopupCommit: function () {
Ext.Msg.alert("Popup Update", "Popup View Controller Invoked")
console.log("popup view controller - commit");
}
});
Ext.define('MainPage', {
extend: 'Ext.Panel',
config: {
title: 'Page',
width: '100%',
height: '100%',
layout: {
type: 'vbox',
align: 'stretch'
}
},
viewModel: {
type: 'pageviewmodel'
},
controller: {
type: 'pageviewcontroller'
},
width: '100%',
height: '100%',
popups: {
childPopup: {
xtype: 'formpanel',
controller: 'popupviewcontroller',
title: 'Cild Popup',
floating: true,
modal: true,
hideonMaskTap: true,
layout: 'float',
minWidth: 300,
maxHeight: 580,
tools: [{
type: 'close',
handler: function () {
var me = this.up('formpanel');
me.hide();
}
}],
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch',
pack: 'center'
},
items: [{
xtype: 'fieldset',
items: [{
xtype: 'label',
bind: {
html: '{vm.firstName} {vm.lastName}'
}
}, {
xtype: 'textfield',
label: 'First Name',
name: 'firstName',
bind: {
value: '{vm.firstName}'
}
}, {
xtype: 'textfield',
label: 'Last Name',
name: 'lastName',
bind: {
value: '{vm.lastName}'
}
}, {
xtype: 'textfield',
label: 'Last Name',
name: 'lastName',
bind: {
//value: '{vm.address}'
value: '{childvm.address}'
}
}]
}, {
xtype: 'container',
docked: 'bottom',
layout: 'hbox',
items: [{
xtype: 'button',
text: 'Popup Update',
handler: 'onPopupCommit'
}, {
xtype: 'button',
text: 'Parent Update',
handler: 'onParentPagePopupCommit'
}]
}]
}]
}
},
bodyPadding: 10,
items: [{
xtype: 'fieldset',
title: 'Enter your name',
items: [{
xtype: 'textfield',
label: 'First Name',
name: 'firstName',
bind: {
value: '{vm.firstName}'
}
}, {
xtype: 'textfield',
label: 'Last Name',
name: 'lastName',
bind: {
value: '{vm.lastName}'
}
}]
}, {
xtype: 'button',
text: 'Show Popup',
handler: 'onShowChildPopup'
}]
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.Viewport.add(Ext.create('MainPage'));
}
});
Related
I have a handler function that creates a Ext.window.Window, with fields to enter data, I need o move this part of the code to a controller function, and separate it from the main ajax request, this is for code reuse purposes.
var win = Ext.create('Ext.window.Window', {
title: 'New Client',
id: 'addClientWindow',
width: 500,
height: 300,
items: [{
xtype: 'form',
bodyPadding: 10,
items: [{
xtype: 'fieldset',
title: 'My Fields',
items: [{
xtype: 'textfield',
anchor: '100%',
id: 'nameTextField',
fieldLabel: 'Name',
labelWidth: 140
}, {
xtype: 'textfield',
anchor: '100%',
id: 'physicalTextField',
fieldLabel: 'Physical Address',
labelWidth: 140
}, {
xtype: 'textfield',
anchor: '100%',
id: 'postalTextField',
fieldLabel: 'Postal Address',
labelWidth: 140
}]
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'button',
id: 'cancelClientBtn',
text: 'Cancel',
listeners: {
click: function(c) {
Ext.getCmp('addClientWindow').close();
}
}
}, {
xtype: 'tbspacer',
flex: 1
}, {
xtype: 'button',
id: 'saveClientBtn',
text: 'Save',
listeners: {
click: function(c) {
Ext.Ajax.request({
url: 'system/index.php',
method: 'POST',
params: {
class: 'Company',
method: 'add',
data: Ext.encode({
name: Ext.getCmp('nameTextField').getValue(),
physical: Ext.getCmp('physicalTextField').getValue(),
postal: Ext.getCmp('postalTextField').getValue()
})
},
success: function(response) {
Ext.MessageBox.alert('Status', 'Record has been updated.');
Ext.getStore('CompanyStore').reload();
Ext.getCmp('addClientWindow').close();
},
failure: function() {
Ext.MessageBox.alert('Status', 'Failed to update record.');
}
});
}
}
}]
}]
}]
});
win.show();
The button opens this window and performs this ajax request, I just need the two separated from one another. Any help appreciated.
You can define your window in a separated file and give it an alias:
Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',
alias: 'widget.addclient',
...
click: function(){
var data = Ext.encode({
name: Ext.getCmp('nameTextField').getValue(),
physical: Ext.getCmp('physicalTextField').getValue(),
postal: Ext.getCmp('postalTextField').getValue()
});
// I assume here "this" links to the window component,
// if not, adjust accordingly
if(this.mycallback){
this.mycallback(data);
}
}
});
Then you can call it from other controllers and provide a callback:
Ext.define('MyApp.view.MyController', {
extend: 'Ext.app.ViewController',
requires: 'MyApp.view.MyWindow',
openWindow: function(){
var win = Ext.widget('addclient');
win.mycallback = this.onAddClientCallback.bind(this);
win.show();
},
onAddClientCallback: function(data){
console.log("data from window", data);
}
});
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()
});
}
});
I have a class that has its own view model, and I create 2 instances of this class in my main view. In the main view, I want to pass down values for my 2 class instances, but I can't seem to get this working... I think I'm just not understanding some very simple concept.
The expected result is the value1 + value2 field has the concatenation of value1 and value2, the first myValue shows value1, and the 2nd myValue shows value2. Here's my code and example:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myView',
formulas: {
doSomething: function(getter) {
console.log(getter('value1'), getter('value2'));
return getter('value1') + getter('value2');
}
}
});
Ext.define('MyView', {
extend: 'Ext.panel.Panel',
xtype: 'myView',
viewModel: {
type: 'myView'
},
config: {
myValue: null
},
publishes: {
myValue: true
},
items: [
{
xtype: 'displayfield',
fieldLabel: 'myValue',
bind: {
value: '{myValue}'
}
}
]
});
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
items: [
{
xtype: 'displayfield',
fieldLabel: 'display',
bind: {
value: '{doSomething}'
}
},
{
xtype: 'myView',
reference: 'view1',
title: 'View1',
bind: {
myValue: '{value1}'
}
},
{
xtype: 'myView',
reference: 'view2',
title: 'View2',
bind: {
myValue: '{value2}'
}
}
],
viewModel: {
data: {
value1: 'Something',
value2: 'something else'
}
}
})
}
});
Your first displayField will never "see" the doSomething formula, because that formula is not part of it's parent, so you will need to move the formula from MyViewModel to your Ext.container.Container viewModel.
Also, when you publish a custom value, it will have reference.publishedvalue format. This should fix your panel:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myView'
});
Ext.define('MyView', {
extend: 'Ext.panel.Panel',
xtype: 'myView',
viewModel: {
type: 'myView'
},
config : {
myValue : null
},
publishes : ['myValue'],
items: [{
xtype: 'displayfield',
fieldLabel: 'myValue',
initComponent : function() {
var me = this,
owner = me.$initParent || me.initOwnerCt;
this.setBind({
value: '{' + owner.reference + '.myValue}'
});
this.callParent();
}
}]
});
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
viewModel: {
data: {
value1: 'Something',
value2: 'something else'
},
formulas: {
doSomething: function(getter) {
console.log(getter('value1'), getter('value2'));
return getter('value1') + getter('value2');
}
}
},
items: [{
xtype: 'displayfield',
fieldLabel: 'display',
bind: {
value: '{doSomething}'
}
},{
xtype: 'myView',
reference: 'view1',
title: 'View1',
bind: {
myValue: '{value1}'
}
},{
xtype: 'myView',
reference: 'view2',
title: 'View2',
bind: {
myValue: '{value2}'
}
}]
})
}
});
getting error at that button.up('form').getForm().reset(); is undefined....
functions of Submit - is send user details to server
cancel button - it sgould reset form.
// this is code of controller for login form..which consist of two event s for submit button & for cancel
Ext.define('Packt.controller.Login',
{
extend: 'Ext.app.Controller',
views: [
'Login'
],
init: function(application)
{
this.control({
"button#submit": {
click: this.onButtonClickSubmit
},
"button#cancel": {
click: this.onButtonClickCancel
}
});
},
// implementation of action to be executed when events happnes
onButtonClickSubmit: function(button, e, options)
{
get login form referance
var formPanel = button.up('form'),
login = button.up('login'),
user = formPanel.down('textfield[name=user]').getValue(),
pass = formPanel.down('textfield[name=password]').getValue(),
if (formPanel.getForm().isValid())
{
encryptting password
pass = Packt.util.MD5.encode(pass);
sending user details to server
Ext.Ajax.request({
url: 'php/login.php',
params: {
user: user,
password: pass
}
});
}
},
onButtonClickCancel: function(button, e, options)
{
button.up('form').getForm().reset();
}
});
code of view for form :
Ext.define('Packt.view.Login', {
extend: 'Ext.window.Window',
alias: 'widget.login',
autoShow: true,
height: 170,
width: 360,
layout: {
type: 'fit'
},
iconCls: '.key',
title: 'Login',
closeAction: 'hide',
closable: false ,
items: [
{
type: 'form',
frame: false,
bodyPadding: 15,
defaults: {
xtype: 'textfield',
anchor: '100%',
labelWidth: 60 ,
allowBlank: false,
vtype: 'alphanum',
minLength: 3,
msgTarget: 'side'
},
items: [
{
name: 'user',
fieldLabel: 'user',
maxLength :25
},
{
inputType: 'password',
name: 'password',
fieldLabel: 'Password',
maxLength :15,
enableKeyEvents: true,
id: 'password'
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
itemId: 'cancel',
iconCls: 'cancel',
text: 'Cancel'
},
{
xtype: 'button',
itemId: 'submit',
formBind: true,
iconCls: 'key-go',
text: 'Submit'
}
]
}
]
});
this is code of app.js that is main
Ext.application({
// namespace fr project
name: 'Packt',
/*requires: [
'Packt.view.Login'
],
views: [
'Login'
],
*/
controllers: [
'Login'
],
init: function()
{
splashscreen = Ext.getBody().mask('Loading application','splashscreen');
splashscreen.addCls('splashscreen');
Ext.DomHelper.insertFirst(Ext.query('.x-mask-msg')[0], {cls: 'x-splash-icon' });
splashscreen.next().fadeOut({
duration: 1000,
remove:true,
listeners: {
afteranimate: function(el, startTime, eOpts )
{
Ext.widget('login');
}
}
});
}
});
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.'
}
]
}
});