I've got an ExtJS3 application which could benefit from the ExtJS4 SVG stuffs. Online there is an example of how to use sandbox mode to include ExtJS4 components in an ExtJS3 application... but in the example the ExtJS4 components are in their own floating window, so the ExtJS4 components aren't really added to ExtJS3 components; they just co-exist rather independently.
Is there a way to add an ExtJS4 component to an ExtJS3 component while running in sandbox mode? For example:
var item = Ext4.create("Ext.panel.Panel", { // ExtJS4
/* config */
});
var parent = new Ext.Panel({ // ExtJS3
items:[item],
/* more config */
});
If I try something like this, I usually get an error like...
this.container is null (http://localhost:4000/path/ext-4.0.0/builds/ext-all-sandbox-debug.js:27723)
It would seem that some Ext4 components can renderTo DOM elements in Ext3 components, with limited success:
var ext3Panel = new Ext.Panel({
title:'Ext3'
});
ext3Panel.on('afterrender', function() {
var ext4Panel = Ext4.create('Ext.panel.Panel', {
title:'Ext4',
renderTo:ext3Panel.body.dom,
});
ext3Panel.add(ext4Panel);
});
This seems to be most useful when using Ext4 charts in an Ext3 project.
Citations:
Sencha Forum: ExtJs3 and ExtJs4 in One App
Sencha Forum archives: Using Ext JS 4 Charts in Ext JS 3?
I don't think what you're doing is possible. ExtJS 4 has a completely new rendering engine, and so it's looking for a layout container that doesn't exist.
You'd be far better off migrating from ExtJS 3 -> 4.
Related
I'm trying to use dojo Tooltips on a series of SVG elements that are tool buttons in my header. I'm using the method in the docs of attaching tooltips to multiple nodes like this:
new Tooltip({
connectId: query('.header'),
selector: 'svg',
position: ['below'],
getContent: function (e) {
return e.getAttribute('data-tooltiptext');
}
});
And that works, but if I use a selector of '.tool' (every SVG has a class of tool on it) my getContent function never gets called. 'svg.tool' doesn't work as a selector either. The docs an several examples around the net claim class selectors will work, but I've only been able to get element selectors to work.
I'm requiring 'dojo/query' and I've tried using 'dojo/query!css3' but that doesn't seem to make a difference. I don't know if it makes a difference, but I'm using dojo included with ESRI's ArcGIS JS API library, which reports a dojo version of 1.14.2.
I've experienced the same issue when using the selector attribute while creating a Menu. Within an SVG element, element selectors (even comma-concatenated ones) work, but class selectors do not. Outside of the SVG element, they worked just fine. You can play around with this by using dojo.query in your browser's console to see which elements get selected.
I was able to solve the issue by changing the selectorEngine in my dojo config. Using any of css3, css2.1, and css2 worked, so I think the issue may be in the acme engine. If you don't already have a dojo config, you can add it via a script tag:
<script>
var dojoConfig = {
selectorEngine: 'css3',
};
</script>
I have my code that has been created on StandAlone application.
I want to use some class that generated from Native application.
but I don't know how to do it next.
Assume that i have my standalone class like this:
myWin = new qx.ui.window.Window();
and i have this class:
qx.Class.define("myapp.MyNative",
{
extend : application.Native,
members:{
...........
}
});
How can I use this class on myWin instance?
Or it may be:
mywin.add(new myapp.MyNative());
Please be suggested me.
Hmmm you want to use a qooxdoo app inside a qooxdoo app ... that seems odd, I don't think it will work. if you want to use native javascript, css, html code, you can do this directly:
var myWidget = new qx.ui.core.Widget();
myWidget.addListenerOnce('appear',function(e){
var el = myWidget.getContentElement().getDomElement();
/// do stuff to the element
},this);
to get native access to the dom element inside a qooxdoo widget.
Note that you can only grab the dom element once the widget has been rendered, so you have to use an appear event handler for this.
I use ExtJS 5.0.1 and sencha architect 3.
There is a problem bothering me now. A dataview some of whose filenames are too long and the pics are in a mess.
I want use prepareData to shorten the name, but could not find it in architect.
Is it deprecated? And is there a alternative function?
Sencha Architect doesn't support all features and it has a lot of limitations.
Follow these steps to customize your prepareData.
1 - In your project inspector, click on your Data View
2 - In your config panel, select "Process Config" and click on the + sign next to it.
3 - A process method will be created, click on this method and go to the code editor
4 - add this to the code editor
return Ext.apply(config, {
prepareData : function ( data, recordIndex, record ) {
// your code here
}
});
This should customize your prepareData method.
I'm digging into something really interesting when combining Extjs and D3.
In general, ExtJS renders the main frame for the whole page and D3 to render a dynamic graph in certain div in that frame.
As the rendering logic in Extjs is quite complicated, the place where I put the D3 render logic seems crucial.
Here I've tried two:
1) put into 'initComponent'
[ExtJS]
Ext.define('EDS.view.selector.Container', {
extend: 'Ext.panel.Panel',
alias : 'widget.selectorcontainer',
initComponent: function(){
renderSelectorOrgView();
}
}
[D3]
function renderSelectorOrgView(divId, divHeight, divWidth) {
var svg = d3.select("#" + divId).append("svg");
....
}
The problem is that it just doesn't work since during "initComponent", the div is not completely generated.
2) put into global Ext.onReady()
This turned out that D3 can only select empty result. I think the reason is similar to 1)
3) put into onRender()
Logically this should work alright. And in fact D3 can get the div and its attr perfectly. However the problem is, the ExtJS render process is totally ruined by this code. The whole layout is corrupted. So am I missing anything important in onRender()?
Ext.define('EDS.view.selector.Container', {
extend: 'Ext.panel.Panel',
alias : 'widget.selectorcontainer',
layout: 'fit',
onRender: function(){
//// Render D3
// Selector
console.log("onRender");
console.log(this.height);
console.log(this.width);
var divId = Ext.getCmp('selector-organization').id;
var divHeight = Ext.get(divId).getHeight();
var divWidth = Ext.get(divId).getWidth();
console.log(divHeight);
console.log(divWidth);
renderSelectorOrgView(divId, divHeight, divWidth);
},
}
Best way to make your d3 code work with extjs is to keep the d3 code in a different html all together. Then in your extjs panel use autoLoad config and give the url of the html.
{
xtype : 'panel',
title : 'd3Graph',
autoLoad : { url : 'd3code.html', scripts : true} // your HTML file containing d3 code.
}
I have tried this and it works for me without any errors.
Another way is to use contentEl config and give the name of the div in the config where your d3 visualization is being rendered.
If it is possible to render D3 object as a string of HTML markup, you can include that string in the Panel template. Another way is to let Ext JS components render themselves as usual, and then inject new markup in boxready event handler. Either way will avoid rendering conflicts.
You must add this.callParent(arguments); in your onRender. Here, you're completely replacing the Panel's own rendering logic, that's why it ends up broken.
You can also see this and this questions where a similar topic is discussed.
My extjs version is 4.0.2a. Sometimes vertical scrollbar in grid stops working. It is common problem. I've found some solutions, but they didn't work for me:
this.Grid.hideVerticalScroller();
this.Grid.initVerticalScroller();
this.Grid.update();
this.Grid.determineScrollbars();
this.Grid.forceComponentLayout();
this.Grid.doComponentLayout();
I've also tried scroll: false, but it didn't work too and maked my browser stop responding.
I think, I can disable extjs grid scrollbar and add browser standart scrollbars (overflow:auto), but I don't know how.
Any suggestions?
P.S. I can't use another version Extjs, because there is very big working project with some fixes in some core files. It will be very hard to make all work with new version of Extjs
Here's the "fix" I used with 4.0.7; it may work with 4.0.2. Code is not mine, I took it from sencha.com forum:
Ext.define('Ext.ux.grid.Panel', {
extend: 'Ext.grid.Panel',
initComponent: function() {
var me = this;
me.callParent(arguments);
me.on('scrollershow', function(scroller) {
if (scroller && scroller.scrollEl) {
scroller.clearManagedListeners();
scroller.mon(scroller.scrollEl, 'scroll', scroller.onElScroll, scroller);
}
});
},
onViewRefresh: function() {
var me = this;
try {
me.callParent();
}
catch (e) {};
}
});
Use Ext.ux.grid.Panel instead of Ext.grid.Panel to inherit your Grid classes from. It doesn't solve the problem completely but drastically reduces the visibility of that particular bug.
On a side note, I would recommend you to bite the bullet and upgrade to 4.1.1, in my experience it was well worth the effort. Start with removing your custom fixes from the core; you can refactor them into separate classes that override core classes. After that, it'll go easier. I know, I've been through that too.