For test automation purposes, I need a class/id value on the tab bit (whatever you call it..) in a tabbed pane.
I have tried the following AAA,BBB,CCC and DDD, and none of these appear in the class in the DOM level.
var panel1 = Ext.create('Ext.panel.Panel');
panel1.cls = 'AAA'
panel1.itemCls = 'BBBB'
var panel2 = Ext.create('Ext.panel.Panel');
Ext.create('Ext.tab.Panel', {
cls:'CCC',
itemCls:'DDD',
renderTo: document.body,
items: [panel1,panel2]
}
);
I know its somehow possible. Anyone have an idea??
http://jsfiddle.net/GQULg/9/
OK just figured this out. I need to set a tabConfig object on the panel or container that goes inside the tabbed panel.
var panel1 = Ext.create('Ext.panel.Panel');
panel1.tabConfig = {
cls: 'myTab'
};
The tabConfig object holds the cls (class values) that will populate the tabs on the top.
If you intend to use selenium: other people stated that selenium uses plain JavaScript commands and that best would be to also use Ext.getCmp(), Ext.ComponentQuery()... from selenium.
Why? Because it does not need any special changes to your production code!
Related
I've an application that need to be multilanguage.
The translations comes from the server and are based on the user that is using the application.
My current approach is to create my own field for everything that is used in the app, and during the initialize, I change what it says to the translated text, based on a given code.
For example, in a button, I create my own button like this:
Ext.define('myapp.view.shared.MyButton', {
extend: 'Ext.Button',
xtype: 'myappbutton',
initialize: function () {
this.callParent();
this.setText(myapp.util.Helper.getTranslation(this.textCode, this.defaultText));
}
})
Then I change de default button configuration to something like this, where I just change the xtype, remove text, and add textCode and defaultText.
{
xtype: 'myappbutton',
textCode: 'back',
defaultText: 'Back',
...
}
Then I define the text code and the default text. The getTranslation method, inspects in a local storage to get the translation for the code, and return the finding, or the default text sent.
¡Here is the question!
Since I've 12 different components (so far), and every component extends in some way from Ext.Component, I want to add my code to the initialize of Ext.Component, in order to apply this piece of code, avoiding this crap of creating a custom control for each different control that I need to give translations. Is this possible ?
TIA!
Milton.-
I guess you can always try something along the lines
Ext.define('MyApp.override.Internationalization',{
override:'Ext.Component',
initialize: function () {
me.callOverridden(arguments);
// Your code here.
}
});
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.
I'm a new developer in Sencha Touch 2 and I'm trying to create my first application using its provided MVC architecture. I find issues with toolbar/titlebar text overlapping when navigating between pages. Take a look at these screenshots:
Example 1
Example 2
I'm not pretty sure what's happening out there. I am using animateActiveItem and routing method to move across my application.
Users.js controller file, login method
// Ajax code here, not included here
// on ajax success:
this.redirectTo("login");
Routes.js controller file
routeLoginPage: function() {
console.log("routeLoginPage");
Ext.Viewport.animateActiveItem({ xtype: "loginpage" }, { type: "slide", direction: "left" });
},
Has anybody really faced a problem like this? I have no idea what to do right now as I was trying to resolve this issue for 2 days+.
EDIT
Basically I need to move across the pages defined as views. I define each view in different file containing properties: extend, requires, alias, config and methods defined by me. Every config property has titlebar attached as its first item.
When I'm trying to change page, I load another view by controller command which changes address hash. Routes controller then fires an animateActiveItem method which loads another View (defined previously as xtype by alias property).
I was using Miami Coder's Tutorial (miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-1/) to learn Sencha Touch basics.
I think you mean title bar and not toolbar...
Use navigation view to navigate between views instead of Ext.Viewport.animateActiveItem
It is a better method. For using navigation view use this guide in sencha docs...
Sencha has a steep learning curve so be ready for frustrations like this...
Navigation View Guide
You can add your required views in one panel class and enable the required view using
mainclass.setActiveItem(0)
or else use the navigation view
{
xtype: 'navigationview',
id: 'navView',
navigationBar: {
hidden: true
}
}
The above code will hide the title bar generated by navigation view... Now you need to define your own titlebar like so
{
xtype: 'titlebar',
title: 'title',
items: [
{
xtype: 'button',
text: 'back',
listeners: [
{
fn: function(button){
Ext.getCmp('navView').pop();//this will pop the view and show previous view
},event: 'tap'
}
]
}
]
}
Hope it helps...
i'm currently trying to get my head around the theming capabilities of ext js 4 and am having some trouble with the styling of buttons.
setting button dimensions isn't quite possible using the scss variables provided, but there are some javascript config options for this. as i don't want to have to apply these settings to every button instance, i was looking for a way of setting 'config defaults' for the button class.
the following approach worked out well when setting a default height:
Ext.button.Button.prototype.height = 15;
unfortunately, this seems not to be possible for the 'minWidth' config:
Ext.button.Button.prototype.minWidth = 1; //nope, sorry
is there a way of setting a default value for 'minWidth'?
short answer
Ext.override(Ext.panel.Panel, {
minButtonWidth: 1
});
Ext.override(Ext.button.Button, {
minWidth: 1
});
longer answer
setting Ext.button.Button.prototype.minWidth = 1; is correct (better use the override mentioned in the short answer), but ignored by ExtJs internal handling of setting the default minWidth of 75 of Ext.panel.Panel (see bridgeToolbars() function). So if you would use a button outside of a Panel Toolbar, your initial try would work.
Also, there is a hardcoded minWidth of 75 of buttons in the makeButtons() function of Ext.window.MessageBox.
In my opinion you should open a bugreport #sencha, because there should be a themable, more global setting for this.
update: this was tested with ExtJS 4.1
If you want to change it for every single button with in the framework. Use the override system.
app/overrides/Button.js
Ext.define('App.overrides.Button', {}, function() {
Ext.override(Ext.button.Button, {
minWidth: 20
});
});
app.js
Ext.onReady(function() {
/*
* Load Overrides
*/
Ext.require([
'App.overrides.Button'
]);
});
var app = Ext.Application({.....
I'm not sure how sensible this is however as things like tabs extend from button and it might have some adverse effects. But thats how it's done any how.
In my application, I´m creating several modal windows which contains a form and an editorgrid. In order to re-use the components, I´ve created the combos, fieldtext, checkbox and other stuff as variables, and only add the necesarry to each window. One of those variables is an editorgrid, xtype: 'editorgrid', and there is the issue:
If I add the variable myEditorGrid to the panel, it works OK the first time I open the window, but the second time that any window has to render the same editorgrid, then the fields cannot be edited any more.
If I create the editorgrid inside the panel (and don´t use the variable), then it works OK everytime I open the window, but I need to copy&paste the same code over and over to all the windows, and that´s not very professional.
I thought the problem is that the variable is not destroyed, and made sure that the windows is closed, but I don´t know how to destroy the variable, and even if this is the solution.
Any idea?
Thanks
You can't reuse an EditorGrid in this manner, because it's column model gets destroyed after use.
The best way to reuse a component is to use the Ext.extend method described here, and then in your initComponent have something like..
initComponent : function() {
this.cm = new Ext.grid.ColumnModel({
columns: [
//define columns here
]
});
this.ds = new Ext.data.JsonStore({
//store config
});
//...
}