ExtJS MVC form references - javascript

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.

Related

No method named on Ext.Button

i have tried do calling form by button from Main view using controller. So I use Main view js, form js and controller js:
Ext.define('App.view.main.Main', {
extend: 'Ext.form.Panel',
id:'control-panel',
. . .
items: [{
xtype:'button',
ui: 'action',
text: 'Renter',
id: 'RenterId',
handler:'adClick'
. . .
and controller js:
Ext.define('App.view.main.ButtonController', {
extend: 'Ext.app.ViewController',
alias: 'controller.button',
requires: ['App.view.forms.RenterData',
],
views: ['App.view.main.Main'],
refs: [{
ref: 'control-panel',
selector: 'control-panel'
}],
adClick: function() {
Ext.create('Ext.panel.Panel', {
title:'Test',
layout: 'fit',
autoshow: true,
items: {
xtype:'panelxtype'
}
})
}
});
When I try clicking my button, I face with next: No method "nameOfHandler" named on Ext.Button. So i think handler from Main view dosn't work...
Here is a working example of what you want with a controller 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',
requires:['Test.view.MainController'],
controller:'mainController',
width: 600,
height: 400,
layout: 'border',
items: [{
region: 'north',
height: 100,
items: [{
xtype: 'button',
text: 'Open Form in pop up window',
handler: 'onOpenForm'
}, {}, {
xtype: 'button',
text: 'Open Form View Port Center Region',
handler: 'onOpenFormInPanel'
}]
}, {
region: 'center',
id: 'mycenter',
title: 'Center Region',
items: [{
html: ''
}]
}]
})
app/view/MainController.js
Ext.define('Test.view.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.mainController',
onOpenFormInPanel: function () {
let myForm = Ext.create('Test.view.MyForm')
this.getView().items.getAt(1).add(myForm);
},
onOpenForm: function () {
Ext.create('Ext.window.Window', {
title: 'Popup',
width: 400,
height: 100,
autoShow: true,
items: {
xtype: 'myForm'
}
})
}
});
app/view/MyForm.js
Ext.define('Test.view.MyForm', {
extend: 'Ext.form.Panel',
xtype: 'myForm',
width: 400,
height: 200,
items: [{
xtype: 'textfield',
name: 'mtfield',
fieldLabel: 'TextField'
}]
})

How to create daynamic tree panel in Extjs?

I want to have a dynamic tree panel in my project. I use from sencha docs example For this component.
But, I have a error when run my project:
Ext.data.schema.Schema.lookupEntity(): No such Entity "Category".
MyProject/Model/Category.js:
Ext.define('MyProject.model.Category',{
extend: 'Ext.data.Model',
fields: ['id', {
name: 'name',
type: 'string'
}]
});
MyProject/classic/src/view/category/Cateogry.js:
Ext.define('MyProject.view.category.Category', function(){
var store = Ext.create('Ext.data.TreeStore', {
model: 'Category',
root: {
name: 'Product'
}
});
var items = [{
items:[{
xtype: 'textfield',
fieldLabel: 'Name'
},{
xtype: 'treepanel',
reference: 'treepanel',
height: 200,
width: 400,
frame: true,
store: store,
rootVisible: false
},{
xtype: 'button',
text: 'Add',
listeners: {
click: 'onClick'
}
}]
}];
return{
extend: 'Ext.panel.Panel',
requires: [
'Ext.form.Panel',
'Ext.rtl.*'
],
controller: 'categorycontroller',
alias: 'widget.category',
layout: 'vbox',
items: items
};
});
You have to add your model as required:
...
requires: [
'Ext.form.Panel',
'Ext.rtl.*',
'ProjectName.model.Category'
],
...

Sencha Touch: Enter key to submit form

I have a Sencha Touch code base and I wanted to be able to use the "Enter" key to submit the initial log in to the application instead of having to click the button on a desktop. Here is my Login view:
Ext.define('App.view.Login', {
extend: 'Ext.form.Panel',
alias: 'widget.login',
requires:[
'Ext.form.FieldSet',
'Ext.field.Email',
'Ext.field.Password'
],
config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'App'
},
{
xtype: 'fieldset',
margin: '.5em .5em 1.5em',
title: 'Login',
items: [
{
xtype: 'emailfield',
name: 'email',
placeHolder: 'email#example.com',
required: true
},
{
xtype: 'passwordfield',
name: 'password',
placeHolder: 'password',
required: true,
}
]
},
{
xtype: 'container',
layout: {
type: 'vbox'
},
margin: '10px',
items:[
{
xtype: 'button',
margin: '10px',
itemId: 'login',
text: 'Login'
}
]
}
]
}
});
And here is my Login controller:
Ext.define("App.controller.Login", {
extend: "Ext.app.Controller",
config: {
views: ["Login", "user.Home"],
stores: ["LoginInstance"],
refs: {
password: 'passwordfield[name="password"]',
login: {
autoCreate: true,
selector: "login",
xtype: "login"
}
},
control: {
password: {
keyup: function(field, e) {
if(e.event.keyCode === 13) {
console.log('Do login');
this.onLoginTap();
}
}
},
"login #login": {
tap: "onLoginTap"
},
// ...
}
},
onLoginTap: function() { ... } // do the login
However, this seems to not do anything (that is, not even the console.log appears in the console!). Does anyone have have suggestion as to what I could be doing wrong?
It looks like there's more than one issue in your code.
control doesn't target your password field. The key password references an component with xtype password. The correct way to reference it is either passwordfield if you never have more than one of them or 'passwordfield[name="password"]'.
the purpose of refs is to create a method of the controller like this.getPassword() to get the password field. Also the way you define it is invalid. It must be like refs: [{ref: 'password', selector: 'passwordfield[name="password"]'
you must not nest configurations inside a config property. extend: "Ext.app.Controller", config: { views: should be extend: "Ext.app.Controller", views:
I don't think this is exhaustive. There must be more issues.
Please read the documentation and don't try to code by trial and error. It is not a good programming practice.

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'.

navigation not working in sencha

Hi i am new to sencha and i am trying on navigation here i am clicking on one button in VehicleSubPage1 then it navigate to AccountInfo but it is not working,
here code i am writing
can any one help me
*VehicleSubPage1 class *
Ext.define("myproject.view.VehicleSubPage1", {
extend: 'Ext.navigation.View',
xtype:'VehicleSubPage1form',
requires: [
'myproject.view.AccountInfo'
],
config: {
title: 'Account Info',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: [
{
xtype: 'button',
text: 'Push another view!',
handler: function() {
view.push({
xtype:'AccountInfoform'
});
}
}
]
}
});
AccountInfo class
Ext.define("myproject.view.AccountInfo", {
extend: 'Ext.Panel',
xtype:'AccountInfoform',
config: {
url: 'contact.php',
title: 'Account Info',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items:[
{
xtype: 'button',
text: 'send',
ui: 'confirm',
handler:function(){
alert("clicked");
}
}
]
}
});
It seems the problem is that view in the button handler is undefined. What you actually want to do is to call the push method of the navigation view. So add an id attribute to your VehicleSubPage1 and change the handler into the following:
function() {
var accountInfo = Ext.getCmp('accountInfo'); //assuming you have set the id of VehicleSubPage1 as id: 'accountInfo'
accountInfo.push({
xtype:'AccountInfoform'
});
}

Categories

Resources