Develop Reference

How to have reference to an accordin in ExtJS?

I'm working with an accordion that has 10 grids inside of it. So basically I would like to access each grid in the accordian but not really sure how to accomplish that in ExtJS.
Example: If I want to target a grid I can do this:
Ext.ComponentQuery.query('grid');
But if I use the above code it will target all of the grids from the UI and I don't want that. I ONLY want to target the grids from my accordian.
layout: {
type: 'accordion',
animate: false,
fill: false,
hideCollapseTool: false,
collapseFirst: false,
titleCollapse: false,
multi: true,
overflowHandler: 'scroller'
}
Any ideas how to do that? Thank you in advance!

First thing accordion is not an xtype.
Accordion is a layout that manages multiple Panels in an expandable accordion style such that by default only one Panel can be expanded at any given time.
As you ONLY want to target the grids from your accordian
if you have created your custom xtype:'accordion' then you can get like this me.down('accordion').query('grid') if me contain xtype:'accordion'.
If you have define reference then you can get like this lookupReference using controller or lookupReference using view.
Here I have created an small sencha fiddle demo. Hope this will help you.
//create grid
Ext.define('DemoGrid', {
extend: 'Ext.grid.Panel',
xtype: 'demogrid',
store: {
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
},
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
flex: 1
});
//controller
Ext.define('DemoCnt', {
extend: 'Ext.app.ViewController',
alias: 'controller.demo',
onButtonClick: function (button) {
var accordion = this.lookupReference('demoAccordion'); //if your Accordion Layout is inside of panel/coantainer then you can use like this {this.lookupReference(your refrence name)}.
this.doGetAllGrid(accordion);
/* var panel = button.up('panel');
panel.down('[reference=demoAccordion]');
panel.down('panel') also we get like this
panel.down('panel[reference=demoAccordion]') also we get like this
*/
},
doGetAllGrid: function (accordion) {
var data = [];
//{accordion.query('grid')} return all grid as Accordion contain
Ext.Array.forEach(accordion.query('grid'), function (item) {
data.push('<b>' + item.title + '</b>');
});
Ext.Msg.alert('Success', 'Your all grid title is below :-<br>' + data.join('<br>'));
}
});
//Accordion Layout panel
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: '100%',
controller: 'demo',
height: 700,
items: [{
xtype: 'panel',
reference: 'demoAccordion',
layout: {
// layout-specific configs go here
type: 'accordion',
animate: false,
fill: false,
hideCollapseTool: false,
collapseFirst: false,
titleCollapse: false,
// multi: true,
overflowHandler: 'scroller'
},
defaults: {
xtype: 'demogrid'
},
items: [{
title: 'Grid 1'
}, {
title: 'Grid 2'
}, {
title: 'Grid 3'
}, {
title: 'Grid 4'
}, {
title: 'Grid 5'
}, {
title: 'Grid 6'
}, {
title: 'Grid 7'
}, {
title: 'Grid 8'
}, {
title: 'Grid 9'
}, {
title: 'Grid 10'
}],
}, {
xtype: 'demogrid',
margin:'10 0',
title: 'Grid 11 will not inside of Accordion Layout '
}],
buttons: [{
text: 'Get All Grid',
height: 50,
padding: '0 35',
style: 'background: transparent;border: 2px solid #737373cc;',
handler: function () {
var panel = this.up('panel');
panel.getController().doGetAllGrid(panel.down('[reference=demoAccordion]')); //Just call only common method of controller to get all grid.
}
}, {
text: 'Get All using controller method with a reference',
height: 50,
padding: '0 35',
style: 'background: transparent;border: 2px solid #737373cc;',
handler: 'onButtonClick'
}],
renderTo: Ext.getBody()
});

CKEDITOR dialog - open second tab on button click

