Develop Reference

ExtJS let second form.TextArea grow when the first form.TextArea grows

I created an Ext Application, which does not run. But that's not the point of this question.
My question is: for given two textAreas I'd like to grow the second one when the first grows
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.TextArea', {
renderTo: Ext.getBody(),
width: 500,
grow: true,
id: 'm1',
});
Ext.create('Ext.form.TextArea', {
renderTo: Ext.getBody(),
width: 500,
grow: true,
id: 'm2',
});
},
});
I was thinking about:
bind: {
height: '{m1.height}',
}
But when trying, that didn't work.
Then I was thinking about:
var el = Ext.get("m1");
var e2 = Ext.get("m2");
e2.setHeight(e1.getHeight());
Then a friend of mine proposed to use the resize event listener.
Any idea how to change the bind to get it work?
Link to the fiddle with the code above:
https://fiddle.sencha.com/#view/editor&fiddle/3k6s

Something like this?
Ext.create('Ext.form.FormPanel', {
title: 'Sample TextArea',
width: 400,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textareafield',
grow: true,
name: 'message',
fieldLabel: 'Message',
anchor: '100%',
grow: true,
listeners: {
resize: function(textArea, width, height) {
textArea.nextSibling().setHeight(height)
}
}
}, {
xtype: 'textareafield',
grow: true,
name: 'message',
fieldLabel: 'Message',
anchor: '100%',
grow: true,
}]
});

How to load dynamic data in a list/table inside a panel-EXTJS

I'm trying to create a panel like:
with the below code as a beginning, however I'm not sure how can I create a list/table inside a panel in a way like it looks below in the image.
I also have to load the data dynamically inside the panel.
also I'm using panel since I want it to be a collapsible one
$cls.superclass.constructor.call(this, Ext.apply({
items: [
this.section({
items: [
this.panel = new Ext.Panel({
items: [
this.section({
items: []
})
],
collapsible: true,
})
]
})
]
}, cfg));
Ext.extend($cls, Panel, {
getData: function(data) {
//here I have the entire data I want to show in the list. just not sure how?
}
});
any ideas?

You can create custom rows with Ext.Panel. The example shows only show creating list. To add part where AND, OR you can change structure of data and create row with nested panel row.
Here is example of creating custom list with panel:
Ext.onReady(function () {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
title: 'ExtJS Master Panel',
items: [
collapsibleList = new Ext.Panel({
title: 'Collapsible List',
collapsible: true,
hideBorders: true,
padding: '10px',
height: 400
})
],
getData: function () {
return new Promise(function (resolve) {
setTimeout(function () {
resolve([{
name: 'Last VM Scan',
decider: 'LESS THAN',
period: '30 days'
}, {
name: 'Last CERTVIEW Scan',
decider: 'LESS THAN',
period: '14 day'
}, {
name: 'Last checked In',
decider: 'LESS THAN',
period: '10 days'
}]);
}, 1000);
});
},
listeners: {
afterrender: function () {
console.log(collapsibleList);
Promise.resolve(this.getData()).then(function (data) {
for (var i = 0; i < data.length; i++) {
var pan = new Ext.Panel({
xtype: 'panel',
layout: 'hbox',
hideBorders: true,
items: [{
xtype: 'panel',
padding: '10px',
width: 200,
items: [{
xtype: 'label',
text: data[i].name
}]
}, {
xtype: 'panel',
padding: '10px',
width: 300,
items: [{
xtype: 'label',
text: data[i].decider
}]
}, {
xtype: 'panel',
padding: '10px',
items: [{
xtype: 'label',
text: data[i].period
}]
}]
});
collapsibleList.add(pan);
}
collapsibleList.doLayout();
});
}
}
});
});
Working Fiddle Link: https://fiddle.sencha.com/#view/editor&fiddle/2l14

How to disable tabpanel navigation using arrow keys in Ext JS?

When tab is in focus, it is possible to navigate between tabs using arrow keys (→, ←). I want to disable this behaviour.
Example tab panel:
http://examples.sencha.com/extjs/6.0.2/examples/kitchensink/#basic-tabs

