Develop Reference

How to create a button in the controller which opens the form (ext js)

I have a view (Main.js), form (RenterData.js) and I want to code controller which will open RenterData form by button from view Main.
Now my controller looks like that:
Ext.define('MyApp.controller.ButtonController', {
extend: 'Ext.app.ViewController',
views: ['MyApp.view.main.Main'],
refs: [{
ref: 'control-panel',
selector: 'control-panel'
}],
init: function(application) {
this.control({
"RenterId": function () {
click: this.onButtonClickRenterId
}
})
},
onButtonClickRenterId: function() {
/* place for form calling by button function */
}
});
I am a beginner in sencha ext js, and I don't understand which method I have to use for calling form by button. Note, that the button is into a carousel, which is into a menu on the view.
I use Ext JS 6.2.0
Grazie!

You can do this by showing the form content in a window or you can render it to a region panel in your view port here is an Example Fiddle
app.js
Ext.application({
name: 'Test',
requires: ['Test.view.Main', 'Test.view.MyForm'],
mainView: 'Test.view.Main',
launch: function () {}
});
app/view/Main.js
Ext.define('Test.view.Main', {
extend: 'Ext.container.Viewport',
title: 'main',
xtype: 'main',
// renderTo:Ext.getBody(),
width: 600,
height: 400,
layout: 'border',
items: [{
region: 'north',
height: 100,
items: [{
xtype: 'button',
text: 'Open Form in pop up window',
handler: function () {
Ext.create('Ext.window.Window', {
title: 'Popup',
width: 400,
height: 100,
autoShow: true,
items: {
xtype: 'myForm'
}
})
}
}, {}, {
xtype: 'button',
text: 'Open Form View Port Center Region',
handler: function () {
let myForm = Ext.create('Test.view.MyForm')
this.up('viewport').items.getAt(1).add(myForm);
}
}]
}, {
region: 'center',
id: 'mycenter',
title: 'Center Region',
items: [{
html: ''
}]
}]
})
app/view/MyForm
Ext.define('Test.view.MyForm', {
extend: 'Ext.form.Panel',
xtype: 'myForm',
width: 400,
height: 200,
items: [{
xtype: 'textfield',
name: 'mtfield',
fieldLabel: 'TextField'
}]
})

Inside the function handler function of the button, create object of the class related to it and call "show" method to add it viewport.
onButtonClickRenterId: function() {
/* place for form calling by button function */
var form = Ext.create('<class name defined in RenterData.js>');
form.show();
}

Ext.Viewport.add is not a function In Ext js

