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.
Related
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()
});
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'm trying to create a panel like:
with the below code as a beginning, however I'm not sure how can I create a list/table inside a panel in a way like it looks below in the image.
I also have to load the data dynamically inside the panel.
also I'm using panel since I want it to be a collapsible one
$cls.superclass.constructor.call(this, Ext.apply({
items: [
this.section({
items: [
this.panel = new Ext.Panel({
items: [
this.section({
items: []
})
],
collapsible: true,
})
]
})
]
}, cfg));
Ext.extend($cls, Panel, {
getData: function(data) {
//here I have the entire data I want to show in the list. just not sure how?
}
});
any ideas?
You can create custom rows with Ext.Panel. The example shows only show creating list. To add part where AND, OR you can change structure of data and create row with nested panel row.
Here is example of creating custom list with panel:
Ext.onReady(function () {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
title: 'ExtJS Master Panel',
items: [
collapsibleList = new Ext.Panel({
title: 'Collapsible List',
collapsible: true,
hideBorders: true,
padding: '10px',
height: 400
})
],
getData: function () {
return new Promise(function (resolve) {
setTimeout(function () {
resolve([{
name: 'Last VM Scan',
decider: 'LESS THAN',
period: '30 days'
}, {
name: 'Last CERTVIEW Scan',
decider: 'LESS THAN',
period: '14 day'
}, {
name: 'Last checked In',
decider: 'LESS THAN',
period: '10 days'
}]);
}, 1000);
});
},
listeners: {
afterrender: function () {
console.log(collapsibleList);
Promise.resolve(this.getData()).then(function (data) {
for (var i = 0; i < data.length; i++) {
var pan = new Ext.Panel({
xtype: 'panel',
layout: 'hbox',
hideBorders: true,
items: [{
xtype: 'panel',
padding: '10px',
width: 200,
items: [{
xtype: 'label',
text: data[i].name
}]
}, {
xtype: 'panel',
padding: '10px',
width: 300,
items: [{
xtype: 'label',
text: data[i].decider
}]
}, {
xtype: 'panel',
padding: '10px',
items: [{
xtype: 'label',
text: data[i].period
}]
}]
});
collapsibleList.add(pan);
}
collapsibleList.doLayout();
});
}
}
});
});
Working Fiddle Link: https://fiddle.sencha.com/#view/editor&fiddle/2l14
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
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'];