Develop Reference

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 make two lists in different columns or boxes in a Sencha Touch app?

I am trying to make two lists in a same view, I am separating the view in two flex boxes and inside of this includes each list but it is not working properly.. any clue of this implementation or suggestion? I am working with Sencha Touch 2.3.1 framework.
Thanks in advance.
/**
* The home view
*/
Ext.define('xx.view.home.BlocksHome', {
extend : 'Ext.Container',
xtype : 'blocksHome',
requires: [
'Ext.TitleBar',
'Ext.dataview.List',
'xx.view.news.News'
],
config : {
items: [
// selection container
{
xtype : 'container',
cls : 'home-container',
flex : 2,
layout : {
type : 'hbox',
align: 'stretch'
},
defaults: {
xtype : 'container',
styleHtmlContent: true,
flex : 1
},
items : [
// Data Collection
{
cls : 'news-container',
iconCls: 'inbox',
height: 800,
layout: 'vbox',
items: [
{
cls : 'news-collection-header',
layout: 'hbox',
items: [
{
html: '<h4>' + xx.Text.getText('NEWS') +'</h4>',
flex: 2
},
{
xtype : 'button',
itemId: 'toNewsCollection',
iconCls: 'inbox',
text : xx.Text.getText('NEWS'),
flex: 1
},
{
xtype: 'news',
layout: 'card'
}
]
}
]
},
// Customers
{
cls : 'open-activities',
layout: 'vbox',
items: [
{
cls : 'open-activities-header',
layout: 'hbox',
items : [
{
html: '<h4>' + xx.getText('ACTIVITY_LIST_TITLE') +'</h4>',
flex: 2
},
{
xtype : 'button',
itemId: 'toActivitiesCollection',
iconCls: 'check2',
text : xx.Text.getText('ACTIVITY_LIST_TITLE'),
flex: 1
}
]
}
]
}
]
}
]
}
});
And here the view include in a card layout named "news"
Ext.define('xx.view.news.List', {
extend: 'Ext.dataview.List',
xtype: 'news',
requires: [
'Ext.TitleBar',
'Ext.plugin.PullRefresh'
],
config: {
plugins: [
{
xclass: 'Ext.plugin.PullRefresh',
listeners: {
painted: function(element) {
if (Ext.browser.is.IE) {
// position pull to refresh centered
Ext.get(element.query('.x-list-pullrefresh')[0]).setStyle('left', (Ext.getBody().getWidth() / 2) - 132 + 'px');
}
}
}
}
],
store: 'News',
itemTpl: '<div class="newslistline">' +
' <div class="newssubject"><tpl if="unread == \'true\'"><span style class="newsNew">new</span></tpl>{subject}</div>' +
' <div class="newsupdatedate">{[xx.Helper.formatSAPdate2Str(values.updatedate)]}</div>' +
' <div class="newsupdateby">{responsible}</div>' +
' <div class="newsattachment {[values.attflag == \'true\'? \'attachment\' : \' \']}">' +
' </div>' +
' </div>',
emptyText: xx.Text.getText('NEWS_LIST_EMPTY'),
loadingText: xx.Text.getText('NEWS_LIST_LOADING'),
items: [
{
docked: 'top',
xtype: 'titlebar',
title: xx.Text.getText('NEWS_LIST_TITLE')
}
]
}
});

Add flex:1 to each list. Here is a working example I created using Sencha Fiddle.
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('News', {
extend: 'Ext.data.Model',
config: {
fields: ['subject']
}
});
var store1 = Ext.create('Ext.data.Store', {
model: 'News',
data: [{
subject: 'Item1'
}, {
subject: 'Item2'
}]
});
var store2 = Ext.create('Ext.data.Store', {
model: 'News',
data: [{
subject: 'Record1'
}, {
subject: 'Record2'
}]
});
Ext.define('xx.view.news.List', {
extend: 'Ext.List',
xtype: 'news',
requires: ['Ext.TitleBar'],
emptyText: 'Empty',
loadingText: 'Loading',
config: {
itemTpl: '<div class="newslistline">{subject}</div>'
}
});
Ext.create("Ext.Container", {
fullscreen: true,
tabBarPosition: 'bottom',
items: [{
xtype: 'container',
cls: 'home-container',
flex: 2,
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
xtype: 'container',
styleHtmlContent: true,
flex: 1
},
items: [{
cls: 'news-container',
iconCls: 'inbox',
height: 800,
layout: 'vbox',
items: [{
cls: 'news-collection-header',
layout: 'hbox',
items: [{
html: '<h4>Title</h4>',
flex: 2
}, {
xtype: 'button',
itemId: 'toNewsCollection',
iconCls: 'inbox',
text: 'Something',
flex: 1
}]
}, {
xtype: 'news',
flex: 1,
store: store1
}]
}, {
cls: 'open-activities',
layout: 'vbox',
items: [{
cls: 'open-activities-header',
layout: 'hbox',
items: [{
html: '<h4>Title</h4>',
flex: 2,
itemTpl: '<div class="newslistline">{subject}</div>'
}, {
xtype: 'button',
itemId: 'toActivitiesCollection',
iconCls: 'check2',
text: 'Something',
flex: 1
}]
}, {
xtype: 'news',
flex: 1,
store: store2
}]
}]
}]
});
}
});

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.

