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
Related
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,
}]
});
I have a Treepanel:
treepanel = Ext.define('filteredTree', {
extend: 'Ext.tree.Panel',
title: 'Filtered Tree',
store: store,
width: 784,
height: 550,
buttons: [
{
text: 'Select',
handler: function () {
var panel = this.up('treepanel');
//...selection of value
}
}
]
//...Here is search mechanism
});
and the window in which it's displayed. The window is resizable:
win = Ext.create('widget.window', {
title: 'Выбор значения из словаря',
header: {
titlePosition: 2,
titleAlign: 'center'
},
closable: true,
closeAction: 'hide',
maximizable: true,
width: 800,
minWidth: 350,
height: 600,
tools: [{ type: 'pin' }],
theme:"classic",
layout: {
type: 'border',
padding: 5
},
items: [
Ext.create('filteredTree')
]
});
I'd like to see if the window size changes the size of the panel also changes. How can I do that?
Change the layout of the window to fit.
Panel will occupy the complete space inside the window and resizes accordingly.You can remove height and width from the tree panel.
Ext.create('Ext.window.Window', {
title: 'Выбор значения из словаря',
header: {
titlePosition: 2,
titleAlign: 'center'
},
closable: true,
closeAction: 'hide',
maximizable: true,
width: 600,
minWidth: 350,
height: 400,
layout:'fit',
items: [
{xtype:'treepanel',
padding:5,
title: 'Filtered Tree',
buttons: [
{
text: 'Select',
handler: function () {
var panel = this.up('treepanel');
}
}
]}
]
}).show();
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'
}
}
]
});
I am learning ExtJS MVC
I want to click button then create a panel in specific container. But I am confuse about the renderTo config. I don't know how to render to right side container.
My codes as below.
First I define two container in Viewport
Ext.define('MyTest.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
requires: [
'MyTest.view.button.TestButton',
],
items: {
xtype: 'container',
itemId: 'main',
region: 'center',
border: false,
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [{
xtype: 'container',
itemId: 'left',
style: 'background-color: black;',
flex: 1,
items: [{
xtype: 'testbtn'
}]
}, {
xtype: 'container',
itemId: 'right',
flex: 1
}]
}
});
Button in view
Ext.define('MyTest.view.button.TestButton', {
extend: 'Ext.button.Button',
alias: 'widget.testbtn',
initComponent: function() {
var me = this;
Ext.apply(this, {
height: 100,
width: 100
});
me.callParent(arguments);
}
});
And click event in controller
Ext.define('MyTest.controller.Button', {
extend: 'Ext.app.Controller',
views: ['MyTest.view.button.TestButton'],
refs: [{
ref: 'testbtn',
selector: 'testbtn'
}],
init: function() {
this.control({
'testbtn': {
click: this.test
}
});
},
test: function() {
Ext.create('Ext.panel.Panel', {
height: 200,
width: 400,
renderTo: Ext.getBody()
});
}
});
Now it just can render to body. How to render it in right side container?
Thanks a lot
You can use the add method to add to the items array of a panel or container.
For example:
Ext.ComponentQuery.query('#westPanel')[0].add({ html:'Some New Component Here.' });
and here is the full code for a more in-depth example:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel',{
renderTo:Ext.getBody(),
height:800,
layout:'border',
tbar:[{
text:'Add Html To East Region',
handler: function(btn){
Ext.ComponentQuery.query('#westPanel')[0].add({
html:'Oh, Hello.'
});
}
}],
defaults:{
xtype:'panel'
},
items:[{
region:'center',
html:'Center Panel'
},{
region:'west',
width:400,
itemId:'westPanel',
items:[]
}]
});
}
});
And a fiddle for demonstration of the working code
I have an issue in my recent implemented Rally Grid.
_CreatePSIObjectiveGrid: function(myStore) {
if (!this.objGrid) {
var colCfgs = [{
text: 'ID',
dataIndex: 'DragAndDropRank',
width: 50
}, {
text: 'Summary',
dataIndex: 'Name',
flex: 1
}, {
text: 'Success Rate',
dataIndex: 'c_SuccessRate',
width: 200
}];
if (!this.getSetting("useSuccessRatioOnly")) {
colCfgs.push({
text: 'Initial Business Value',
dataIndex: 'PlanEstimate',
width: 200
});
colCfgs.push({
text: 'Final Business Value',
dataIndex: 'c_FinalValue',
width: 200
});
}
this.objGrid = Ext.create('Rally.ui.grid.Grid', {
store : myStore,
enableRanking: true,
defaultSortToRank: true,
height: 550,
overflowY: 'auto',
margin: 10,
showPagingToolbar: false,
columnCfgs : colCfgs
});
Ext.getCmp('c-panel-obj-crud-table').add(this.objGrid);
}
}
Although I have set "enableRanking" to "true", the ranking drag and drop doesn't work if I add my grid to a component. However, the drag and drop function does work perfectly if I change the last statement from
Ext.getCmp('c-panel-obj-crud-table').add(this.objGrid);
to
this.add(this.objGrid);
I don't know if this is a Rally bug. Try to compare the final html file generated, no clue is found.
this few sec video shows that the code below, where a rankable grid is added to a child panel, and not directly to this (this points to the app's global scope) still preserves its ability to rerank:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var panel = Ext.create('Ext.panel.Panel', {
layout: 'hbox',
itemId: 'parentPanel',
componentCls: 'panel',
items: [
{
xtype: 'panel',
title: 'Panel 1',
width: 600,
itemId: 'childPanel1'
},
{
xtype: 'panel',
title: 'Panel 2',
width: 600,
itemId: 'childPanel2'
}
],
});
this.add(panel);
this.down('#childPanel1').add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Owner'
],
context: this.getContext(),
enableRanking: true,
defaultSortToRank: true,
storeConfig: {
model: 'userstory'
}
});
}
});