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
Related
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 a navigation view with list(A) as its item.
On clicking the list(A) item, showing new view(B).
Now the new view(B) is having one button on clicking again change to view(C).
Problem is
view(C) is same as view(B).
I am able to create the new view and push it, but not able to populate with new data.
and on coming back to view(B), I am getting the data of view(C).
How to solve this scenario.
Code:
/**
* navigationview with list(A)
*/
Ext.define('activity', {
extend: 'Ext.navigation.View',
config: {
items:[
{
grouped:true,
pinHeaders: true,
xtype:'list',
store:{
xclass:'ActivityList'
},
itemTpl:'{title}',
emptyText: 'nothing found'
}
]
}
});
/**
* child view(B) to be appeared on clicking any item in list(A).
*/
Ext.define('TaskDetails', {
extend: 'Ext.Panel',
config: {
title: 'Task',
layout: {
type: 'fit'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
height: '40px',
items: [
{ xtype: 'spacer'},
{
xtype: 'segmentedbutton',
height: '30px',
items: [
{
text: 'Task Details',
pressed: true
},
{
text: 'Child Tasks',
badgeText: '0'
}
]
},
{ xtype: 'spacer'}
]
},
{
xtype: 'container',
items: [
{
xtype:'dataview',
store: {
xclass: 'TaskDetails'
},
itemTpl: 'some thing....'
},
{
xtype:'list',
store:{
xclass:'ChildTask'
},
itemTpl: 'some template...'
}
]
}
]
}
});
I am changing view in controller and want to show the same view(B)again with new data on clicking the list in view(B).
This is a feature of navigation view which you cannot circumvent. Use setActiveItem instead to push views... I had the same issue and changed to setActiveItem it gives you more control of your views than navigation view so
After you first load the view(2), the ref returns an array of 1, as it should. Refs only work if 1 component is returned.
After you load the view(2) again the ref returns an array of 2.
This means none of the listeners fire and the data doesn't load on new instances.
Refs bind to dom elements when controllers first see a view. We can't change that. This means we can't use a ref directly. We know the Ext.ComponentQuery.query is what refs rely on. Using that, we can simulate refs at runtime. I put a runtime dataview ref in the initialize() function of the controller to load the data for a new view. This seems to run every time a view is created, so it works.
I have implemented my application in sencha touch
in my panel i have a navigation bar i want to set title dynamically on panel header
Ext.define('FleetSyncApp.view.WSMachineTypes', {
extend: 'Ext.Panel',
alias: 'widget.wsmachinetypes',
id: 'myPanel',
config: {
layout: {
type: 'vbox'
},
items: [
{
title: 'Contact information',
xtype: 'list',
----
----
-----
}
],
listeners: [
{
fn: 'initComponent',
event: 'initialize'
}
]
},
and in initcomponent method implemented code to get the component like this
initComponent: function(component, options, wstitle) {
var bar = Ext.getCmp('myPanel');
}
This should work
bar.getParent().getNavigationBar().setTitle('Your Title');
Sencha Touch stores the titles of the hidden views in the backButtonStack array on the navigation bar component. You can change the title at a certain index in the navigation view like this:
navView.getNavigationBar().backButtonStack[index] = newTitle;
I made a Gist with a function that takes care of the internals.
Using 4.0.6 I have a gridpanel with an actioncolumn that has two items, a delete button and and view button. The delete button is disabled but there are some circumstances where it needs to be enabled (if a user is an admin). So I am trying to enable it in code.
Here's the view:
Ext.define('PP.view.person.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.personlist',
title: 'Current people',
store: 'People',
columnLines: true,
initComponent: function () {
this.columns = [
{ header: 'Id', dataIndex: 'personId', flex: 1, sortable: true },
{ header: 'Title', dataIndex: 'title', flex: 1 },
{ header: 'Name', dataIndex: 'name', flex: 1},
{ xtype:'actioncolumn',
items:[
{icon:'cross.gif',disabled:true,handler:function(){alert('delete pressed');}},
{icon:'tick.gif',handler:function(){alert('view pressed');}}
]
}
];
this.callParent(arguments);
}
});
and the controller function I'm using to enable:
enableDel: function () {
var view = Ext.widget('personlist');
view.down('actioncolumn').enableAction(0);
}
but I am getting an error inside the extjs enableAction function on the line that starts
me.up('tablepanel').el.select
the el is undefined. The column doesn't get enabled either. Can anyone tell me what I'm doing wrong or post an example that works? If I specify
renderTo: Ext.getBody()
in the view I don't get the error any more but the column still doesn't enable. So I think it must be something to do with rendering but I'm so new to this I haven't a clue where to start.
Generally when el is undefined it means that you are attempting to access it before the component is rendered. When does your enableDel function get called? You might want to try putting it in an afterrender listener.
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.