I have CKEDITOR dialog with two tabs:
- view one
- view two
Inside view one I have a button that should open view two if clicked by the user.
But I don't know how to do this. This is my CKEDITOR.dialog code:
CKEDITOR.dialog.add('placeholder', function(editor) {
var lang = editor.lang.placeholder,
generalLabel = editor.lang.common.generalTab,
validNameRegex = /^[^\[\]<>]+$/;
return {
title: 'some title',
minWidth: 300,
minHeight: 150,
contents: [{
id: 'initial-view',
label: 'view one',
title: generalLabel,
elements: [{
id: 'name-one',
style: 'width: 100%;',
type: 'html',
html: 'Organizational units'
}, {
type: 'button',
id: 'buttonId',
label: 'Click me',
title: 'My title',
setup: function(widget) {
},
onClick: function(widget) {
// this = CKEDITOR.ui.dialog.button
My code should go here........?
}
}]
}, {
id: 'organizational-unit-view',
label: 'view two',
title: generalLabel,
elements: [
// Dialog window UI elements.
{
id: 'list-of-vars',
style: 'width: 100%;',
type: 'html',
html: 'second view --- html goes here',
label: lang.name,
setup: function(widget) {
this.setValue(widget.data.name);
},
commit: function(widget) {
widget.setData('name', this.getValue());
}
}
]
}]
};
});
My question is how should I handle that button click? What method should I use? Basically how to open view two?

I found a solution. On click event is should use getDialog():
this.getDialog().selectPage('your-content-id);
Like this:
onClick: function(widget) {
this.getDialog().selectPage('organizational-unit-view');
}

How i add tabs in Ext JS

this is my panel,i want to add tabs in this panel.I tried so many example from here but not success..
here is my code.
this.Tab = new Ext.Panel({
title: 'PG Routing',
//iconCls:'mrc',
layout:'border',
border:false,
width:1000,
height:600,
closable:true,
id:'pgrouting_tab',
items:[this.addnewchannelform]
});

You should try to use the Ext.tab.Panel instead of Ext.Panel. Take a look at this example:
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [
{
title: 'Foo'
},
{
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}
]
});

Ext js 4.2 accordion layout in vbox

Panel with accordion layout is contained in vbox with another one item.
I have a 2 troubles:
When i'm trying to set flex to panel with accordion layout it causes the error "[E] Layout run failed"
When height is fixed by constand it not working as expected: first panel does not collapse.
Here is example of code:
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 500,
layout: 'vbox',
items: [{
xtype: 'datefield'
}, {
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
},
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: true,
animate: true
},
items: [{
title: 'Panel 1',
html: 'Panel content 1!'
}, {
title: 'Panel 2',
html: 'Panel content 2!'
}, {
title: 'Panel 3',
html: 'Panel content 3!'
}],
}],
renderTo: Ext.getBody()
});
http://jsfiddle.net/6DHM4/1/

I couldn't reproduce your error, but things look good for me with flex: 1 if I change the layout: 'vbox' to
layout: {
type: 'vbox',
align: 'stretch'
}
(see this fiddle)

may be the right way is to use layout 'anchor' against 'vbox'?
try that way?
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 500,
layout: 'anchor',
items: [
{xtype: 'datefield'},
{
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
,anchor: '100%'
},
...
I don't know why, but when i test it on jsfiddle.net it shows bug: 'first panel does not collapse'. But if i test it here http://try.sencha.com/ for example, it works fine.

Extjs - Best way to show a tree in a window

Here's my tree panel that I'm using:
var tree = Ext.create('Ext.tree.Panel', {
store: mystore,
rootVisible: false,
useArrows: true,
frame: true,
title: 'Organization Tree',
renderTo: 'org-filter-window',
width: 600,
height: 400,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Expand All',
handler: function () {
tree.expandAll();
}
}, {
text: 'Collapse All',
handler: function () {
tree.collapseAll();
}
}]
}]
});
and I have this window
var orgWindow = Ext.create("Ext.Window", {
store: myStoe,
title: 'Organization Tree',
width: 600,
height: 400,
html: '<div id="org-filter-window"></div>'
});
Not sure what the best way is to show a tree inside of a window. As you can see, I've tried rendering the tree panel inside the window html, and it works okay, but I'm not sure if this is the preferred way.
Version: Ext JS 4.0.7

How about:
var orgWindow = Ext.create("Ext.Window", {
store: myStoe,
title: 'Organization Tree',
width: 600,
height: 400,
items: tree // <--- the only change is here
});
and remove renderTo: 'org-filter-window', from the tree definition