Sencha Touch 2: Creating a Nested List inside a tab panel

I've tried to accomplish this a thousand different ways now, the Sencha Touch documentation is far from clear or helpful, and everyone seems to do it a different way...none of which have worked for me.
I've managed to get a List view working in the following way:
Ext.define("MyApp_eComm.view.Products", {
extend: 'Ext.navigation.View', //Needs to be navigation view to display the ProductList.js
xtype: 'products',
requires: [
'Ext.dataview.List',
'MyApp.view.ProductList',
'MyApp_eComm.view.ProductDetail'
],
config: {
title: sMY_CONST_TAB_BROWSE_TITLE,
iconCls: sMY_CONST_TAB_BROWSE_CLASS,
styleHtmlContent: true,
scrollable: true,
items: [
/*{
xtype: 'titlebar',
docked: 'top',
title: sMY_CONST_TAB_BROWSE_SUBTITLE
},*/
{
xtype: 'productlist',
title: sMY_CONST_TAB_BROWSE_SUBTITLE
}
]
}
})
This is my List view that goes inside the navigation view...inside the tab panel. the reason I've used a navigation view is so I can push a product details view on top from the disclosure component.
Ext.define("MyApp.view.ProductList", {
extend: 'Ext.List',
xtype: 'productlist',
requires: [
'MyApp.store.ProductStore'
],
config: {
itemTpl: '{text}',
store: 'ProductStore',
onItemDisclosure: true
}
});
Here is my model:
Ext.define('MyApp.model.ProductListModel', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
And finally here is my store with test data in, not nested at the moment:
Ext.define('MyApp.store.ProductStore', {
extend: 'Ext.data.Store',
config: {
model: 'MyApp.model.ProductListModel',
sorters: 'text',
data: [
{
text: 'Burgers',
},
{
text: 'Pasta',
},
{
text: 'Sausages',
},
{
text: 'Cabbage',
},
{
text: 'Lettuce',
},
{
text: 'Marmalade',
},
{
text: 'Honey',
},
{
text: 'Yogurt',
},
{
text: 'Cheese',
},
{
text: 'Milk',
},
{
text: 'Bread',
},
{
text: 'Butter',
},
{
text: 'Goats Milk',
},
{
text: 'Apple',
},
{
text: 'Oranges',
},
{
text: 'Bananas',
},
{
text: 'Jelly',
},
{
text: 'Spagetti Hoops',
},
{
text: 'Ravioli',
},
{
text: 'Wheatabix',
},
{
text: 'Cornflakes',
},
]
}
});

try to add so
config: {
title: sMY_CONST_TAB_BROWSE_TITLE,
iconCls: sMY_CONST_TAB_BROWSE_CLASS,
styleHtmlContent: true,
scrollable: true,
items:
{
xtype: 'productlist',
title: sMY_CONST_TAB_BROWSE_SUBTITLE
}
}

Sencha Ext JS 4, trouble creating draggable panel with another panel

I tried asking this question on the sencha forums and didn't have any luck:
http://www.sencha.com/forum/showthread.php?175816-Attempting-to-create-draggable-panel-within-another-panel-stuck-in-upper-left-corner
I'm attempting to add a small panel within another panel and allow users to drag it around the screen.
Ext.define('CS.view.StartScreen', { extend: 'Ext.panel.Panel',
alias: 'widget.startscreen',
items: [{
xtype: 'panel',
title: 'Hello',
// closable: true,
// collapsible: true,
draggable: true,
// resizable: true,
// maximizable: true,
constrain: true,
height: 300,
width: 300
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
layout: 'hbox',
pack: 'center',
items: [
{xtype: 'button', text: 'Click Me'}
]
}]
});
However whenever I attempt to drag the panel it snaps back to the upper left hand corner. Can anyone tell me what I'm doing wrong? Thanks!
Edit 1
Complete code of application with problem:
app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'CS',
appFolder: 'ccms/app',
autoCreateViewport: true,
controllers: [
'TestCreator',
'Primary',
'Manager'
],
launch: function(){
}
});
TestCreator.js
Ext.define('CS.controller.TestCreator', {
extend: 'Ext.app.Controller',
views: [
'testcreator.ViewTestCreator'
],
init: function(){
console.log('testcreator init');
this.control({
});
}
});
Primary.js
Ext.define('CS.controller.Primary',{
extend: 'Ext.app.Controller',
views: [
'ViewLogin',
],
init: function(){
this.control({
'viewport': {
afterrender: function(viewport, opts){
viewport.add([{
xtype: 'viewlogin',
itemId: 'viewlogin'
}]);
}
},
'viewlogin button[text = Submit]': {
click: function(btn, e, eOpts){
var form = btn.up('form').getForm();
form.submit({
success: function(form, action){
console.log(action.result);
btn.up('viewport').remove('viewlogin');
var viewport = Ext.ComponentQuery.query('viewport');
if(viewport.length > 0)
viewport[0].add({xtype: 'dashboard'});
},
failure: function(form, action){
},
scope: this
});
}
}
});
}
});
Manager.js
Ext.define('CS.controller.Manager', {
extend: 'Ext.app.Controller',
views: [
'ViewDashboard'
],
init: function(){
this.control({
'viewport > formbuilder': {
render: function(){
console.log('render yo');
}
}
});
}
});
Viewport.js
Ext.define('CS.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'fit'
})
ViewLogin.js
Ext.define('CS.view.ViewLogin',{
extend: 'Ext.panel.Panel',
alias: 'widget.viewlogin',
layout: {
type: 'vbox',
align: 'center',
pack: 'start'
},
items: [{
flex: 1,
border: false
},{
xtype: 'form',
url: '/index.php/auth',
baseParams: {
csrf_token: Ext.util.Cookies.get('ci_csrf'),
cs_method: 'user_login'
},
width: 300,
layout: 'anchor',
title: 'Login',
defaults: {
margin: '5 5 5 5'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Username',
inputType: 'text',
name: 'username'
},{
xtype: 'textfield',
fieldLabel: 'Password',
inputType: 'password',
name: 'password'
}],
buttons: [{
text: 'Reset',
handler: function() {
console.log('button pressed');
this.up('form').getForm().reset();
}
},{
text: 'Submit'
}]
},{
flex: 2,
border: false
}]
});
ViewDashboard.js
Ext.define('CS.view.ViewDashboard', {
extend: 'Ext.panel.Panel',
alias: 'widget.dashboard',
layout: 'fit',
bodyStyle: {"background-color":"#FF6600"},
items: [{
xtype: 'testcreator'
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
layout: 'hbox',
pack: 'center',
items: [{
xtype: 'splitbutton',
text: 'Applications',
handler: function(){
console.log('splitbutton');
},
menu: new Ext.menu.Menu({
items: [
{text: 'Item 1', hander: function(){}},
{text: 'Item 2', hander: function(){}},
]
})
}]
}],
listeners: {
render: function(sender){
console.log(sender);
sender.dropZone = new Ext.dd.DropZone(sender.body, {
getTargetFromEvent: function(e) {
console.log('getTargetFromEvent');
var temp = {
x: e.getX() - this.DDMInstance.deltaX,
y: e.getY() - this.DDMInstance.deltaY
};
console.log(temp);
return temp;
},
// On entry into a target node, highlight that node.
onNodeEnter : function(target, dd, e, data){
// Ext.fly(target).addCls('my-row-highlight-class');
},
// On exit from a target node, unhighlight that node.
onNodeOut : function(target, dd, e, data){
// Ext.fly(target).removeCls('my-row-highlight-class');
},
onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;
},
onNodeDrop : function(target, dd, e, data){
console.log('onNodeDrop');
data.panel.setPosition(50, 50, true);
return true;
}
});
}
}
});
TestCreator.js
Ext.define('CS.view.testcreator.ViewTestCreator', {
extend: 'Ext.panel.Panel',
alias: 'widget.testcreator',
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
draggable: true,
title: 'Form Builder',
width: 600,
height: 450,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
layout: 'hbox',
items: [{
text: 'File'
},{
text: 'Edit'
},{
text: 'Help'
}]
}],
items: [{
html: 'panel 1',
flex: 1
},{
html: 'panel 2',
flex: 2
}]
});

You have to implement drop zone for CS.view.StartScreen. For example you can add following render handler to the code:
render: function(sender) {
sender.dropZone = new Ext.dd.DropZone(sender.body, {
getTargetFromEvent: function(e) {
return {
x: e.getX() - this.DDMInstance.deltaX,
y: e.getY() - this.DDMInstance.deltaY
};
},
onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;
},
onNodeDrop : function(target, dd, e, data){
data.panel.setPosition(target.x, target.y);
return true;
}
});
}
Working sample: http://jsfiddle.net/lolo/5MXJ9/2/