I'm having a bit of trouble using a Nested List and a detailCard. I currently have a nested list displaying a simple tree of categories of CDs. It looks like this:
LCMobile.views.CategoriesList = Ext.extend(Ext.Panel, {
layout: 'card',
items: categoriesList
});
var categoriesList = new Ext.NestedList({
title: 'Categories',
store: categoryStore,
displayField: 'title',
getDetailCard: function(item, parent) {
var itemData = item.attributes.record.data;
parentData = parent.attributes.record.data;
LCMobile.detailCard.update(itemData);
this.backButton.setText(parentData.title);
return LCMobile.detailCard;
}
});
And my detailCard looks like this:
LCMobile.detailCard = new Ext.Panel({
id: 'detailPanel',
layout: 'card',
scroll: 'vertical',
styleHtmlContent: true,
items: '',
tpl: ["<h3>{title}</h3>", "<img height='50px' width='50px' src='/images/covers/{sku}.jpg'>{description}" ]
});
Problem I am having is that the detailCard will show up once, and the back button will work, but it will only work one time, and error out after that. Says
Uncaught TypeError: Cannot read property 'style' of undefined.
I'm pretty sure there's another step I'm missing somewhere not assigning the previous card, but I'm at a bit of a loss, and in the API the only thing I could find was about the prev() method for cards, and it only made me more confused. Can anyone point me in the right direction? Thanks!
Related
I have a simple List inside a container that I would like to see refreshed with new items when it is activated.
In my controller, I have an event for this:
onActivate: function() {
var that = this;
var store = this.getApprovalRequestsStore();
store.getProxy().setUrl('http://mobile-approvals-services.example.com/'+ Global.approvalsListUri + Approvals.app.user);
store.load({
callback: function (records, model) {
debugger;
that.getApprovalsList().refresh();
}
});
},
And in my list, I have a tpl for the items that come back from the store (verified I have items coming back from store at break point above), yet no items are shown:
Ext.define('Approvals.view.approvals.List', {
extend: 'Ext.List',
xtype: 'approvalsList',
config: {
itemId: 'ApprovalsList',
store: 'ApprovalRequests',
itemHeight: 70,
variableHeights: false,
pressedDelay: 0,
emptyText: "<div>No Approvals Found</div>",
loadingText: "Loading...",
onItemDisclosure: false,
itemTpl: '<div class="listView">Request For: {requestedFor}</div>',...
Is there something flawed in my approach?
It was a problem with the reader. Once I set totalProperty and successProperty to values being returned from the service it worked. WTHO.
This is really wired. I have a tab in a TabPanel that I want to refresh every time the user taps it. In the tab there should be a list of things. when i am trying to add the list to the panel(the tab container), it is just do not appear! when i try to add other things they aper normally!
For example:
var listConfiguration = this.getListConfiguration();
var myPanel = Ext.create('Ext.Panel', {
html: 'This will be added to a Container'
});
Ext.getCmp('Peoplebutton').add(listConfiguration);
Ext.getCmp('Peoplebutton').add(myPanel);
This code gets the html perfectly in the place! but the list is not shown! The list code is working fine, I have checked it several times...
I would be very happy if someone can help me (:
The list code, working fine for sure
getListConfiguration: function() {
var store = Ext.create('Ext.data.Store', {
fields: ['firstName', 'lastName'],
sorters: 'firstName',
autoLoad: true,
grouper: {
groupFn: function(record) {
return record.get('firstName')[0];
}
},
proxy: {
type: 'ajax',
url: 'contacts.json'
}
});
return {
xtype: 'list',
id: 'list',
itemTpl: '{firstName} ,{lastName}',
grouped: true,
indexBar: true,
infinite: true,
useSimpleItems: true,
variableHeights: true,
striped: true,
ui: 'round',
store: store
};
}
It should be an issue with the height of the list component.
Try adding a fixed height to the list, or maybe flex: 1.
Hope it helps-
I`m trying to write editable list with sencha touch,
I saw many examples but nothing did not work properly so I decided to build from scratch,
I have a list with items and on item tap my controller run the next code
showDetail: function (list, record) {
this.getMain().push({
xtype: 'vedit',
title: record.fullDetails(),
data: record.getData()
});
My "vEdit" screen is an form that should display the current tapped item data
This is the code for the edit form:
var form = Ext.define('TM.view.vEdit', {
extend: 'Ext.form.Panel',
xtype: 'vedit',
config: {
title: 'Edit task',
styleHtmlContent: true,
scrollable: 'vertical',
items: [
{
xtype: 'textfield',
name: 'title',
label: ''
},
{
xtype: 'textfield',
name: 'desc',
label: ''
}
]
}
});
I tried to load the data with the next code:
var ed = Ext.create('TM.model.mTasks', {
title: 'Ed',
desc: 'ed#sencha.com'
});
form.setRecord(ed);
and getting the next error:
Uncaught TypeError: Object function () {
return this.constructor.apply(this, arguments);
} has no method 'setRecord'
NEED YOUR HELP,
Thanks!
Since you have not define a field named record in form's config, so you won't get setRecord() method.
To pass on data you may try doing this:
form.config.record = ed;
and in initialize function of view you can get it like:
var taskData = this.config.record;
var form = Ext.define('TM.view.vEdit', {
Man, you need to create new form(), because it's just a type definition.
I have the following nested list (only on item in at present to make testing easier).
It works ok, but how can I display a normal page view that has html within it or loads the html page in.
var data = {text: 'Top List',
items: [{
text: 'List item',
items: [{text: 'Selected Page'}]
}]
};
Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'memory',
reader: {
type: 'tree',
root: 'items'
}
}
});
var nestedList = new Ext.NestedList({
fullscreen: true,
displayField: 'text',
title: 'Theatres',
store: store
});
App.views.Pastcard = Ext.extend(Ext.Panel, {
title: "past",
iconCls: "add",
items: [nestedList]
});
Ext.reg('HomeAbout', App.views.Pastcard);
SO want the user selects the 'Selected Page' item it opens the the detailed view page and html information, preferably from an external source to limit the amount of code on one page.
EDIT
I think i can try and be a little clearer.
Below is my nested list.
var data = {text: 'My List',
items: [{
text: 'First List Item',
items: [{text: 'Sub list one'}, {text: 'Sub list Two'}]
},
{
text: 'Second List Item',
items: [{text: 'Sub list one'},{text: 'Sub list Two'}]
}
]
};
When me / the user clciks on the lsit and gets to the sublist then clicks on the list item called say "Sub list Two" then at the moment it opens to a blank page as there are no more lists, but instead I woudl liek to dispaly a normal page with details on, that can scroll and everything.
At the moment I dotn need to worry about loading in my json dynamiocally as I woudl liek to get a working model before I move on to that side of it
Thsi is not a phonegap app but a standard web app to be view online via mobiles.
* Edn of Edit **
Thanks
To use external source use a store with ajax proxy check this http://dev.sencha.com/deploy/touch/docs/?class=Ext.data.Store.
To display HTML you can use just html: '<h1>Selected Page</h1>', styleHtmlContent:true,
instead of text:'Selected Page'
The best way is to load JSON objects from:
var myStore = new Ext.data.Store({
model: 'User',
proxy: {
type: 'ajax',
url : '/users.json',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true
});
then instead of html or text property use a template to display it:
tpl:[
'<h4>Email</h4>',
'<tpl for="emails">',
'<div class="field"><span class="label">{type}: </span>{value}</div>',
'</tpl>'
]
Check this tutorial http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap/ and the API docs http://dev.sencha.com/deploy/touch/docs/ for more information.
Update
To the last items i.e. to the sub lists add this leaf: true then have add a handler fir onItemDisclosure to the list. You can get the record clicked as first argument passed to the event. Then you can use that object to display it on a different panel.
You can still use the tutorial above, just substitue the code where the contacts are fetched from the phone with some static data.
From that tutorial this is the part you need
app.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
//put instances of cards into app.views namespace
Ext.apply(app.views, {
contactsList: new app.views.ContactsList(),
contactDetail: new app.views.ContactDetail(),
contactForm: new app.views.ContactForm()
});
//put instances of cards into viewport
Ext.apply(this, {
items: [
app.views.contactsList,
app.views.contactDetail,
app.views.contactForm
]
});
app.views.Viewport.superclass.initComponent.apply(this, arguments);
}});
This is the main panel where the list and the details panel are contained. You handle the onItemDisclosure event on the list, get the record that was clicked on, update the details panel with that data and the switch to that panel with
app.views.viewport.setActiveItem(
app.views.contactsList, options.animation
);
Here, i'm registering my app:
App = new Ext.Application({
name: "App",
launch: function() {
this.views.viewport = new this.views.Viewport();
}
});
This is the way i register new panels and components. I put each of them into seperate js files.
App.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{
xtype: 'cPanel'
},
{
xtype: 'anotherPanel'
}
]
});
// register this new extended type
Ext.reg('App.views.viewport', App.views.Viewport);
I added the other components in the same manner.
In one my components which is a list view, I want to change the container panel's activeItem with another panel when tappen on an item, like this: ( Viewport contains this container panel)
App.views.ListApp = Ext.extend(Ext.List, {
store: App.store,
itemTpl: "...",
onItemDisclosure: function(record) {
App.detailPanel.update(record.data);
App.cPanel.setActiveItem("detailPanel");
},
listeners: {
itemtap: function(view, index, item, e) {
var rec = view.getStore().getAt(index);
App.views.detailPanel.update(rec.data);
App.views.cPanel.setActiveItem("detailPanel", {type:"slide", direction: "left"});
}
}
});
App.views.detailPanel.update(rec.data);
But it says: can't call method "update" of undefined
I tried different variations on that line, like:
App.detailPanel.update(rec.data);
and i tried to give detailPanel and cPanel ids, where they were added to their container panel, and tried to reach them with Ext.get(), but none of these worked.
What is the problem here?
And any other advices would be appreciated.
Thanks.
The lazy way: give the panels ids and use:
Ext.getCmp(id)
The recommended way: Assign itemId to your panel and use:
App.views.viewport.getComponent(itemId)
This will allow you to have more than one instance of the same component at aby given time, the first example is not valid cause you can only have a singular id in the DOM tree.
Also getComponent only works for components stored in the items collection.