I am very new to Ext js . I am trying to implement Grid in application in that once user will click on data new msg window will open with current data and user can edit that and this will saved in model. I am using Classic toolkit
I tried like this:
Ext.define('MyApp.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
require:['Ext.plugin.Viewport'],
itemtap: function (view,index,item,record) {
Ext.Viewport.add({
xtype:'formpanel',
title:'update',
width:300,
centered: true,
modal: true,
viewModel : {
data: {
employee: record
}
},
items: [{
xtype: 'textfield',
name: 'firstname',
label: 'First Name',
bind: '{employee.name}'
}, {
xtype: 'toolbar',
docked: 'bottom',
items: ['->', {
xtype: 'button',
text: 'Submit',
iconCls: 'x-fa fa-check',
handler: function() {
this.up('formpanel').destroy();
}
}, {
xtype: 'button',
text: 'Cancel',
iconCls: 'x-fa fa-close',
handler: function() {
this.up('formpanel').destroy();
}
}]
}]
})
and In my other file i am calling this function like
listeners: {
select: 'itemtap'
}
But i am getting error like Ext.Viewport.add is not a function
Kindly suggest me how can i make it possible .
Any suggestions are welcome .

In classic toolkit, you don't have a viewport that shows only a single item every time. The whole concept of a viewport that you want to add components to at runtime is a concept of the modern toolkit.
Instead, you can put your form inside a Window:
var window = Ext.create('Ext.window.Window',{
title:'update',
width:300,
centered: true,
modal: true,
items: [{
xtype:'formpanel'
viewModel : {
data: {
employee: record
}
},
...
})
window.show();
And your handlers should close/destroy the window, not just destroy the formpanel:
this.up('window').close();
this.up('window').destroy();

Sencha Touch 2 - Get Form values using MVC

My question s in relation to the possible answer in this post Sencha Touch 2 - How to get form values?
Im having the same issue trying to retrieve the values from a form in a View using a Controller.
My current error is Uncaught TypeError: Object # has no method 'getValues'
View:
Ext.define("App.view.Login", {
extend: 'Ext.form.Panel',
requires: [
'Ext.field.Password'
],
id: 'loginview',
config: {
items: [{
xtype: 'titlebar',
title: 'Login',
docked: 'top'
},
{
xtype: 'fieldset',
id: 'loginForm',
defaults: {
required: true
},
items: [{
items: [{
xtype: 'textfield',
name: 'username',
label: 'Username:'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password:'
}]
}]
},
{
xtype: 'toolbar',
layout: {
pack: 'center'
}, // layout
ui: 'plain',
items: [{
xtype: 'button',
text: 'Register',
id: 'register',
ui: 'action',
}, {
xtype: 'button',
text: 'Login',
id: 'login',
ui: 'confirm',
}] // items (toolbar)
}]
}
});
Controller:
Ext.define('App.controller.Login', {
extend: 'Ext.app.Controller',
requires: [
'App.view.Login',
'Ext.MessageBox'
],
config: {
refs: {
loginForm: '#loginForm',
register: '#register',
login: '#login'
},
control: {
register: {
tap: 'loadRegisterView'
},
login: {
tap: 'loginUser'
}
},
history: null
},
loadRegisterView: function(btn, evt) {
/*var firststep = Ext.create('App.view.Register');
Ext.Viewport.setActiveItem(firststep);*/
},
loginUser: function(btn, evt) {
var values = loginForm.getValues();
console.log(values);
}
});
Thanks
Edit:
So the below code works but its not how i see everyone doing it.
var form = Ext.getCmp('loginview');
console.log(form.getValues());
Everyone else does this.getLoginView().getValues(); . I dont understand "this" is in the wrong scope and where would getLoginView even be declared? No one ever includes this information in their snippets. Here is another example Sencha Touch 2 - How to get form values?

Add xtype in view below the "id":
xtype: 'loginform',
and then replace the reference of loginForm with this:
loginForm: 'loginform',
Your code will work. The mistake you were doing is you were trying to access the method of 'formpanel' in 'fieldset'.

ExtJS MVC form references

I'm new to Sencha ExtJS. I've just started creating a MVC application. Currently I'm trying to create a login screen for that application, but I can't get reference to my login form from login controller. Here is my code:
app.js
Ext.application({
name: 'Fleximanager',
requires: [
],
controllers: [
'Login'
],
autoCreateViewport: true,
init: function() {
}
});
Viewport.js
Ext.define('Fleximanager.view.Viewport', {
extend: 'Ext.container.Viewport',
requires:[
'Fleximanager.view.login.Flexilogin'
],
layout: 'fit',
items: [{
xtype:'flexilogin'
}]
});
Flexilogin.js
Ext.define('Fleximanager.view.login.Flexilogin', {
extend: 'Ext.panel.Panel',
xtype: 'flexilogin',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
id: 'flexilogin',
style: {background: '#8fc33a'},
items: [{
xtype:'panel',
title: 'Login',
frame: true,
width: 350,
height: 200,
layout: 'fit',
items: {
layout: 'anchor',
id: 'flexiloginform',
bodyPadding: 15,
defaultType: 'textfield',
items: [{
fieldLabel: 'Username',
name: 'username',
allowBlank: false
},{
fieldLabel: 'Password',
name: 'password',
inputType: 'password',
allowBlank: false
}],
buttons: [{
text: 'Register',
id: 'registerbtn',
action: 'register'
},{
text: 'Login',
id: 'loginbtn',
formBind: true,
}]
}
}]
});
and the controller's Login.js
Ext.define('Fleximanager.controller.Login', {
extend: 'Ext.app.Controller',
requires: [
'Fleximanager.view.login.Flexilogin',
],
refs:[{
ref: 'loginbtn',
selector: '#loginbtn'
}],
init: function(){
this.control({
'loginbtn': {
'click': function(){
console.log('click');
}
}
})
}
});
The code is supposed to log 'click' to console after you click the login button, but it does nothing. Can anyone help me?
Thanks for any answer.

The problem lies in how you are referencing the button.
refs:[{
ref: 'loginbtn',
selector: '#loginbtn'
}],
Is creating a reference getter method this.getLoginbtn to use in the controller, but it cannot be used in this.control
The string key in this.control is a identifier like defined in Ext.ComponentQuery.query. It searches for xtype/alias and itemId.
this.control({
'flexilogin #loginbtn': {
^ xtype ^ itemId
Note that you should use itemId instead of id because id must be unique on the page at any moment, itemId should be unique inside a component; change like this:
{
text: 'Login',
itemId: 'loginbtn',
^ replace id by itemId
formBind: true,
name: 'login'
}

Just give a name to your button like this,
{
text: 'Login',
id: 'loginbtn',
formBind: true,
name: 'login'
}
and now in controller, put this code:
this.control({
'button[name="login"]': {
click: function(){
console.log('click');
}
}
})
This will serve your purpose.

How can i use a button on a sencha tabbar to put an overlay panel

I am working with a sencha app and we have 3 tab panels but want to add an extra button to the tab bar that instead of sliding to a tab, just overlays a panel with buttons ontop of the first tabpanel. Eg if you are on the first tab and press the button then the overlay panel is displayed over top. If you are on the third tab panel it then takes you back to the first tabpanel and overlays the button panel.
I can display the button but can not get it to just overlay the tab panel with a panel with the buttons.
MainPanel:
Ext.define("MyApp.view.Main", {
extend: 'Ext.Panel',
requires: ['Ext.TitleBar', 'Ext.tab.Panel'],
config: {
fullscreen: true,
id: 'viewMain',
layout: 'vbox',
items: [
{
xtype: 'topbar'
},
{
xtype: 'tabpanel',
tabBarPosition: 'bottom',
flex: 1,
id: 'mainTabs',
cardSwitchAnimation: false,
animation: false,
ui: 'bottom',
items: [
{
xtype: 'mappanel',
id: 'mapPanel'
},
{
xtype: 'showbutton'
},
{
xtype: 'searchpanel'
},
{
xtype: 'directionspanel'
},
{
xtype: 'rcpanel'
}
]
}
]
}
});
ShowButton:
Ext.define("MyApp.view.ShowButton", {
extend: 'Ext.Button',
requires: ['Ext.Button'],
xtype: 'showbutton',
config: {
title: 'Show',
iconCls: 'locate4',
id: 'showBtn',
text: 'OK',
id: 'showBtn',
iconCls: 'locate4',
iconMask: true,
handler: function () {
this.fireEvent('onShowBar', this);
}
}
});
ShowController
Ext.define('MyApp.controller.ShowController', {
extend: 'MyApp.controller.BaseController',
config: {
refs: {
},
control: {
}
},
//called when the Application is launched, remove if not needed
launch: function(app) {
},
onShowBar: function () {
var newShowBar = {
xtype: 'showBar',
docked: 'bottom'
};
this.add([newShowBar]);
}
});
ShowBar:
Ext.define("MyApp.view.ShowBar", {
extend: 'Ext.Panel',
xtype: 'showbar',
config: {
iconCls: 'locate4',
docked: 'bottom',
modal: false,
style: 'opacity:0.8',
items: [
{
iconCls: 'home',
iconMask: true,
poiGroup: 'accomm'
},
{
iconCls: 'star',
iconMask: true,
poiGroup: 'attractions'
}/*,
{
iconCls: 'hotoffer',
iconMask: true,
poiGroup: 'membersavings'
}*/
]
}
});

I would suggest using a toolbar docked at the bottom of a container (layout: card) which contains your other views, instead of using the tabbar. If you add buttons to the toolbar and set animations for switching views, the toolbar behaves just like the tabbar. It also allows you to add an extra button which displays your overlay.