I have multiple pie charts and grids in the page, so page has to be scrolled to view the charts.
Problem :
When pagination in the grid, or slice in the chart is clicked, page automatically scrolls top because of which user has to scroll down every time to view the chart/grid.
i am using "App SDK 2.0 RC1"
Any fix for this ?
Sample code :
items : [
{
xtype : 'container',
id : 'releaseBox',
layout : 'vbox'
},
{
xtype : 'container',
id : 'chart1',
layout : 'vbox'
},
{
xtype : 'container',
id : 'chart2',
layout : 'vbox'
},
{
xtype : 'container',
id : 'chart3',
layout : 'vbox'
},
{
xtype : 'container',
id : 'chart4',
layout : 'vbox'
},
{
xtype : 'container',
id : 'chart5',
layout : 'vbox'
}
]
You could try adding a listener for that event and adding this code to scroll to the desired id:
location.hash = '#chart' + chartNumber;
Related
I have such a tab panel:
{
xtype : "tabpanel",//
region : "center",
title : "name",
id:"mytabpanel",
items : [ {
title : "tab1"
},{
autoLoad: {url: 'test.jsp', scope: this},
title: 'tab2',
closable:false,
autoScroll:true
} ]
}
Don't know how to refresh tab2 based on some parameter.
Thanks.
AutoLoad is deprecated since 4.1.1. Use loader config instead.
to (re)load your component. See ComponentLoader example
I have many fieldcontainer in a form panel. i want to reset only one fieldcontainer rather then whole panel. but i can't do this. how can i do it? here is my code
Ext.define(Fsl.app.getAbsView('V01T007001X04'), {
extend : 'Ext.form.Panel',
alias : Fsl.app.getAlias('V01T007001X04'),
id : 'V01T007001X04'.toLowerCase(),
margin : '0 0 0 0',
initComponent : function(){
this.items =[{
xtype : 'fieldcontainer',
layout : 'vbox',
items :[{
items : [{
xtype : 'fieldcontainer',
layout : 'vbox',
margin : '5 5 0 5',
items : [
{
xtype : 'numberfield',
fieldLabel : 'InvoiceNo',
name : 'invoiceId',
}]
},
{
xtype : 'fieldcontainer',
layout : 'vbox',
margin : '5 0 0 10',
items: [{
xtype : 'datefield',
name : 'date',
fieldLabel : 'Date'
}]
},{
xtype : 'fieldcontainer',
layout : 'vbox',
margin : '5 0 0 10',
items: [{
xtype : 'textfield',
name : 'branchId',
fieldLabel : 'Branch Id',
}]
}]
}]
},{
xtype : 'fieldcontainer',
combineErrors : true,
layout : 'hbox',
items: [{
xtype : 'numberfield',
fieldLabel : 'Article Id',
name : 'articleId',
}]
}];
this.callParent(arguments);
}
});
You should be able to query for the fieldcontainer you want, then run the reset() function on each of the fields inside the container. Start by giving your fieldcontainer an itemId property, so that it can be queried:
{
xtype: 'fieldcontainer',
itemId: 'invoiceCt',
items : [
{
xtype: 'numberfield',
fieldLabel: 'InvoiceNo',
name: 'invoiceId',
}]
},
Then query for the fieldcontainer and reset each field inside:
var fieldContainer = form.down('#invoiceCt');
fieldContainer.items.each(function(f) {
if (Ext.isFunction(f.reset)) {
f.reset();
}
});
I've seen examples of the new NavigationView component in Sencha Touch. How would I switch to another view based on using its xtype. The API docs seem to have omitted a useful example showing most common usage (i.e. using the xtype with creating a new view). Or am I missing something?
In their example: http://docs.sencha.com/touch/2-0/#!/api/Ext.navigation.View
They are using the reference 'view' to push a new view.
But my questions are:
1) If the view that has initially been navigated to is a result of an xtype load like so:
Ext.Viewport.add({xtype:'testnavview'});
then how do I then get a reference to it to push views onto it if its implicitly loaded using xtype from the originating controller?
2) how can then I then push views onto the navigation view using the xtype (see below?) ...
i.e. can I do something like this:
Ext.define('MyApp.view.TestNav', {
extend: 'Ext.NavigationView',
alias: 'widget.testnavview',
config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'View 1',
items: [
{
xtype: "button",
text: "View1",
handler: function () {
console.log("handler view1");
this.push({ xtype: "View1" });
}
},
{
xtype: "button",
text: "View2"
},
{
xtype: "button",
text: "View3"
},
{
xtype: "button",
text: "View4"
}
]
}
]
}
});
You can retrieve you navigation view by adding a reference to it in your controller :
refs: {
navigationView: 'navigationview'
}
Then you get it anywhere in your controller like this :
this.getNavigationView().push({xtype: 'myPushedView'});
I have developed a small view that contains special char like 'é' and when I go to the browser I find that these special char have been replaced by question mark, I have added the meta tag with charset="utf-8" to my index to resolve the problem but no changes, this is the first time I encounter such a problem, because I have already developed other views with special char (for an other ExtJs project) without any problem. any idea about this ?
Ext.define('ALM.MyView', {
extend : 'Ext.container.Viewport',
initComponent : function() {
var me = this;
Ext.applyIf(me, {
items : [{
xtype : 'toolbar',
//padding: '10px 10px 10px 10px',
//height: 28,
//width: 714,
items : [
{
xtype : 'button',
text : 'tout',
iconCls : 'all-icon'
}, {
xtype : 'button',
text : 'éffacer',
iconCls : 'clear-icon'
}, {
xtype : 'tbseparator'
}, {
xtype : 'button',
text : 'ajouter',
iconCls : 'add-icon'
}, {
xtype : 'button',
text : 'supprimer',
iconCls : 'delete-icon'
}, {
xtype : 'button',
text : 'modifier',
iconCls : 'modify-icon'
}, {
xtype : 'button',
text : 'rechercher',
iconCls : 'find-icon'
}
]
}]
});
me.callParent(arguments);
}
});
UPDATE
This is what I get as HTML :
<span id="button-1006-btnInnerEl" class="x-btn-inner" style="">�����</span>
and for instance I get this in the view : (Toolbar)
the solution that I have chosen is to use HTML special character code as it is discribed in the post given by #sha :stackoverflow.com/questions/... .
in the other hand I was looking for if Ext JS gives automatically the possibility of using spercial char.
Special thanks to #sha.
I place tabPanel's tabBar on top postion and keep bottom style, so refer to this thread, and the display result is ok but the tab bar not extend all space, at the top right corner of page shows background. ( about 30px at my 1024px resolution).
when use Chrome to view it, if I open Developer Tools and then close it, then tab bar becomes ok. (occupy all screen with).
I try tabPanel.doLayout() or viewPort.doLayout(), both not works.
Please give any advice, Thank you !
var tabPanel = new Ext.TabPanel({
id:'tabPanel',
tabBar : {
dock : 'top',
layout : { pack : 'right' },
},
listeners: {
single: true,
afterlayout: function (panel) {
var dom = Ext.select('.x-docked-top', panel.getEl().dom).first().dom;
dom.className = dom.className.replace('x-docked-top', 'x-docked-bottom');
}
},
defaults: {
scroll: 'vertical'
},
cardSwitchAnimation: {
type: 'slide',
duration: 1
},
flex: 1,
ui: 'light',
items : [
{
iconCls : 'icon1',
items: [ scanPanel ]
},
{
iconCls : 'icon2',
items: [ logPanel ]
}
]
});
...
var viewPort = new Ext.Panel({
fullscreen : true,
layout : {
type : 'fit',
align : 'stretch'
},
items : [ tabPanel]
});
the Ext.Panel has a default setting for padding, try to move the tabBar into Ext.Panel.