PDA

View Full Version : [OPEN] [CLOSED-184] Nestedlist breaking on back button click



blessan
29 Jul 2010, 3:06 AM
I am trying to create an app. My code structure is basically the kitchen sink. In one of my card panels I have a nested list. And works fine for the sencha nested list demo. But I edited it to include a form panel. It corectly renders the first time. But once I hit back button and try to go back in, my form panel does not render and when I click back button from there I loose my nested list panel too.

I searched and found this post.
http://www.sencha.com/forum/showthread.php?104797-OPEN-156-NestedList-requests&highlight=nestedlist

Am I facing a bug or is there anything wrong with my code.



Ext.regModel('User', {
fields: [
{name: 'name', type: 'string'},
{name: 'password', type: 'password'},
{name: 'email', type: 'string'},
{name: 'url', type: 'string'},
{name: 'rank', type: 'string'},
{name: 'value', type: 'int'},
{name: 'enable', type: 'boolean'},
{name: 'cool', type: 'boolean'},
{name: 'color', type: 'string'},
{name: 'team', type: 'string'},
{name: 'secret', type: 'boolean'}
]
});

Ext.regModel('Ranks', {
fields: [
{name: 'rank', type: 'string'},
{name: 'title', type: 'string'}
]
});
var ranksStore = new Ext.data.JsonStore({
data : [
{ service : 'women', title : 'Women\'s Hair Cut'},
{ service : 'men', title : 'Men\'s Hair Cut'},
{ service : 'children', title : 'Children'}
],
model : 'Ranks',
autoLoad : true
//autoDestroy : true
});
var servicesForm = new Ext.form.FormPanel({
url : 'postUser.php',
standardSubmit : false,
cls:'serviceFormBase',
items: [
{
xtype: 'fieldset',
cls:'serviceForm',
defaults: {
required: true,
labelAlign: 'left'
},
items: [ {
xtype: 'select',
name : 'chkService',
cls:'serviceSlt serviceTop',
label: 'Service',
valueField : 'service',
displayField : 'title',
store : ranksStore
}, {
xtype: 'numberfield',
name: 'chkServicePrice',
cls:'serviceSlt serviceMiddle',
label: 'Price',
maxValue : 20,
minValue : 2
}, {
xtype: 'numberfield',
cls:'serviceSlt serviceBottom',
name: 'chkServiceDiscount',
label: 'Discount',
maxValue : 20,
minValue : 2
}]
}]
});

var morePanel = new Ext.Panel({
floating:true,
items:[
{
xtype: 'toolbar',
dock: 'top',
maxHeight:45,
ui:'dark',
items: [
{
xtype: 'button',
cls:'checkoutDateButton checkoutAptButton',
ui: 'action',
text: 'Date',
handler: function() {
alert('Date');
}
},
{
xtype: 'button',
cls:'checkoutTicketButton checkoutAptButton',
ui: 'action',
text: 'Ticket',
handler: function() {
alert('Ticket');
}
}
]
}
]
});

/*++ Nested list when OPEN button is clicked ++*/
var openNestedList = new Ext.NestedList({
cls:'openNestedList',
items: [{
cls:'openNestedListItem',
html: '<div class="ticketList"><p class="ticketListName">Angela Cox<span>$58.99</span></p><p>Ticket #5</p><p>7/15/2008</p><p>Open</p></div>',
items: [{
cls:'clientName',
text: 'Angela Cox'
},{
cls:'clientName soapTop',
text: 'Products<span class="soapAmount">$59.88</span>'
},{
cls:'clientName soapMiddle',
text: 'Services<span class="soapAmount">$59.88</span>',
title:'Services',
items: servicesForm
},{
cls:'clientName soapBottom',
text: 'Gift Certificates<span class="soapAmount">$59.88</span>'
},{
cls:'clientName soapTop',
text: 'Sub Total<span class="soapAmount soapAmountNI">$59.88</span>'
},{
cls:'clientName soapMiddle',
text: 'Tax<span class="soapAmount soapAmountNI">$59.88</span>'
},{
cls:'clientName soapMiddle',
text: 'Payment<span class="soapAmount">$59.88</span>'
},{
cls:'clientName soapBottom',
text: 'Balance<span class="soapAmount soapAmountNI">$59.88</span>'
},{
xtype:'panel',
cls:'checkoutButtons',
items:[
{
xtype: 'button',
style:'display:inline-block;',
cls:'checkoutButton',
width:120,
height:35,
text: 'Checkout',
handler: function() {
alert('Ticket');
}
},
{
xtype: 'button',
style:'display:inline-block;',
cls:'checkoutButton',
width:120,
height:35,
text: 'Void',
handler: function() {
}
}
]

}
]
},{
cls:'openNestedListItem',
html: '<div class="ticketList"><p class="ticketListName">John Doe<span>$58.99</span></p><p>Ticket #6</p><p>27/15/2008</p><p>Open</p></div>',
items: [{
cls:'clientName',
text: 'John Doe'
}]
},{
cls:'openNestedListItem',
html: '<div class="ticketList"><p class="ticketListName">Evylyn Salt<span>$58.99</span></p><p>Ticket #8</p><p>27/15/2010</p><p>Open</p></div>',
items: [{
cls:'clientName',
text: 'Evylyn Salt'
}]
}],
listeners:{
"listchange": function(list,listItem) {
console.info('dock',listItem);
list.toolbar.setTitle(listItem.title?listItem.title:'Checkout');
},
"render": function(list) {
list.toolbar.setTitle('Checkout');
list.toolbar.height = 45;
}
}
});

