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'
}]
})
Related
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.define('iTell.view.MarketView', {
extend: 'Ext.Container',
xtype: 'marketview',
config: {
scrollable: false,
layout: 'fit',
items: [
{
xtype: 'toolbar',
title: Malls,
docked: 'top',
items: [
{
xtype: 'button',
ui: 'back',
text: 'Back',
cls: 'backBtnCls',
iconMask: true,
id: 'exitAppBtn',
handler: function () {
this.up('marketview').fireEvent('exitApp', this);
}
},
{
xtype: 'spacer'
},
]
},
{
xtype: 'list',
loadingText: "",
scrollable: true,
scrollToTopOnRefresh: false,
selectedCls: 'item_selected_bg_style',
store: 'MarketStore',
},
]
},
loadData: function () {
test();
}
test(){
alert("this is the method to been called");
}
});
Why the test method not been called?
Add the this pointer
this->test();
I'd been searching for so long and I cannot find a concrete answer. Let's say I have an extended control from panel like this:
Ext.define('MyApp.view.admin.User',{
extend: 'Ext.panel.Panel',
config: {
canAdd: false,
canDelete: false,
canEdit: false
},
constructor: function(config){
this.initConfig(config);
this.callParent(arguments);
},
xtype: 'user',
requires: [
'MyApp.view.admin.UsersGrid',
'MyApp.view.admin.UserModel',
'MyApp.view.admin.UserController',
'MyApp.model.User'
],
viewModel: {
type: 'user'
},
controller: 'user',
frame: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'users-grid',
flex: 1
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Add',
glyph: MyApp.util.Glyphs.getGlyph('add'),
hidden: **[config.canAdd]**
listeners: {
click: 'onAdd'
}
},
{
xtype: 'button',
bind: {
disabled: '{!usersGrid.selection}'
},
text: 'Edit',
hidden: **[config.canEdit]**
hidden: this.setElementConfiguration,
glyph: Mofeg.util.Glyphs.getGlyph('edit'),
listeners: {
click: 'onEdit'
}
},
{
xtype: 'button',
bind: {
disabled: '{!usersGrid.selection}'
},
text: 'Eliminar',
glyph: MyApp.util.Glyphs.getGlyph('destroy'),
listeners: {
click: 'onDelete'
}
}
]
}
]});
I want to apply the hidden properties of the buttons based on the initial configurations, how can I accomplish it?
You can write an initComponent:
initComponent: function () {
var me = this,
editButton = Ext.ComponentQuery.query('button[itemId=edit]')[0],
canEdit = me.getCanEdit();
editButton.setHidden(canEdit);
me.callParent(arguments);
}
I am getting pretty desperate about this code and have no idea why it is not working. I am trying to load list from json file. He is my code:
views:
main view
Ext.define('Alerts.view.Main', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Topp Toolbar',
items: [{
xtype: 'button',
text: 'Alerts',
id: 'alertsButton',
handler : function(){
//alert('tap')
var pnl = Ext.getCmp('hiddenPanel');
pnl.showBy(this,"tl-bl");
}
}]
},
{
xtype: 'AlertsList'
},
{
xtype: 'panel',
id: 'hiddenPanel',
// We give it a left and top property to make it floating by default
left: 0,
top: 40,
// Make it modal so you can click the mask to hide the overlay
modal: true,
hideOnMaskTap: true,
// Make it hidden by default
hidden: true,
// Set the width and height of the panel
width: 400,
height: 400,
// Here we specify the #id of the element we created in `index.html`
contentEl: 'content',
// Style the content and make it scrollable
styleHtmlContent: true,
scrollable: true,
// Insert a title docked at the top with a title
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Add new',
items: [{
iconCls: 'add',
iconAlign : 'right',
id: 'newIcon',
handler : function(){
alert('icon')
//var pnl = Ext.getCmp('hiddenPanel');
//pnl.showBy(this,"tl-bl");
}
}]
}
]
}
]
}
});
AlertsList view:
Ext.define('Alerts.view.AlertsList', {
extend: 'Ext.Container',
requires: 'Ext.dataview.List',
xtype: "AlertsList",
config: {
fullscreen: true,
title: 'list',
layout: 'fit',
items: [
{
xtype: 'list',
store: 'Alert',
itemTpl: '<h1>item<h1>{name}',
}
]
}
});
model:
Ext.define('Alerts.model.Alert', {
extend: 'Ext.data.Model',
config: {
fields: ['name', 'reason', 'enabled', 'notify', 'phone']
}
});
store:
Ext.define("Alerts.store.Alert", {
extend: 'Ext.data.Store',
config: {
model: "Alerts.model.Alert",
autoLoad: true,
proxy: {
type: "ajax",
url : "app/store/Alerts.json",
reader: {
type: "json",
rootProperty: "alerts"
}
}
}
});
When i run the code, app loads fine, without any warns/errors - console is clear.
The main reason of the wrong behavior is that the store was not created before. Try to add the following changes. Add alias: 'store.alerts' to Alert store. Then use it as store: {type: 'alerts'} in the AlertsList. As mentioned here, this creates a store instance for you. Also I found some issues with the app layout, so I attach here short version of your code with my changes:
Ext.define('Test.view.Main', {
extend: 'Ext.Container',
config: {
layout: 'fit',
items: [{
xtype: 'toolbar',
docked: 'top',
title: 'Topp Toolbar'
}, {
xtype: 'AlertsList'
}]
}
});
Ext.define('Test.view.AlertsList', {
extend: 'Ext.dataview.List',
xtype: "AlertsList",
config: {
store: {
type: 'alerts'
},
itemTpl: '<h1>item<h1>{name}',
}
});
Ext.define('Test.model.Alert', {
extend: 'Ext.data.Model',
config: {
fields: ['name', 'reason', 'enabled', 'notify', 'phone']
}
});
Ext.define("Test.store.Alert", {
extend: 'Ext.data.Store',
alias: 'store.alerts',
config: {
model: "Test.model.Alert",
autoLoad: true,
proxy: {
type: "ajax",
url: "app/store/Alerts.json",
reader: {
type: "json",
rootProperty: "alerts"
}
}
}
});
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/