I am new to ExtJs.
I have been facing a problem in panels for getting panel html content.
xtype : 'panel',
id : 'first_block',
html : '<p>Hi this is belongs to first block.</p>',
listeners : {
render : function(c) {
c.body.on('click', function() {
alert('' + this.id);
alert(Ext.getCmp('first_block').items.getAt(0).getValue());
});
}
I am not getting html content, but i am getting id like "first_block-body".
Thanks in advance.
The html property defined the HTML you want in the content of your component, in this case an Ext.Panel.
Ext.Panels create a few layers of divs in order to provide things like headers, footers, toolbars, etc.
If all you want is a div with some content, you instead want to use an Ext.Component. Components don't have a body, so a couple things change in your code.
xtype : 'component',
id : 'first_block',
html : '<p>Hi this is belongs to first block.</p>',
listeners : {
render : function(c) {
c.on('click', function() {
alert('' + this.id);
alert(this.el.dom.innerHTML);
}, this);
}
Notice that I added a third parameter to your on call, which specifies the this scope of the function call. I also edited your alert to print out the innerHTML of the element, assuming that's what you were trying to do.
UPDATE:
If you are going to use this component in a layout, it may need to be able to have its height and width set, meaning it needs to be of type box in order to be an Ext.BoxComponent.
Ext.getElementById('yourId').innerHTML
Related
Our testing team require IDs or class values to be set on the HTML elements in our message popup boxes. This is for their automated tests.
I can pass in a class value for the dialog panel by passing in a cls value like so:
Ext.Msg.show({
title:'Reset Grid Layout',
msg: 'Are you sure that you want to reset the grid layout?',
cls:'Reset-Grid-Layout-Message',
buttons: Ext.Msg.YESNO,
fn: function (response) {
if (response == 'yes') {
}
},
icon: Ext.window.MessageBox.QUESTION
});
Now we also need it on the buttons, and also on the text being displayed. Is there some way of getting a cls value onto the buttons?
I was thinking it may be possible to expand the button parameter into something like :
buttons : [{name:'but1', cls:'asdf'}, {name:'but2', cls:'asdf2'}]
But google is not giving me back anything useful.
If your testing team uses Selenium for their automated test, adding ids/classes in every component could be difficult for both of you.
Overriding components in Ext is a good solution, but I don't recommend this because it will affect all your components. Unless you know what you're doing.
I suggest, extend Ext.window.MessageBox and generate classes for your buttons based on your parent cls.
// Put this somewhere like /custom/messagebox.js
Ext.define('App.MyMessageBox', {
extend: 'Ext.window.MessageBox'
,initConfig: function(config) {
this.callParent(arguments);
}
,makeButton: function(btnIdx) {
var me = this;
var btnId = me.buttonIds[btnIdx];
return new Ext.button.Button({
handler: me.btnCallback
,cls: me.cls + '-' + btnId
,itemId: btnId
,scope: me
,text: me.buttonText[btnId]
,minWidth: 75
});
}
});
To use:
App.Box = new App.MyMessageBox({
cls:'reset-grid-layout'
}).show({
title:'Reset Grid Layout'
,msg: 'Are you sure that you want to reset the grid layout?'
,buttons: Ext.Msg.YESNO
,icon: Ext.window.MessageBox.QUESTION
});
Your buttons will have reset-grid-layout-yes and reset-grid-layout-no class.
You can do the same with other components you have. Check out the Fiddle. https://fiddle.sencha.com/#fiddle/7qb
You should refer to the API
cls : String A CSS class string to apply to the button's main element.
Overrides: Ext.AbstractComponent.cls
You can also use the filter on right side (not the one in the right top corner). Just type cls and you will see all properties, methods and events containing cls (note that you see by default just public members, use the menu on the right of this searchfield to extend this)
Edit
If you just need it for testing purpose I would recommend to override the responsible method. This should work (untested!)
Ext.window.MessageBox.override({
buttonClasses: [
'okCls', 'yesCls', 'noCls', 'cancelCls'
],
makeButton: function(btnIdx) {
var btnId = this.buttonIds[btnIdx];
var btnCls = this.buttonClasses[btnIdx];
return new Ext.button.Button({
handler: this.btnCallback,
cls: btnCls,
itemId: btnId,
scope: this,
text: this.buttonText[btnId],
minWidth: 75
});
}
});
I am new to ExtJS.
This is my window definition :
this.dialog = new Ext.Window({
title : "About us",
layout : 'anchor',
modal : true,
autoEl : {
tag : "iframe",
id: "myframe",
src : "../editor/actorseditor.html",
height: 500,
width : 600
} });
this.dialog.show();
I want to close my dialog window from "actorseditor.html".
How to achieve this. Also the opened window is not having close button.
Thanks in advance
This will only work if the html page in your iFrame is from the same application as your parent page. Or at least the protocol, subdomain, domain and port are all the same.
You will need to expose a global function in your parent page that will be called by the JavaScript running in the child page (iframe).
In your child page you call:
if (window.parent && window.parent.myGlobalFunction) {
window.parent.myGlobalFunction('hello!');
}
In your parent page you include the following global function (name it as you wish of course):
function myGlobalFunction(input){
console.log('message received:'+input);
MyApp.app.fireEvent('closeMyWindow',input);
}
This assumes that you are using MVC and you created property 'app' and set it to 'this' in the application launch function. And that you have a controller that is listening for aplication wide event like this:
Ext.define('MyApp.controller.Qnum', {
extend:'Ext.app.Controller',
init:function(){
this.control({
...
});
//listen for app wide event fired by : MyApp.app.fireEvent('closeMyWindow',input);
this.application.on({
closeMyWindow: this.closeWindowItsDrafty,
scope: this
});
},
closeWindowItsDrafty:function(){
//get reference to my window
//call myWindow.close();
}
I'll assume that in actorseditor.html, you must have a button
In this button you can set this listener:
listeners : {
click : function () {
Ext.getCmp('yourdialogid').close();
}
}
You also need to put an id to your dialog box.
Please try following inside your close button listener:
var parentDialogWindow = window.parent.Ext.cmp('ID_OF_DIALOG_WINDOW');
parentDialogWindow[parentDialogWindow.closeAction]();
I cannot see to get the buttons from an Ext.FormPanel defined like this:
Ext.apply({
....
buttons: [
{
text: 'Save',
itemId: 'btnSave'
}
]
});
I've tried getComponent on the FormPanel instance, but that doesn't return btnSave. Is btnSave on a different element than the rest of the form?
You can't use getComponent() because the buttons are not part of the items config.
getComponent() - "Examines this container's items property and gets a direct child component of this container."
You could give the button an id and then use Ext.getCmp() or use component query as #limscoder shows.
You should be able to use the container's "query" method to retrieve descendant components:
panel.query("#btnSave")
In Extjs 4.2, I had similar code to yours with buttons at the bottom of a window.
This worked for me:
var bbar = this.getDockedItems('toolbar[dock="bottom"]')[0];
var button = bbar.getComponent('btnSave');
The toolbar and items are not in your code but they are implied with buttons:[{}]
When the user clicks on this element, I want it to show an alert.
However, when I click on the DIV that this Panel generates, nothing happens.
How can I make an alert execute when the user clicks on the following panel?
var content = new Ext.Panel({
region:'center',
margins:'5 0 5 5',
cls:'empty',
bodyStyle:'background:ivory; font-size: 13pt',
html:'<p id="test123">This is where the content goes for each selection.</p>',
click: function() {
alert('was clicked');
}
});
You haven't accepted an answer, so I'll assume you're still unclear on this. Here are a few pointers...
First, as coded your Panel will render as a plain square. If you're expecting it to look like a Panel, you should give it a title (so the title bar will render).
Second, as mentioned, click is not a Panel event (it's an Element event). So you have several ways of getting to the behavior you want. You can manually attach a listener to the underlying DOM element after the Panel is rendered:
Ext.get('txest123').on('click', function(){
alert('foo');
});
You could also do as I mentioned in the comments of another answer to generically handle any body click:
// .body is a Panel property for the body element
content.body.on('click', function(){
alert('foo');
});
If you really want to restrict the click to only the child p you could add a check:
// e is the event object, t is the target DOM node
content.body.on('click', function(e,t){
if(t.id == 'txest123'){
alert('clicked the p');
}
});
If I was coding this, I'd probably do something more like this:
var content = new Ext.Panel({
region:'center',
renderTo: document.body,
margins:'5 0 5 5',
cls:'empty',
title: 'My Panel',
id: 'txest123',
bodyStyle:'background:ivory; font-size: 13pt',
html:'This is where the content goes for each selection.',
listeners: {
'render': {
fn: function() {
this.body.on('click', this.handleClick, this);
},
scope: content,
single: true
}
},
handleClick: function(e, t){
alert(this.id); // the panel
alert(t.innerHTML); // the clicked el
}
});
Now the id is on the Panel (where it should be) and you can use Panel and/or Element methods to access child elements as needed. It's best to keep id's at the highest level possible. You'll notice too that the callback function is executed in the scope of the Panel (scope:this) so that inside handleClick you can treat this as the Panel itself and access any of its properties or methods.
So, without knowing exactly what you're trying to achieve, I can't provide you with the exact code you need. However, this should hopefully give you some ideas.
EDIT: I meant to say this originally... in your code (as posted) you are not actually rendering the Panel. As I mentioned in my answer to your related question, if you are adding the Panel as an item to a container that is lazy-rendered, the Panel's DOM won't be available for selection until after the container has rendered it. In my code above I added renderTo so that I don't have this issue, but if you're not doing that you'll have to wait until the Panel is rendered at some time later to access it.
The Panel Component does not expose a click event, so the one you're passing into the config never gets fired.
Try putting an id on your Ext.Panel object and then getting its element using Ext.get(). Then add a click event through on():
var content = new Ext.Panel({
id: 'myPanel',
region:'center',
margins:'5 0 5 5',
cls:'empty',
bodyStyle:'background:ivory; font-size: 13pt',
html:'<p id="txest123">This is where the content goes for each selection.</p>'
});
Ext.get('myPanel').on('click', function() {alert('You clicked me');});
The following sample is a bit rough but it works for me. It is a panel with a box component, which is showing a thumbnail. When clicking on the thumbnail, it is showing a lightbox with slimbox2. Not pretty, but very effective. The hardcoded images are just for test here.
var panel = new Ext.Panel({
title : 'Image',
header : false,
frame : true,
border : false,
bodyStyle : 'padding : 5px',
width : 125,
items : [{
xtype : 'box',
height : 115,
width : 115,
listeners : {
'render': function() {
var id = Ext.id(this);
Ext.fly(id).addListener('click', function () {
jQuery.slimbox('thisisnotanimage', 'CBX');
});
}
},
autoEl: {
tag : 'div',
html : 'somehtmltagstuff'
}
}
]
});
According to the API, click is not a valid event for Panels... However, you should still be able to add the click event to the underlying DIV element.
Ext.fly(e.id).addListener('click', Ext.getCmp(e.id) , this);
I believe you need something like:
var content = new Ext.Panel({
region:'center',
margins:'5 0 5 5',
cls:'empty',
bodyStyle:'background:ivory; font-size: 13pt',
html:'<p id="test123">This is where the content goes for each selection.</p>',
listeners: {
click: function() {
alert('was clicked');
}
}
});
So, I got a data store in my code that I'm loading in a function. In that store I want to use the each method to append each record to the body of a panel in a certain format.
What I'm trying to figure out is how to use this "each" method. Has anyone ever had to use it before? I'm relatively new to functions and programming in general so I'm trying to figure out what the "fn" and "scope" are relative to my own code.
Any help would be awesome if anyone has used this method in the ExtJS framework before.
Use Dataview for your case. Add the store and the XTemplate to your dataview and add this dataview as an item to your panel. It will be something like this:
this.store = new Ext.data.JsonStore({
url : 'myproxy.php',
baseParams : {
action : 'get_basket_files'
},
root : 'rows',
id : 'filename',
fields : ['filename', 'filepath', 'filesize', 'fileclass']
});
this.filesTemplate = new Ext.XTemplate(
'<div class="files_container"><tpl for=".">',
'<div id="{filename}" class="basket-fileblock"><div class="{fileclass}"></div>',
'<div class="filetext">{filename}</div></div> ','</tpl></div>');
this.filesTemplate.compile();
this.filesDataView = new Ext.DataView({
itemSelector : 'div.basket-fileblock', //Required
style : 'overflow:auto',
multiSelect : true,
store : this.store,
tpl : this.filesTemplate
});
var panel = new Ext.Panel({
layout : 'fit',
items : [this.filesDataView]
});
Here XTemplate is the HTML template of each of the items. Have a look at the ExtJS documentation which provides a number of examples for XTemplate.
And for an example, ExtJS each function can be used this way:
Suppose an array of items is myItems. So,
Ext.each(myItems, function(eachItem){
//Do whatever you want to do with eachItem
}, this);
It sounds like you want an Ext.DataView.
DataView use Template or XTemplate to create a rendering of data in a store.
So you instantiate a configured dataview, including a reference to your store, and the template to use, and add that DataView to your panel.