The config you are looking for is in the Ext.tab.Bar class, and it's called activateOnFocus.
Here's the tab panel example modified to avoi navigation with arrow keys
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
tabBar: {
activateOnFocus: false
},
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
});

this worked for me!
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
tabBar: {
defaults: {
flex: 1
}
},
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
});

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

Extjs layout extension causing error in ext-all.js

I am trying to learn Extjs and I am immediately coming up with an issue. My Html has ext-base.js and ext-all.js correctly included. I then have the following in my js file:
Ext.BLANK_IMAGE_URL = '<%= Url.Content("~/Content/ext/images/default/s.gif") %>';
Ext.ns('MyNamespace');
Ext.onReady(function() {
alert("onReady() fired");
});
So far everything is working, no errors and the alert is thrown correctly. I then add the following code after onReady:
MyNamespace.BaseLayout = Ext.Extend(Ext.Viewport({
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
height: 32,
autoEl: {
tag: 'div',
html: '<p>North</p>'
}
})
]
}));
This causes the following javascript error in chrome:
Uncaught TypeError: Object #<an Object> has no method 'addEvents' ext-all.js:7
Ext.Component ext-all.js:7
Ext.apply.extend.K ext-base.js:7
Ext.apply.extend.K ext-base.js:7
Ext.apply.extend.K ext-base.js:7
(anonymous function) MyApp.js:13 (pointing to the Ext.Extend line)
If I take the Viewport code and put it directly into the OnReady function it (like the following)
Ext.onReady(function () {
var bl = new Ext.Viewport({
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
height: 32,
autoEl: {
tag: 'div',
html: '<p>North</p>'
}
})
]
});
});
It works. Can anyone clue me in to what I am doing wrong with the Extend method?

To fix your code, the issue is simply bad syntax in the Extend statement. You need a comma after Ext.Viewport, not an extra () pair:
MyNamespace.BaseLayout = Ext.Extend(Ext.Viewport, {
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
height: 32,
autoEl: {
tag: 'div',
html: '<p>North</p>'
}
})
]
});
However, I'd suggest taking #r-dub's advice and reading up more on what you're trying to do.

Here's a bit more complicated example of what you're trying to accomplish. I'd strongly suggest taking a look at Saki's 3 part series in building large apps with ExtJS, it'll help you understand how it use extend properly to create re-usable components.
Ext.ns('MyNamespace');
MyNamespace.BaseLayout = Ext.extend(Ext.Viewport, {
initComponent:function() {
var config = {
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
height: 32,
autoEl: {
tag: 'div',
html: '<p>North</p>'
}
})
]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
MyNamespace.BaseLayout.superclass.initComponent.apply(this,arguments);
}//end initComponent
});
//this will give you an xtype to call this component by.
Ext.reg('baselayout',MyNamespace.BaseLayout);
Ext.onReady(function() {
new MyNamespace.BaseLayout({});
});

ExtJS recommend the use of define instead of extend. Here is how a similar example works with define:
Ext.define('Grid', {
extend: 'Ext.grid.Panel',
config: {
height: 2000
},
applyHeight: function (height) {
return height;
}
});
new Grid({
store: store,
columns: [{
text: 'Department',
dataIndex: 'DepartmentName',
renderer: function (val, meta, record) {
return '' + record.data.DepartmentName + '';
},
width: 440,
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Department Code',
dataIndex: 'DepartmentKey',
width: 100,
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Main Phone',
dataIndex: 'MainPhone',
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Room',
dataIndex: 'RoomLocation',
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Hideway Location',
dataIndex: 'HideawayLocation',
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Hideway Phone',
dataIndex: 'HideawayPhone',
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Has OEC',
dataIndex: 'OECFlag',
xtype: 'checkcolumn',
width: 50,
filter: {
type: 'boolean',
active: true
},
flex: 1,
sortable: true,
hideable: false
},
{
text: 'Action',
dataIndex: 'ID',
renderer: function (value) {
return 'Edit';
},
hideable: false
}],
forceFit: false,
split: true,
renderTo: 'departmentSearchGrid',
frame: false,
width: 1300,
plugins: ['gridfilters']
});
I used the following post as a reference:
http://docs.sencha.com/extjs/5.0/core_concepts/classes.html