Is it possible to call a controller function from a href tag inside a html string? ... I can't seem to get anything working so i think i may be doing something wrong.
Im using ExtJS 6.6
I have some user information and then a logout link, but nothing works, this is what i have.
items: [{
region: 'north',
height: 200,
items: [{
xtype: 'panel',
layout: 'column',
items: [{
xtype: 'panel',
columnWidth: 0.3
}, {
xtype: 'panel',
columnWidth: 0.7,
html: '<div class="userstuff" style="text-align: right;">Hello, welcome to my page<br />Log out</p></div>'
}]
}]
}]
The bit that i cant get going is;
Log out
If i use a button xtype, i can call it through the handler, and it works perfect, but i now need to change it to a text link.
This is the button code that works;
{
xtype: 'button',
text: 'Logout',
handler: 'onLogout'
}
Any help getting this text link to call onLogout would be fantastic.
Thanks
You could call onLogout using Event delegation.You need to attach listener on your panel like this
{
xtype: 'panel',
listeners: {
element: 'el',
delegate: 'a.logout',
click: 'onLogoutClick'
}
}
You can check here with working fiddle.
Code Snippet
Ext.define('MyViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myview',
/**
* This event will fire on Logout click
*/
onLogoutClick: function(e) {
console.log(e);
Ext.Msg.alert('Success', 'You have clicked on logout button');
}
});
Ext.create({
xtype: 'panel',
title: 'Running a controller function from an ExtJS 6.6 href link',
layout: 'border',
controller: 'myview',
height: 200,
items: [{
region: 'north',
height: 200,
items: [{
xtype: 'panel',
layout: 'column',
items: [{
xtype: 'panel',
columnWidth: 0.3
}, {
xtype: 'panel',
columnWidth: 0.7,
listeners: {
element: 'el',
delegate: 'a.logout',
click: 'onLogoutClick'
},
html: '<div class="userstuff" style="text-align: right;">Hello, welcome to my page<br />Log out</p></div>'
}]
}]
}],
renderTo: Ext.getBody()
});
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();
}
I am learning ExtJS MVC
I want to click button then create a panel in specific container. But I am confuse about the renderTo config. I don't know how to render to right side container.
My codes as below.
First I define two container in Viewport
Ext.define('MyTest.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
requires: [
'MyTest.view.button.TestButton',
],
items: {
xtype: 'container',
itemId: 'main',
region: 'center',
border: false,
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [{
xtype: 'container',
itemId: 'left',
style: 'background-color: black;',
flex: 1,
items: [{
xtype: 'testbtn'
}]
}, {
xtype: 'container',
itemId: 'right',
flex: 1
}]
}
});
Button in view
Ext.define('MyTest.view.button.TestButton', {
extend: 'Ext.button.Button',
alias: 'widget.testbtn',
initComponent: function() {
var me = this;
Ext.apply(this, {
height: 100,
width: 100
});
me.callParent(arguments);
}
});
And click event in controller
Ext.define('MyTest.controller.Button', {
extend: 'Ext.app.Controller',
views: ['MyTest.view.button.TestButton'],
refs: [{
ref: 'testbtn',
selector: 'testbtn'
}],
init: function() {
this.control({
'testbtn': {
click: this.test
}
});
},
test: function() {
Ext.create('Ext.panel.Panel', {
height: 200,
width: 400,
renderTo: Ext.getBody()
});
}
});
Now it just can render to body. How to render it in right side container?
Thanks a lot
You can use the add method to add to the items array of a panel or container.
For example:
Ext.ComponentQuery.query('#westPanel')[0].add({ html:'Some New Component Here.' });
and here is the full code for a more in-depth example:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel',{
renderTo:Ext.getBody(),
height:800,
layout:'border',
tbar:[{
text:'Add Html To East Region',
handler: function(btn){
Ext.ComponentQuery.query('#westPanel')[0].add({
html:'Oh, Hello.'
});
}
}],
defaults:{
xtype:'panel'
},
items:[{
region:'center',
html:'Center Panel'
},{
region:'west',
width:400,
itemId:'westPanel',
items:[]
}]
});
}
});
And a fiddle for demonstration of the working code
I try to use jquery together with extjs. I want when I click on an image to get the id of the image and store it in a variable. I use jquery for this part. The image lives in an extjs panel. I use with no result and afterrender listener Here is my code:
items: [{
xtype: 'tabpanel',
width: 600,
activeTab: 0,
flex: 2,
layout: {type: 'fit'},
items: [{
xtype: 'panel',
title: 'Images',
items: [{contentEl:'img',autoScroll:true,height:500 }],
listeners: {afterrender: function(c){c.el.on('click', function()
{
$('img').on( 'click',function() { // event delegation
var idImg = $(this).attr('id');
alert(idImg);
addMarker(idImg)
var alt = $(this).attr('alt'); // get the value of alt
$('#curInterId').val(alt); // place the internal id in the text box
});
});}},
},{
xtype: 'panel',
title: 'Material',
items: [{contentEl:'msg',autoScroll:true,height:500 }]
}]
}],renderTo : Ext.getBody()
},
Try something like this:
Fiddle Link
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create("Ext.panel.Panel", {
layout: "fit",
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
title: 'Images',
items: [{
xtype: 'image',
height: 200,
width: 600,
src: 'http://www.newbridgegreen.com/assets/bootstrap/img/sencha_logo.png',
listeners: {
el: {
click: function() {
Ext.Msg.alert("Message");
}
}
}
}]
}]
});
}
});
The key here is the el: within listeners, you can add standard DOM click handlers to any element using this method.
Panel with accordion layout is contained in vbox with another one item.
I have a 2 troubles:
When i'm trying to set flex to panel with accordion layout it causes the error "[E] Layout run failed"
When height is fixed by constand it not working as expected: first panel does not collapse.
Here is example of code:
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 500,
layout: 'vbox',
items: [{
xtype: 'datefield'
}, {
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
},
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: true,
animate: true
},
items: [{
title: 'Panel 1',
html: 'Panel content 1!'
}, {
title: 'Panel 2',
html: 'Panel content 2!'
}, {
title: 'Panel 3',
html: 'Panel content 3!'
}],
}],
renderTo: Ext.getBody()
});
http://jsfiddle.net/6DHM4/1/
I couldn't reproduce your error, but things look good for me with flex: 1 if I change the layout: 'vbox' to
layout: {
type: 'vbox',
align: 'stretch'
}
(see this fiddle)
may be the right way is to use layout 'anchor' against 'vbox'?
try that way?
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 500,
layout: 'anchor',
items: [
{xtype: 'datefield'},
{
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
,anchor: '100%'
},
...
I don't know why, but when i test it on jsfiddle.net it shows bug: 'first panel does not collapse'. But if i test it here http://try.sencha.com/ for example, it works fine.
So I have the view below. This view is called when an item from a list on a previous view is tapped. The lists on this view are filtered based on the previous selection, but I want to be able to add items to these lists that contain the same filter (store field = "value"). How can I get it so that the value that is filtering the lists is also passed when clicking the button and loading a new view?
My View page.
Ext.define("MyApp.view.ShowAll", {
extend: 'Ext.Container',
requires: ['Ext.NavigationView', 'Ext.dataview.List', 'Ext.layout.HBox', 'Ext.Container'],
xtype: 'myapp-showall',
config: {
layout: 'hbox',
items: [
{
layout: 'fit',
xtype: 'container',
itemId: 'listContainer',
flex: 1,
items: [
{
xtype: 'list',
store: 'leftStore',
itemTpl: '{storeField}',
emptyText: 'No values added yet'
},
{
xtype: 'toolbar',
docked: 'bottom',
padding: '5px',
items: [{ xtype: 'button', itemId: 'addValue', text: 'Add Values', ui: 'confirm', width:'100%' }]
}
]
},
{
style: "background-color: #333;",
width: 10
},
{
layout: 'fit',
xtype: 'container',
itemId: 'listContainerTwo',
flex: 1,
items: [
{
xtype: 'list',
store: 'rightStore',
itemTpl: '{storeField}',
emptyText: 'No values added yet'
},
{
xtype: 'toolbar',
docked: 'bottom',
padding: '5px',
items: [{ xtype: 'button', itemId: 'addValueRight', text: 'Add Values', ui: 'confirm', width:'100%' }]
}
]
}
]
}
});
Here is part of my Controller (which sets the store filters)
showValues: function() {
this.showValueDetails(arguments[3]);
},
showValueDetails: function(record) {
var title = "Value: "+record['data']['name'];
var showValue = Ext.create('MyApp.view.ShowAll', { title: title });
showValue.setRecord(record);
var valueName = record['data']['name'];
var leftStore = Ext.getStore("leftStore");
leftStore.clearFilter();
leftStore.filter('storeField', valueName);
var rightStore = Ext.getStore("rightStore");
rightStore.clearFilter();
rightStore.filter('storeField', valueName);
this.getMain().push(showValue);
},
It sets the page title correctly and filters the store also. I just am unsure how to pass a variable so when the buttons are clicked the valueName (from controller) is passed to the next view.
Since I was able to set the title fine using the code above, once I click the submit button all it takes is the following to get the title.
var titleVariable = Ext.getCmp('ShowAll')['title'];