is there are any way to disable all child items on Extjs4 tab panel, without looping them.
my code:
var myPanel = new Ext.TabPanel({
region: 'east',
title: 'my panel title',
width: 200,
id: 'my-panel',
split: true,
collapsible: true,
collapsed: true,
floatable: true,
xtype: 'tabpanel',
items: [
Ext.create('Ext.panel.Panel', {
id: 'my-detail-panel',
title: 'My Info',
autoScroll: true,
file: false,
type: 'vbox',
align: 'stretch',
tpl: myDetailsTpl
}),
Ext.create('Ext.panel.Panel', {
id: 'my-more-detail-panel',
title: 'My more info',
autoScroll: true,
file: false,
type: 'vbox',
align: 'stretch',
tpl: myMoreDetailsTpl
})
]
});
i need disable myPanel's all child items, but still need to 'myPanel' keep status as enable .
myPanel.items.each(function(c){c.disable();})
then
myPanel.items.each(function(c){c.enable();})
to fire them back up again.
This is looping, but it is not using a "for loop" as I think the question was meant to state.
You can just set disabled:true on the initial config for each panel. Is that what you were asking?
Try his:
// Create your own property for storing statu,
config{
allMyTabItemsEnabled = true;
}
// Then on all the items you want to disable/enable, add:
bind: {
disabled: '{!allMyTabItemsEnabled }'
}
Related
I have a panel which contains items in its body, and I would like the panel itself to be draggable, but only when the user drags the panelheader. (I don't want the user to be able to drag the panel by clicking and dragging in the body). Is there a simple way to do this?
Here is my code for creating the panel:
const newGridPanel = Ext.create({
xtype: 'panel',
id: newpanelid,
floated: true,
closable: true,
draggable: true,
scrollable: true,
width: 400,
height: 300,
resizable: {
constrainToParent: true,
dynamic: true,
edges: 'all',
minSize: 250,
maxSize: [window.innerWidth,window.innerHeight]
},
layout: 'fit',
title: 'Title',
tools: [
{
iconCls: 'x-fa fa-plus',
reference: 'addempbtn',
handler: function() {
newGridPanel.down(xt).getController().onAdd()
},
tooltip: 'Add a New Employee'
}
],
defaults: {
flex: 1
},
items: [
{
xtype: xt,
id: newgridid,
}
]
});
newGridPanel.setX(20);
newGridPanel.setY(20);
newGridPanel.show();
EDIT: I was able to figure out the problem and correct it. The solution has to do with the handle property of the Ext.drag.Source object. You have to specify the CSS handle of the element you want to be able to initiate the drag. In My case, the corrected code is as follows.
const newGridPanel = Ext.create({
xtype: 'panel',
id: newpanelid,
floated: true,
closable: true,
draggable: {handle: 'x-panelheader'}, // <- This is the part that needed to be changed
scrollable: true,
width: 400,
height: 300,
resizable: {
constrainToParent: true,
dynamic: true,
edges: 'all',
minSize: 250,
maxSize: [window.innerWidth,window.innerHeight]
},
layout: 'fit',
title: 'Title',
tools: [
{
iconCls: 'x-fa fa-plus',
reference: 'addempbtn',
handler: function() {
newGridPanel.down(xt).getController().onAdd()
},
tooltip: 'Add a New Employee'
}
],
defaults: {
flex: 1
},
items: [
{
xtype: xt,
id: newgridid,
}
]
});
newGridPanel.setX(20);
newGridPanel.setY(20);
newGridPanel.show();
I have a layout that I need to put side by side. The layout comprise of :
1- Combobox
2- multiselect combo
3-Textfield
Now I'm using the layout property of the container and setting it to vbox for the main cont and hbox for the inside container. Now for some reason my multisselect combo box is breaking when I try to select multiple options here.
attached is the gif for it.
below is the code:
var $cls = NS.AAA = function(cfg) {
$cls.superclass.constructor.call(this, Ext.apply({
height: 45,
layout: {
type: 'vbox',
align: 'stretch',
pack: 'center'
}
//end of xtype container
}, cfg));
};
addFilter: function(token, filter, op) {
var filterItem = Ext.create({
xtype: 'container',
height: 30,
cls: 'purge-filter-item',
layout: {
type: 'hbox',
align: 'middle'
},
items: [
this.typeCombo = new Ext.form.ComboBox({
emptyText: $L('Select a filter...'),
store: this.menuStore = new Ext.data.ArrayStore({
fields: ['key', 'title'],
data: this.getFilterValues()
})
}),
new ux.form.datepicker.SuperDateField({
anchor: '0',
ref: "../date",
cls: "purge-date",
hideTrigger2: true,
includeFutureOptions: false,
simpleMode: true,
isDateRange: true,
hidden: true
}),
new Qx.form.MultiSelectComboBox({
allowCommaInQuery: true,
anchor: '-5',
displayField: 'value',
valueField: 'value',
hideRefreshLabel: true,
ref: "../multiComboRegions",
refreshable: false,
mode: 'local',
emptyText: $L('Select Regions'),
enableCopyPaste: false,
anyMatch: true,
caseSensitive: false,
value: ["name"],
cacheSizes: false,
hidden: true,
store: this.multiCombo = new Ext.data.ArrayStore({
fields: ['value'],
data: this.tokenValues,
expandData: true,
}),
}),// end of multiSelect
}]
}); // end of filteritem
}
},
Any idea why this could be happening and how to fix this?
I am using accordion layout, the data from the store loading fine for the collapsed items and we can see when it is expanded but for the items collapse: false,data is not loading.It is working fine on Firefox,but not working on Chrome and iOS simulator Can anyone please help me on this issue. I am using latest sencha touch version 2.2.1
here is my code
config: {
title: 'Check out',
iconCls: 'truck',
layout: {
type: 'accordion',
toggleOnTitlebar: true,
mode: 'MULTIPLE',
},
scrollable: 'vertical',
items: [{
itemId: 'cartitems',
title: 'Cart Items List',
height: 600,
layout: 'fit',
collapsed: false,
items: [{
xtype: 'list',
scrollable: {
direction: 'vertical',
directionLock: true
},
itemTpl: '<div class="cartitemlist">{DESCRIPTION} Item ID:{REDID} Price:{Price}</div>',
store: 'CartStore'
}]
}
data is showing up if the collapsed : true .. but it is not working when collapsed: false
Try adding a height to the list view. E.g.
items: [{
xtype: 'list',
height: 500,
scrollable: {
direction: 'vertical',
directionLock: true
},
itemTpl: '<div class="cartitemlist">{DESCRIPTION} Item ID:{REDID} Price:{Price}</div>',
store: 'CartStore'
}]
I am using ExtJS, and I have the following component:
var AlgoField = [{
bodyStyle: 'padding-right:5px;',
id: 'algo_id ',
items: [{
xtype: 'fieldset',
title: 'Algorithms\' Field',
autoHeight: true,
collapsed: true,
collapsible: true,
items: [itemAlgo_1,
itemAlgo_4,
itemAlgo_3,
itemAlgo_2
]
}]
}]
I want to set the collapsed property to false, when occur an event, and I don't know how to get this property and set it to false . (I thought something like this: Ext.get('algo_id').collapsed=false but it doesn't work)
Please help me.
Thanks a lot.
You need to give the fieldset an ID and refer to it, not its parent, i.e:
var AlgoField = [{
bodyStyle: 'padding-right:5px;',
id: 'algo_id ',
items: [{
xtype: 'fieldset',
id: 'collapse_this',
title: 'Algorithms\' Field',
autoHeight: true,
collapsed: true,
collapsible: true,
items: [itemAlgo_1, itemAlgo_4, itemAlgo_3, itemAlgo_2]
}]
}]
Then use:
Ext.getCmp('collapse_this').collapse();
Below is a javascript variable that I'm using to load into the layout-browser...you will notice the listener section is commented out...when I uncomment this section the layout-browser and the tree do not show up. When I comment out the listener section, the layout-browser and the tree work fine with the exception of the listener populating the pool-details-panel.
Any ideas why the listener is blowing the render of the layout-browser and tree up?
var PoolStackTree = {
id: 'PoolStackTree-panel',
title: 'Pool List',
layout: 'border',
width: 500,
height: 500,
items: [{
xtype: 'treepanel',
id: 'pooltree-panel',
region: 'center',
margins: '2 2 0 2',
singleExpand: true,
animate: true,
useArrows: true,
autoScroll: true,
rootVisible: false,
root: new Ext.tree.AsyncTreeNode(),
loader: new Ext.app.PoolLoader({ dataUrl: 'calmonpool_views_xml.cgi' })
/*
listeners { 'render': function(tp) {
tp.getSelectionModel().on('selectionchange', function(tree-pool, node-pool) {
var el = Ext.getCmp('pool-details-panel').body;
if(node-pool && node-pool.leaf) {
tpl.overwrite(el, node-pool.attributes);
} else {
el.update(detailsText);
}
})
}}
*/
},{
id: 'pool-details-panel',
title: 'Pool Details',
region: 'south',
autoScroll: true,
collapsible: true,
split: true,
margins: '0 2 2 2',
cmargins: '2 2 2 2',
height: 220,
html: detailsText
}]
};
You're missing a comma before the "listeners" property name and a colon after the property name:
...,
listeners: { ...
Well just for starters you're missing a ":" after "listeners". That would certainly cause the Tree not to render.