I want to add Amchart charts in ExtJS Panel How can I do this?
see below Amchart code
How to add this designed chart on ExtJS Panel
var columnChartData = [
{
"name": "John",
"points": 35654,
"color": "#7F8DA9",
"bullet": "images/0.gif"
}
];
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = columnChartData;
chart.categoryField = "name";
chart.startDuration = 1;
// WRITE
chart.write("example-grid");
//Write this chart on Extjs Panel
add( component ) :
Adds Component(s) to this Container.
Description:
•Fires the beforeadd event before adding.
•The Container's default config values will be applied accordingly (see defaults for details).
•Fires the add event after the component has been added.
Notes:
If the Container is already rendered when add is called, it will render the newly added Component into its content area.
If the Container was configured with a size-managing layout manager, the Container will recalculate its internal layout at this time too.
Note that the default layout manager simply renders child Components sequentially into the content area and thereafter performs no sizing.
If adding multiple new child Components, pass them as an array to the add method, so that only one layout recalculation is performed.
tb = new Ext.toolbar.Toolbar({
renderTo: document.body
}); // toolbar is rendered
// add multiple items.
// (defaultType for Toolbar is 'button')
tb.add([{text:'Button 1'}, {text:'Button 2'}]);
To inject components between existing ones, use the insert method.
to do a dinamic load of new views use .add(component) on your panel.
maybe you should do a panel.refresh() if the new component is added but not shown
Related
Is there any way to associate a custom contextMenu to a contentList widget(the widget used to display search results)?
IBM Content Navigator uses RowContextMenu as the JavaScript that is used on a Contentlist.
ecm.widget.listView.gridModules.RowContextMenu
#class This module displays the context menu when the user right clicks or hits Shift F10. It also provides default action capability.
You can extend this class, creating a custom menu.
Then define it within your custom class :
define(["dojo/_base/declare", ..., "myPlugin/myCustomRowContextMenu",...],
function(declare...,RowContextMenu,...) {
return declare("myPlugin.myCustomPane", [
ContentPane]...
Then use it :
_getContentListGridExtensionModules: function() {
var modules = [];
modules.push(RowContextMenu);
return modules;
},
So I'm a first time user of dgrid, and I'm currently building my tree grid like this:
var SelectionGrid = new declare([OnDemandGrid, Selection, Keyboard]);
var myGrid = new SelectionGrid({
store: myStore,
selectionMode: "single",
style: {
width: '99%',
height: '99%'
},
columns: columns
});
My problem is, the grid shows metadata for features I'm drawing in openlayers. I've written code in openlayers so that whenever I click on a feature on the map, it fires an event to scroll to that item in the grid and select it. The grid, however, doesn't pre-load the children for each parent, it only fetches the children when the parent row is expanded.
Currently I'm programmatically expanding every row and then reclosing them to force it to fetch, but it's terribly slow and ends up causing browser warnings about javascript taking too long to run, etc.
Is this a side effect of using OnDemandGrid? Is there anyway to just have all the data loaded so it's all available when the grid is rendered?
I had another issue and wanted to post another answer in case anybody has the same problem. When not using the Tree plugin and just using the OnDemandGrid, I couldn't programattically scroll to items in the grid that hadn't been loaded because the element for the row was null.
I found a property that tells the OnDemandGrid the minimum number of items to load from the store, and just set it to the length of my data, so it loads everything at once. I know that defeats the purpose/benefit of the OnDemandGrid, but it's the functionality I need. Here's the code:
var SelectionGrid = new declare([OnDemandGrid, Selection, Keyboard, DijitRegistry]);
var grid = new SelectionGrid({
store: store,
selectionMode: "single",
columns: columns,
minRowsPerPage: data.length,
farOffRemoval: 100000
});
Here's the reference for minRowsPerPage and farOffRemoval:
http://dojofoundation.org/packages/dgrid/tutorials/grids_and_stores/
I wasn't able to preload all my data, but I just discovered the glory of dojo/aspect. Now I find the parent item that needs expanded and I just build some code inside an aspect/after block that gets executed as soon as that row is finished expanding/loading:
aspect.after(grid, "expand", function (target, expand) {
var row = grid.row(id);
console.info("found row: ", row)
grid.bodyNode.scrollTop = row.element.offsetTop;
grid.clearSelection();
grid.select(row);
},
true);
grid.expand(item.id, true);
I have a menu navigation view (MenuNavigationV), and I have a listener as well added to handle the click events on the tree node. When I click a node I should be able to open/add a new tab panel to a tab bar if not available already in another view(MainV). How can I get a reference of MainV in MenuNavigationV?
My configuration is as follows
Viewport-dockeditems:headerview
-panel
-menuview
-container
-mainview
Why not use id to reference by it, like Ext.getCmp('MainV').
You can also reference by relative paths, like
Tree: {
...
listeners: {
itemclick: function(tree, record) {
tree.up('viewport').down('tabpanel').add({ Your item config here });
}
}
}
How can i add a floating window to the viewport while its getting created.
When i'm trying to add whith
viewport.on('add',function(){
//my functionality here
});
How can i add???
Any help??
You can't really add components to a viewport while it's being created, unless you override its internal methods. And what you're doing is adding an event listener for the "add" event, which fires when items are added to a container.
I don't see why you're trying to add a window to a viewport, but you would add it just like any other item.
Ext.create("Ext.container.Viewport", {
items: [{
xtype: "window",
width: 400,
height: 400,
title: "My Window"
}]
});
Or just create the window by itself, since it is constrained to the document body anyway.
Remember, you have to call the show method on a window before it will render to the document (unless you set autoShow: true on the window config).
In Sencha Touch 2, I have a formpanel with a selectfield to pick from a large store of models. I can choose between an Ext.Picker or an Ext.List as the picker component by setting the usePicker property on the selectfield. But how do I configure the Ext.List?
I tried setting defaultPhonePickerConfig and defaultTabletPickerConfig, but that doesn't seem to work. Specifically, I want to set { grouped: true, indexBar: true } to help my users navigate the long list of options. I used the JavaScript debugger to trace the showPicker() method and verified that the instantiated Ext.List has those two properties set in its config property. But the list overlay still doesn't show the group headings or the index bar. Any idea what I could be doing wrong?
The solution is to defer configuration until after the panel component is painted:
usePicker: false,
defaultTabletPickerConfig: {
listeners: {
painted: function(panel) {
var list = panel.down('list');
list.setGrouped(true);
list.setIndexBar(true);
}
}
}
This is dumb.