PDA

View Full Version : Nestedlist breaking when item is a form panel



blessan
29 Jul 2010, 4:11 AM
I tried putting in a item as a formpanel in the nested list. When I first click its parent the form panel is shown properly. But when I click back and click on the parent element again my form panel does not render and if I click back button from here my completed nested list is gone.
What is goin wrong here. Heres the code to my form.



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
}]
}]
});


I just put 'servicesForm' as an item to the nested list.

blessan
29 Jul 2010, 4:40 AM
I ended up removing the form panel and added each item separately. If there is any thing wrong in what im doing please hep me.

evant
29 Jul 2010, 6:39 PM
It's not really intended to use a form in a nested list.

You might want to post some code that can be run locally.

blessan
29 Jul 2010, 7:33 PM
Ext.regModel('Ranks', {
fields: [
{name: 'category', type: 'string'},
{name: 'title', type: 'string'}
]
});

var categotyStore = new Ext.data.JsonStore({
data : [
{ category : 'hair', title : 'Hair'},
{ category : 'face', title : 'Face'},
{ category : 'nails', title : 'Nails'}
],
model : 'Ranks',
autoLoad : true
//autoDestroy : true
});

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',
title:'Products',
text: 'Products<span class="soapAmount">$59.88</span>',
items: [
{
xtype: 'select',
name : 'chkService',
cls:'serviceSlt serviceTop clientName soapTop',
label: 'Category',
valueField : 'category',
displayField : 'title',
store : categotyStore
},{
xtype: 'select',
name : 'chkService',
cls:'serviceSlt serviceTop clientName soapMiddle',
label: 'Product',
valueField : 'category',
displayField : 'title',
store : categotyStore
},{
xtype: 'numberfield',
name: 'chkServicePrice',
cls:'serviceSlt serviceMiddle clientName soapMiddle',
label: 'Price',
maxValue : 20,
minValue : 2
},{
xtype: 'numberfield',
name: 'chkServicePrice',
cls:'serviceSlt serviceMiddle clientName soapMiddle',
label: 'Quantity',
maxValue : 20,
minValue : 2
}, {
xtype: 'numberfield',
cls:'serviceSlt serviceBottom clientName soapBottom',
name: 'chkServiceDiscount',
label: 'Discount',
maxValue : 20,
minValue : 2
},
{
xtype:'panel',
cls:'addServicesList',
html:'<span style="float:right;color:white;display:inline-block;width:100px;margin-top:10px;">Net: 74.00</span>',
items:[
{
xtype: 'button',
//cls:'checkoutTicketButton checkoutAptButton',
width:100,
style:'display:inline-block;',
ui: 'normal',
text: 'Add',
handler: function() {
alert('add');
}
},
]
}
]
},{
cls:'clientName soapMiddle',
text: 'Services<span class="soapAmount">$59.88</span>',
title:'Services',
items: [servicesForm,
{
xtype: 'select',
name : 'chkService',
cls:'serviceSlt serviceTop clientName soapTop',
label: 'Service',
valueField : 'service',
displayField : 'title',
store : ranksStore
}, {
xtype: 'numberfield',
name: 'chkServicePrice',
cls:'serviceSlt serviceMiddle clientName soapMiddle',
label: 'Price',
maxValue : 20,
minValue : 2
}, {
xtype: 'numberfield',
cls:'serviceSlt serviceBottom clientName soapBottom',
name: 'chkServiceDiscount',
label: 'Discount',
maxValue : 20,
minValue : 2
},{
xtype:'panel',
cls:'addServicesList',
html:'<span style="float:right;color:white;display:inline-block;width:100px;margin-top:10px;">Net: 74.00</span>',
items:[
{
xtype: 'button',
//cls:'checkoutTicketButton checkoutAptButton',
width:100,
style:'display:inline-block;',
ui: 'normal',
text: 'Add',
handler: function() {
alert('add');
}
},
]
}
]
},{
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.log('dock',list.getDockedItems());
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() {
morePanel.showBy(this,'fade');
}
}
]
}/*,
{
xtype: 'toolbar',
dock: 'top',
maxHeight:45,
title: 'Checkout',
layout: {
pack: 'justify',
align: 'center' // align center is the default
}
}*/]
});


By adding 'modules.Checkout' to the kitchen sink structure file should work to use this code.

blessan
29 Jul 2010, 7:34 PM
I previously made a post and now its bug i Guess.
http://www.sencha.com/forum/showthread.php?105680-OPEN-184-Nestedlist-breaking-on-back-button-click&p=495236#post495236