modules.Checkout = new Ext.Panel({
xtype:'panel',
layout:'card',
style:'background-color:white;',
//html:'<div id="calendar">test</div>',
items:openNestedList,
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
maxHeight:45,
ui:'dark',
items: [
{
xtype: 'button',
cls:'checkoutOpenButton checkoutAptButton',
ui: 'action',
text: 'Open',
handler: function() {
alert('open');
}
},
{
xtype: 'button',
cls:'checkoutAptButton',
ui: 'action',
text: 'Appt',
handler: function() {
alert('Appt');
}
},
{
xtype: 'button',
cls:'checkoutClientButton checkoutAptButton',
ui: 'action',
text: 'Client',
handler: function() {
alert('Client');
}
},
{
xtype: 'button',
cls:'checkoutMoreButton checkoutAptButton',
ui: 'action',
text: 'More',
handler: function() {
//alert('More');
console.info('more',morePanel);
morePanel.showBy(this,'fade');
}
}
]
}/*,
{
xtype: 'toolbar',
dock: 'top',
maxHeight:45,
title: 'Checkout',
layout: {
pack: 'justify',
align: 'center' // align center is the default
}
}*/]
});



This should work in the kitchen sinck example by adding modules.Checkout to the structure.js

Jamie Avins
29 Jul 2010, 9:38 AM
Thank you for the report, we're currently checking into your issue.

blessan
29 Jul 2010, 7:36 PM
Basically its the formpanel causing the problem. I removed the form panel and added the textfield, numberfield separately as items and it worked fine.

blessan
11 Aug 2010, 1:08 AM
Hi is there any progress for a fix for this bug?

Jamie Avins
11 Aug 2010, 9:42 AM
Nested Lists are getting some love, hopefully it will be ready for the next release.

blessan
11 Aug 2010, 7:38 PM
Oh thats great. When can I expect the next release? next week?

ibrahimokuyucu
26 Aug 2010, 11:46 PM
is causing problems.
I do have a form with a numberfield xtype and it ignores required=true parameter, automatically gets the focus and breaks other things. Simply changing xtype to textfield fixed all of the issues.
Not to mention it didn't bring the numpad on iphone.
One other question/request related to form fields is;
I couldn't find an easy way to set arbitrary attributes of fields through Ext.Field class. For example; there's no maxLength property for the Ext.Field class and if I want to set it myself, I guess I have to get a reference to underlying Dom element and then set attribute. It would be nice to have a public method or config property for setting custom/random attributes to fields.
Thanks Sencha team. Keep up the good work.

blessan
27 Aug 2010, 2:56 AM
Number field is causing trouble. Its a bug. There is a fix in the next release I think.

aconran
3 Sep 2010, 4:26 PM
NestedList has had a complete refactor and will be included in the 0.94 build.

The NestedList is now capable of binding to a TreeStore. The last card that it moves to could be a form panel to provide editing capabilities. You would do this by implementing getDetailCard.

getDetailCard will return a "final" card to attach to any leaf node within the tree structure.

ibrahimokuyucu
3 Sep 2010, 4:47 PM
when should we expect 0.94?
Also top priority is auto scroll to hide URL bar.
If you look at an application in safari with URL bar visible + top nav bar + tab bar then there's no space left for content. Remaning real estate is minimal, you can barely fit a email/pass field. It looks good when user adds it to home screen but its not always guaranteed.
looking fwd to next release.

blessan
5 Sep 2010, 9:55 PM
Will there be a small demo for the new nestedlist showing its capabilities. It would really help to understand how to working on it.

TommyMaintz
6 Sep 2010, 6:42 AM
@ibrahimokuyucu

In the 0.94 build, the url bar will be automatically hidden (on both Android and iOS). It will be released in a couple of hours.

aconran
6 Sep 2010, 12:34 PM
Will there be a small demo for the new nestedlist showing its capabilities. It would really help to understand how to working on it.

Within the 0.94 SDK take a look at examples/nestedlist/. There are two examples cars.html and sourceBrowser.html.