I am using formPanel like:
tbar: [
{
iconCls:'icon-previous',
hidden: true,
//id:'previous',
name:'previous',
handler:'onPClick'
},
{
xtype: 'tbfill'
},
{
iconCls:'icon-next',
hidden:true,
//id: 'next',
name: 'next',
handler:'onNClick'
}
],
initComponent: function(){
Ext.apply(this, {
layout: 'fit',
items: [
{
xtype:'textareafield',
name: 'name',
autoScroll: true
}]
});
this.callParent();
}
On click of next or previous icon, I want to hide previous and next icon which I am handling in controller.
To show Icon, I am using Ext.getCmp(id of icons).show();
It works fine but If two tabs calls the same view It give Duplicate id Error.
I want to show()/hide() on the basis of name field specified in tbar.
How should I do it?
I would suggest to use ComponentQuery to iterate through the element of any ExtJS component,if you don't want to hard code the id.For Ex:-
var tabBar = Ext.ComponentQuery.query('tab');
Then you can further iterate through the element of tabBar element to operate on them.
tabBar.forEach(function(i){
//Here you can further iterate through another level if any,and operate on the elements
i.setHidden(true);
});
For more information Refer:-Sencha Docs For Component Query
Related
I want to remove the active tab from sencha ext.
Assume that am into controller file of the view.
Note: I have used remove() as well as destroy().
destroy() function works fine but tab header is not getting removed.
coseResultTab() {
this.getView().destroy();
}
Before Clicking on Cancel button:
After Clicking on Cancel button
You should destroy the active tab in your tabpanel, eg:
Controller
Ext.define('MyViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myview',
destroyTab: function() {
this.getView().down('tabpanel').getActiveTab().destroy();
}
});
View
Ext.create('Ext.Panel', {
width: 400,
height: 400,
renderTo: document.body,
title: 'Panel',
id: 'myPanel',
controller: 'myview',
items: [{
xtype: 'tabpanel',
items: [{
title: 'Foo',
items: [{
xtype: 'button',
text: 'Destroy!',
handler(btn) {
Ext.getCmp('myPanel').getController().destroyTab();
}
}]
}, {
title: 'Bar',
items: [{
xtype: 'button',
text: 'Destroy!',
handler(btn) {
Ext.getCmp('myPanel').getController().destroyTab();
}
}]
}]
}]
});
Fiddle
I enhanced the answer from Matheus to meet the requirement a bit more:
not destroying the entire tab, but only the content
setting the button handler without the use of getController (please try not to use this, as it is considered bad practice by Sencha)
removed the outer panel which only added a title
Fiddle
You can also remove it using the tab bar using closeTab() which pretty much just runs a tabs.remove(tabRefOrObj);
https://docs.sencha.com/extjs/6.5.3/modern/Ext.tab.Bar.html#method-closeTab
I have a Window class like this:
Ext.define('EMS.tf.alerts.alerts.view.AlertWindow', {
extend: 'Ext.window.Window',
alias: 'widget.ems-alerts-window',
height: 220,
width: 600,
alertTpl: undefined,
autoScroll: true,
selectedRecord: undefined,
title: undefined,
atext: undefined,
// #private
initComponent: function() {
var me = this;
Ext.apply(me, {
tpl: me.alertTpl,
listeners: {
show: function() {
Ext.create('Ext.Container', {
renderTo: 'alertContainer',
itemId: 'buttonContainer',
items : [{
xtype: 'button',
cls: 'ackbtn',
text : 'Acknowledge',
name: 'ackButton',
itemId: 'renderbutton'
},{
xtype: 'button',
cls: 'attchmntbtn',
text : 'Attachment',
name: 'attButton',
itemId: 'renderattachmntbutton'
}]
});
}
},
title: me.title
});
me.callParent();
}
});
I want to get reference to button "Attachment" using itemId "renderattachmntbutton". How to do this?
I tried windowobject.down('#renderattachmntbutton') but still it didn't work. I can get reference to the items placed before init function but not like this. Any idea on what needs to be done to get reference to this button?
That button is not an item (a child) of the window but of the button container. If you want to find it with down then you need to grab a reference to the container and call down on that.
Instead of
windowobject.down('#renderattachmntbutton') // WRONG
call
buttoncontainer.down('#renderattachmntbutton') // Correct
Try this
Ext.ComponentQuery.query('[itemId=renderattachmntbutton]')[0]
The itemId can be used with the getComponent() call on parent items, like container and panels. If you change your itemId on your container to just an id property. You can then get to your child items like so:
Ext.getCmp('buttonContainer').getComponent('renderattachmntbutton');
This is just one possible way, there are others!
You could try
windowobject.down('[itemId=renderattachmntbutton]') ;
I'm struggling with getting references and not using Ext.getCmp(..). I understand why it is best not to use Ext.getCmp in production apps, primarily because of potential confusion around duplicated DOM id's. I've create a basic sample below that I've put some comments in that I'm hoping, if I can find answers to will help me better understand how to get references.
I'm also looking for some really good explanations, tutorials, etc on this topic. I gather that learning how to do ComponentQuery's would be best but I'm not even sure if that is the case. So without further words, here the code. Please take a look at button event in pop up window for what I'm hoping to figure out.
Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',
layout: {
type: 'border'
},
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'panel',
flex: 2,
region: 'center',
title: 'My Panel',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'MyButton',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
}]
}],
items: [{
xtype: 'component',
html: '<b>my component</b>'
}]
}]
});
me.callParent(arguments);
},
onButtonClick: function (button, e, eOpts) {
Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',
height: 250,
width: 400,
title: 'My Window',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'button',
text: 'Want to get link to my component in window that opened this',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
}]
});
me.callParent(arguments);
},
onButtonClick: function (button, e, eOpts) {
// I would like to set the html property of the
// component in the window below
// I would like to do this efficintly
// user itemId?
// use componentquery?
// use up/down/etc.
//
// Need help with componentquery, extjs help is not helpful for me
// I need more basics I think.
this.up('panel').up('panel').down('component').html = '<i>set from button</i>';
console.log(this.up('panel').up('panel').down('component'));
}
});
var win = Ext.create('MyApp1.view.MyWindow', {});
win.show();
}
});
Windows are floating so you cant use up to get back to your viewport. Likewise, you can't use down in your viewport to find any components in windows. Your outer onButtonClick method is called in the scope of the viewport. If you save off a reference to this at that point, you can use it with down to grab your component.
onButtonClick: function() {
var viewport = this;
Ext.define('YourWindow', {
// setup everything
onButtonClick: function() {
// this may not return what you want since everything
// else inside the viewport is technically also a component
// You'd be better off adding an itemId to the component
// you wish to grab and using that in the call to down.
console.log(viewport.down('component'));
}
});
// show window
}
On a side note, I'm not sure that you want to be defining your window class on button click. Unless you can guaranty that the button will only ever be clicked once, you should define your class elsewhere and just create the window in the click handler. That complicates getting a reference to the viewport, but you could easily set it as a property on the window when you create it, or just add the onButtonClick method in the window's configuration object.
I have a card layout set in my app.js. here's the code;
...
launch: function() {
var vp = Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [
{
xtype: 'doctor'
},
{
xtype:'nurse'
}
]
});
}, ...
and, the first view that will load. here's the code;
Ext.define('RoyProject.view.user.Doctor', {
extend:'Ext.form.Panel',
alias : 'widget.doctor',
id:'docform',
defaultType: 'textfield',
items: [{
fieldLabel: 'Name',
name: 'name'
}],
buttons: [, {
text: 'Send',
action:'send'
}]
});
Since i am using card layout in the app.js, all the first view has got stretched out, and occupies the whole screen. Therefore, to get rid of this i thought to add a Panel and within that Panel to add my view (which is RoyProject.view.user.Doctor). Can someone help me to add this view into a Panel, without changing the logic of the code :)
launch: function() {
var vp = Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [
{
xtype: 'panel',
items: { xtype: 'doctor' }
},
{
xtype:'nurse'
}
]
});
}, ...
I think you're trying to solve wrong problem. You don't need to enclose your doctor panel into another one. In general idea of nesting panels one inside another is bad...
What you need to do is to either specify fixed width for your doctor panel or play is its layout to see which one fits you better.
I have a tabpanel which is part of a form (input fields are on different tabs). I need to inform the user on submission if a form has invalid fields even if they are not on the current tab. I think the best way would be to change the tabs color.
The question is how can I get the reference for the tab button, without introducing a new id?
Here is what i was trying to do, turned out to be a dead end since i get reference to the tab inner body, and with one more up to the entire tab panel
...
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:190,
margin: '10 0 0 0',
items: [{
title: 'Personal',
layout:'column',
border:false,
items:[{
columnWidth:.5,
border:false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'Email',
name: 'user[email]',
allowBlank: false,
listeners: {
'validitychange': function(th, isvalid, eOpts) {
if(!isvalid) {
alert(this.up().up().getId());
};
}
},
vtype:'email',
anchor:'95%'
}]
}]
}]
Try this:
From your field or any other Component in the panel (like a button) :
this.up('tabpanel').down('tab').el.applyStyles('background:red')
if the tab in question is not the first tab, you can use any tab property in the selector like this: ...down('tab[text=Example]') . You can use id property if you have it, if not you can just make up any property and set it to something meaningful like "ref:FirstTab".
If you have access to the tabPanel then you can access the items of its tabBar directly with:
this.up('tabpanel').getTabBar().items.get(0)
this.up('tabpanel').getTabBar().items.get(1)
etc.
See http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.tab.Bar-property-items