Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
renderTo:'tree-div',
title: 'My Task List',
height: 300,
width: 400,
useArrows:true,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
rootVisible: false,
frame: true,
root: {
nodeType: 'async'
},
In the above code,what is the significance of useArrows:true? Is it the property(builtin) to display the tree structure with arrows?
As far as I can see the useArrows: true causes the tree to be rendered using Vista-style arrows instead of +/- signs and lines in the folder nesting.
From TreePanel.js:
// private
onRender : function(ct, position){
Ext.tree.TreePanel.superclass.onRender.call(this, ct, position);
this.el.addClass('x-tree');
this.innerCt = this.body.createChild({tag:'ul',
cls:'x-tree-root-ct ' +
(this.useArrows ? 'x-tree-arrows' : this.lines ? 'x-tree-lines' : 'x-tree-no-lines')});
},
From the ExtJS API:
useArrows : Boolean
true to use Vista-style arrows in the tree (defaults to false)
Related
I have an item inside a container in my Viewport, I want to copy that item to a new window: What I've tried copies the item to the new window but unfortunately it destroys it in the container.
How can I keep it in both places ?
onOpenNewClick: function () {
var win;
var viewport = this.getMyViewport();
var chart = viewport.down('container #thechart');
win = Ext.create('widget.window', {
title: 'Layout Window',
width: 1000,
height: 600,
constrain: true,
constrainHeader: true,
hidden: false,
shadow: false,
maximizable: true,
autoScroll: true,
title: 'test',
layout: 'fit',
items: [{
region: 'center',
layout: 'fit',
title: 'chart',
xtype: chart
}]
});
win.show()
win.center();
},
My viewport :
items: [{
region : 'center',
height : '100%',
items : [{
xtype : 'container',
id : 'pan_chart',
border : false,
autoHeight : true,
hidden : true,
autoScroll : true,
items : [{
width : screen.width,
xtype: 'mychart',
id : 'thechart',
}]
}]
}
]
You need to clone the object instead of copying. Because when you copy you copy the reference and not creating a new instance of the object.
This thread discusses cloning of ExtJs objects.
Edit:
You are getting an extjs object and store it in the chart variable. In the second part you are trying to assign the object to the xtype property.
You should directly add it to the items property like so:
win = Ext.create('widget.window', {
title: 'Layout Window',
layout: 'fit',
items: [chart]
});
But this still "cut" your object and not "copy" it.
Edit2:
A good way for component copying is creating a function that return an instance of a chart. You can use the same store with the same data.
function createChart(store){
return Ext.create('Ext.chart.Chart', {
width: 400,
height: 300,
store: store
});
}
use it like so:
win = Ext.create('widget.window', {
title: 'Layout Window',
layout: 'fit',
items: [createChart(myStore)]//myStore must be defined
});
I have a window and a dataview inside it-
if (!win) {
var dataview = new Ext.DataView({
});
var win = new Ext.Window({
...
...
items: dataview
});
this.win=win;
}
var dview = this.win.items.itemAt(0);
dview.title = 'My view';
this.win.show();
However, the title do not display at first when window is shown but displays in second run. I am thinking of reloading window before showing. Any help?
Within items u can use:
xtype: 'dataview',
title: '',
Ext.define('PowerTrainCopy', {
extend: 'Ext.Window',
id: 'copyPTWin',
height:450,
width: 1110,
modal:true,
title: 'Copy Powertrain',
//plain: true,
border: true,
resizable: true,
draggable: true,
closable: true,
buttonAlign: 'center',
items: []
});
copyPTWin = Ext.create('PowerTrainCopy');
copyPTWin.show();
var menu1 = new Ext.menu.Menu({
items: [{
text: 'Open in new tab'
}]
});
var treePanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel',
region: 'center',
useArrows: true,
singleExpand: true,
split: false,
height: 360,
minSize: 150,
rootVisible: false,
autoScroll: true,
store: store,
border: false,
columns: [{
xtype: 'treecolumn',
dataIndex: 'text',
flex: 2,
sortable: true,
displayField: true
}]
});
treePanel.on('contextmenu', function(event, node) {
alert(node)
//treePanelCurrentNode = node;
x = event.browserEvent.clientX;
y = event.browserEvent.clientY;
menu1.showAt([x, y]);
}, this);
Working on 4.1 ext js and trying to add context menu to this tree panel but menu is not working. In the tree panel store is coming
but my code
treePanel.on('contextmenu', function(event,node){};
is not working
not event
treePanel.on('click', function(event,node){};
Any idea related to ext js context menu on tree panel ?
Tree doesn't have contextmenu event in ExtJS4.
You should use itemcontextmenu instead of contextmenu:
treePanel.on('itemcontextmenu', function(view, record, item, index, event) {
alert(record)
//treePanelCurrentNode = record;
menu1.showAt(event.getXY());
event.stopEvent();
}, this);
When the data view is rendered it disabling the default right click web browser menu, this is called in listeners “render” event and “itemcontexmenu” event is for detecting right click mouse event, capture the mouse cursor position and displaying the menu.
listeners: {
render: function() {
Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});
},
itemcontextmenu : function( grid, record, item, index, event){
x = event.browserEvent.clientX;
y = event.browserEvent.clientY;
menu1.showAt([x, y]);
}
}
I have asked this same question in Sencha forum but didn't get any response. I just cant get the following code in IE6 nor Chrome but works perfectly on Firefox.
Here's the simple code:
Ext.onReady(function(){
var window = new Ext.Window({
title: 'Candidate CV',
width : 900,
height: 500,
closeAction: 'hide',
autoScroll : true,
modal: true,
defaultType : 'htmleditor',
layout : 'form',
items: [{
fieldLabel: 'Professional Summary',
name: 'summary',
height : 300,
width : 600,
enableSourceEdit: false
}, {
fieldLabel: 'Career Objective',
name: 'objective',
height : 250,
width : 600,
enableSourceEdit: false
},{
fieldLabel: 'Accomplishments',
name: 'accomplishments',
height : 250,
width : 600,
enableSourceEdit: false
}],
buttons: [{
text: 'Save'
}, {
text: 'Cancel'
}]
});
var editCV = Ext.get('show-window');
editCV.on('click', function(){
window.show();
});
});
And the html code here.
<a id='show-window' href='#'>show</a>
I would like to know what am I missing here. You can try the code above and you will get the same result as mine.
Thanks
Can anyone give the coding for the formation of folder structured tree in EXTJS ? how can i make it ? can anyone help for the coding of the same ?
http://dev.sencha.com/deploy/dev/examples/tree/reorder.html
Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
// auto create TreeLoader
dataUrl: 'get-nodes.php',
root: {
nodeType: 'async',
text: 'Ext JS',
draggable: false,
id: 'src'
}
});
// render the tree
tree.render('tree-div');
tree.getRootNode().expand();
});