[CLOSED-184] Nestedlist breaking on back button click

[blessan]

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]

Thank you for the report, we're currently checking into your issue.

[blessan]

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]

Hi is there any progress for a fix for this bug?

[Jamie Avins]

Nested Lists are getting some love, hopefully it will be ready for the next release.

[blessan]

Oh thats great. When can I expect the next release? next week?

[ibrahimokuyucu]

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]

Number field is causing trouble. Its a bug. There is a fix in the next release I think.

[aconran]

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]

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]

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]

@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]

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.