I have few Panels in my page, being created dynamically regarding the type of data that should be presenting.
I'd like to add checkbox to the title row of a particular panel. I identify this panel by it's properties (like it's name\ title and fields count).Then I add the checkbox like that:
newPanel.header.items = [
{
xtype: 'checkbox',
boxLabel: 'some text'
}
];
But for some reason, this checkbox is being render to all panels in the page.
I'm sure that the above code happening only once - I've put an alert to check that.
Can I avoid it and make the checkbox appears only on one specific panel?
Can someone point out that why checkbox appears in all of my dynamic panels there?
You should use the "add" method or the "setItems" method of the parent container (your header container I suppose), ie:
var myPanel = Ext.create('Ext.panel.Panel');
var myHeader = Ext.create('Ext.container.Container');
myPanel.add(myHeader);
myHeader.add({xtype: 'checkbox'});
Try below code
newPanel.getHeader().add({
xtype: 'checkbox',
boxLabel: 'Some Text'
});
Here is Fiddle for your reference.
Related
Please refer to the following fiddle: Binding HTML Issue
When you select a row from the combobox on the left panel, it prints the bound value, along with some HTML in the form on right. When you then click on the button labeled as 'Test Update' it first clears the bound value in the drop down, and then is supposed to update the HTML to clear it, as well.
Problem is, that the update for the displayfield referenced in the Ext.ComponentQuery.query does not work in this order. If I do the update first in the fiddle it works, but if I try this in my actual app, it does not (in my app the setValue on the combobox DOES work though, but then leaves the HTML label - which I want to clear).
An ideas as to why this behavior is occurring would be most welcome.
You probably would want to use a formula for that, it simplifies the logic behind it.
viewModel: {
formulas: {
foo: function(get) {
var sel = get('peopleComboRef.selection');
return sel ? ('HTML Label: ' + sel.get('name')) : '';
}
}
},
then bind this formula to your displayfield.
{
xtype: 'displayfield',
itemId: 'displayTest',
bind: {
html: '{foo}'
}
}
fiddle: https://fiddle.sencha.com/#fiddle/24f5&view/editor
We have ExtJs fields in which LabelAlign is configured as 'top', but when we click on label it focusses the field, this creates problem if the field is checkbox, as on click of checkbox label it checks/unchecks the checkbox field. I have searched for some configs to disable the same , but couldn't find out. Later i used pointer-events:none CSS property on labels but not sure it will be correct solution. please guide.
Fiddle Example illustrating the above issue
You can prevent the click on the label from affecting the checkbox by removing the for attribute from the label. This will break the association between the label and the checkbox. To do this in ExtJS:
Ext.query('label[id^=checkbox]').forEach(function (item) {
item.removeAttribute('for');
});
This will find all of the labels for checkboxes and remove the for attribute so the label is no longer associated with the checkbox.
If you want to implement this for all fields, not just checkboxes, change it to search for all labels:
Ext.query('label').forEach(function (item) {
item.removeAttribute('for');
});
This code should be executed after your form is created.
See updated fiddle here.
There is no as such solution as far as i know for that because it will happen in every field not only in checkbox but there is a workaround that, you can add two xtypes as label and field needed and arrange them in vbox layout and give that label a 'html' config as that fieldlabel of the next field.
For e.g,
{
xtype:'container',
layout:{
type:'vbox'
},
items:[
{
xtype:'label',
html:'Email Address'
},
{
xtype:'checkboxfield',
name: 'email'
}
]
}
With this the container that will be made by extjs for checkboxfield will be different for label and field so when you click on label that's a different control for it and hence won't check the checkboxfield.
How do I change the tooltip for a panel located in a tab panel? Originally, I created a tooltip using the tabtip parameter of the panel constructor as the panel was added to the tabpanel.
You need to grab the DOM element that represents your tab's tab strip. You can use tabPanel.getTabEl(tabID) to get the strip element. You can then grab the .x-tab-strip-text span and set its qtip property.
// be sure to set your tab's itemId
var tabPanel = new Ext.TabPanel({
items: [{
title: 'one tab',
tabTip: 'something',
itemId: 'firstTabID',
html: 'haha wooo'
}]
});
// later...
// .getTabEl grabs the tabstrip DOM element
// Ext.get converts it to an Ext.Element
Ext.get( tabPanel.getTabEl('firstTabID') )
// find its descendent span that contains the tab's title text
.child('span.x-tab-strip-text', true)
// and set the tool tip
.qtip = 'something completely different!';
I'd never changed tab tooltips before so I dug around the Ext.TabPanel source looking at how they set it. I learned something too :)
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:[{}]
I have an Ext TabPanel, and I am trying to set the hidden property for one of the Tabs, programmatically. I am able to select the object and call methods such as disable() and enable() but so far have been unable to find a means by which I can manipulate the Tab's 'hidden' property.
The Tab is defined as
{
id: "view-task",
hidden: false,
title: "View"
}
and the code attempting to manipulate it
twin = ( Ext.getCmp('view-task'));
twin.disable();
The above call to disable works, so the component is being correctly selected but I do not know how to manipulate the hidden property.
Any assistance will be much appreciated.
N. Euzebe
Try this:
var tabs = Ext.createWidget('tabpanel', {
items: [{
itemId: 'home',
contentEl:'script',
title: 'Short Text',
closable: true
}]
});
tabs.child('#home').tab.hide();
You can find this code in examples on the API page
You haven't explained which version of ExtJS you're using. But in version 3.x you can do the following (I don't know, but it might also work in ExtJS 4.x):
var tabPanel = Ext.getCmp('myTabPanel');
var tabToHide = Ext.getCmp('myTab');
tabPanel.hideTabStripItem(tabToHide);
To show the tab again:
tabPanel.unhideTabStripItem(tabToHide);
Hope this helps you :)