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.
Related
I have a grid editor with toolbar. There are two event handlers, one for grid's store (update event) and one for button on grid tool bar.
When I edit grid cell and update contents and click the button on toolbar without tabbing out, grid store's 'update' event is getting triggered and not the button handler. Is there any way to trigger both events?
Here is the code.
Ext.define('Plant', {
extend: 'Ext.data.Model',
fields: [
// the 'name' below matches the tag name to read, except 'availDate'
// which is mapped to the tag 'availability'
{name: 'common', type: 'string'},
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Plant',
proxy: {
type: 'ajax',
// load remote data using HTTP
url: 'plants.xml',
// specify a XmlReader (coincides with the XML format of the returned data)
reader: {
type: 'xml',
// records will have a 'plant' tag
record: 'plant'
}
},
sorters: [{
property: 'common',
direction:'ASC'
}],
listeners:{
'update':function(){
//Do something related to this store data.
}
}
});
// create the grid and specify what field you want
// to use for the editor at each header.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
id: 'common',
header: 'Common Name',
dataIndex: 'common',
flex: 1,
editor: {
allowBlank: false
}
}],
selModel: {
selType: 'rowmodel'
},
renderTo: 'editor-grid',
width: 600,
height: 300,
title: 'Edit Plants?',
frame: true,
tbar: [{
text:'Test event',
handler:function(){
//Handle button click.
}
}
]
});
Sha Ken, this code is part of the framework examples. I reproduce the scenario and both events are being triggered. Perhaps you are seeing/debuggin one event only.
Back Ground : I am working on an MVC application using sencha touch 2. I am working on a page which has two tabs. Inside the first tab, I have a button inside a title bar.
Issue : I am not able to call anyother function from the button handler. I think, there is an issue with the scope of the calling function.
Here is my code.
Ext.define('WUPOC.view.WUHomePage', {
extend: 'Ext.TabPanel',
requires:['Ext.TitleBar','Ext.dataview.List','Ext.data.proxy.JsonP'],
alias: 'widget.wuHomePageView',
config: {
fullscreen: true,
defaults: {
styleHtmlContent: true
},
items: [{
title: 'Home',
iconCls: 'home',
items: [{
xtype: 'titlebar',
title: 'Hello',
docked: 'top',
items: [{
xtype: 'button',
text: 'LogOut',
ui: 'action',
itemId: 'newButton',
align: 'right',
handler : function(btn){
console.log('LogOut is tapped'); // This is printed
this.up.onNewButtonTap(); // Throws error
}
}],
}],
}, {
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}]
},
onNewButtonTap: function () {
alert('newNoteCommand');
},
});
I am getting the error as below.
Uncaught TypeError: Object function (selector) {
var result = this.parent;
if (selector) {
for (; result; result = result.parent) {
if (Ext.ComponentQuery.is(result, selector)) {
return result;
}
}
}
return result;
} has no method 'onNewButtonTap'
I think there is an issue with setting the scope of a button. Kindly help.
Thank you
First, up is a function so you need to call it this way :
this.up();
Then this.up() would only bring to the container of the button, which has no method onNewButtonTap. You could just keep doing up() until you get the right component but this would me more clever to do :
Add an xtype to your view
Use this xtype as a selector in the up function : this.up('myXType').onNewButtonTap();
Example
Hope this helps
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 need a list of names to display within a sheet in sencha touch. The sheet will display all other child items, but not the list. Am I doing something wrong, or does this simply not work? Here is the code:
myList = Ext.create('Ext.dataview.List', {
store: myStore,
itemTpl: '{firstName}, {lastName}'
});
mySheet = Ext.create('Ext.Sheet', {
items: myList
});
Ext.create('Ext.Panel', {
fullscreen: true,
items: [
mySheet,
{
xtype: 'button',
text: 'Click Me',
handler: function() {
mySheet.show();
}
}
]
});
Thanks in advance!
give it height=300. as per your requriment.
#jeremygerrits is almost correct.
IMO fit won't work as it will fit all the components.
My solution is to use vbox/hbox on the view container. Then on the components that get added, just add flex: 1.
e.g. container:
Ext.define('Tm.view.MyContainer', {
extend: 'Ext.Container',
xtype: 'holder',
config: {
fullscreen: true,
layout: 'vbox'
}
});
and component:
Ext.define('Tm.view.MyComponent', {
extend: 'Ext.dataview.List',
xtype: 'newc',
config: {
flex: 1,
itemTpl: '{option_text}'
}
});
and in controller (assuming container ref been set):
tpl = Ext.create('Tm.view.MyComponent');
tpl.setData(data);
this.getMyContainer().add(tpl);
Then any component added displays correctly.
Try adding a layout to your panel config:
layout: 'fit'
This should make the list fill the rest of the space.
I'm a newbie to SenchaTouch. I have started working on an App and the results are this until now: http://mobz.com.br:86. (based on the Sencha-Touch-tabs-and-toolbars-demo)
Now I started playing with it and I have difficulties to set things strait in my head.
I have lot of JQuery experience, but regarding the design of this library, the coin haven't dropped yet.
I got a TabPanel with 5 sections. I will focus only in one section cause there where my problem is.
The Problem
As you can see in my app, when one clicks an item of ingressos (tickets in English), the app loads the second panel, but load it with bugs.
It loads it without the title bar, without the Back button, and also add an empty sixth button on the right.
But if I load the second panel first, when the page loads, it loads without any UI issues.
My Code
First I declare my ViewPort
Mobz.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
initComponent: function() {
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'destaques', id: 'home' },
{ xtype: 'ingressos' },
{ xtype: 'mobilizacoes' },
{ xtype: 'locais' },
{ xtype: 'minhaconta' }
]
});
Mobz.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
Than after, at the ingressos.js file, I define the tab.
First I got the panel that will load the items into it.
Mobz.views.Ingressos = Ext.extend(Ext.Panel, {
id: "ingressos",
title: "Ingressos", //title of the page
iconCls: "arrow_right", // icon of the tab at the bottom
styleHtmlContent: true,
fullscreen: true,
layout: 'card',
initComponent: function () {
Ext.apply(this, {
dockedItems: [{
xtype: "toolbar",
title: "Ingressos"
}],
items: [Mobz.views.IngressosList]
});
Mobz.views.Ingressos.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('ingressos', Mobz.views.Ingressos);
This is the initial item that load into the panel.
Mobz.views.IngressosList = new Ext.List({
id: 'ingressoslist',
itemTpl: IngressosList_Template,
store: Mobz.stores.IngressosStore,
onItemTap: function (subIdx) {
//Mobz.views.IngressoCinemaList.update(subIdx);
Mobz.views.viewport.setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });
}
});
And that's the second panel.
The panel where the first panel goes to.
Mobz.views.IngressoTitle = new Ext.Panel({
id: 'ingressotitle',
tpl: IngressoTitle_Template,
data: Mobz.stores.IngressoTitle_Store
});
Mobz.views.IngressoCinemaList = new Ext.List({
id: 'ingressocinemalist',
itemTpl: IngressoCinemaList_Template,
store: Mobz.stores.IngressoCinemaListStore,
flex: 1, grouped: true,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Back',
ui: 'back',
handler: function () {
Mobz.views.viewport.setActiveItem(Mobz.ingressos, { type: 'slide', direction: 'right' });
}
}]
}
],
onItemDisclosure: function () {
app.views.viewport.setActiveItem(Mobz.views.IngressosHorario, { type: 'slide', direction: 'left' });
}
});
Mobz.views.Ingresso = new Ext.Panel({
id: 'ingresso',
layout: {
type: 'vbox',
align: 'fit'
},
items: [Mobz.views.IngressoHorario_IngressoECinemaTitles, Mobz.views.IngressoCinemaList]
});
That's it.
I hope some of you guys will have the patient to read all my code examples. I'll appreciate any help.
Shlomi.
First, you must understand the logic about the panels.
You have an TabPanel and you have 5 panel in it. If you run your code when you click a ticket as you described in problem, your code added a new pane to TabPanel. But you need to set active item of Ingression panel(second panel which is in tabPanel).
Now start the solution;
The second tab has a panel(I will say senchaTabItem) whose layout is card layout. And this panel has a panel in it with list of Ingressos. We want to remove this panel and replace the new panel so we should not call the tabPanel's method, we must call to senchaTabItem's method.
So if you replace below code
Mobz.views.viewport.setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });
with working code(below code).
Mobz.views.viewport.getActiveItem().setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });
In your site; it is at line 170 in ingressos.js
I tried and it works, I hope it helps