PDA

View Full Version : Adding/Removing Button(Delete) from List Item



Quarks
2 Dec 2011, 11:27 AM
I am able to add 'delete' button to the list on swipe.However on Multiple Swipes , Multiple Buttons are created. I dont want multiple buttons to be created.How can that be achieved? Is there a way in which we can delete all the previously created buttons for a particular list item and then add a new button?

Code:

var currentItem;


Ext.regModel('Note', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'narrative', type: 'string' }
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'title', message: 'Please enter a title for this note.' }
]
});


Ext.regStore('NotesStore', {
model: 'Note',
sorters: [{
property: 'date',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'notes-app-store'
},
// TODO: remove this data after testing.
data: [
//{ id: 1, date: new Date(), title: 'Test Note', narrative: 'This is simply a test note' }
]
});
var dlt_btn = new Ext.Button({
iconCls:'trash',
iconMask:true,
handler:function(){
var list = NotesApp.views.notesList;
var notesStore = list.getStore();
notesStore.remove(currentItem);
console.log("delete");
notesStore.sync();
NotesApp.views.viewport.setActiveItem('notesListContainer', {type : 'slide',direction : 'right'});


}


});


var App = new Ext.Application({
name : 'NotesApp',
useLoadMask : true,
launch : function() {
NotesApp.views.notesListToolbar = new Ext.Toolbar({
id : 'notesListToolbar',
title : 'My Notes',
layout : 'hbox',
items : [{
xtype : 'spacer'
}, {
id : 'newNoteButton',
text : 'New',
ui : 'action',
handler : function() {
now = new Date();
noteId = now.getTime();
note = Ext.ModelMgr.create({
id : noteId,
date : now,
title : '',
narrative : ''
}, 'Note');


NotesApp.views.noteEditor.load(note);
NotesApp.views.viewport.setActiveItem('noteEditor', {
type : 'slide',
direction : 'left'
});
}
}]
});


var mytemplate = new Ext.XTemplate('<div class="list-item-title">{title}</div>', '<div class="list-item-narrative">{narrative}</div>');
NotesApp.views.notesList = new Ext.List({
id : 'notesList',
store : 'NotesStore',
itemTpl : mytemplate,
layoutOnOrientationChange : false,
listeners : {
itemswipe : function(DataView, idx, item, e) {
//TODO:stuff to delete previous buttons
currentItem = this.store.data.items[idx];
console.log('itemswipe');
var list = this;
//PLEASE HAVE A LOOK AT THIS SECTION
var btn1 = new Ext.Button(dlt_btn);
btn1.render(list.all.elements[idx]);

},
itemdoubletap : function(DataView, idx, item, e) {
//var selectednote = record;
var selectednote=this.store.data.items[idx];
console.log('itemdt');
NotesApp.views.noteEditor.load(selectednote);
NotesApp.views.viewport.setActiveItem('noteEditor', {
type : 'slide',
direction : 'left'
});
}
},



});


NotesApp.views.notesListContainer = new Ext.Panel({
id : 'notesListContainer',
layout : 'fit',
html : 'This is the notes list container',
dockedItems : [NotesApp.views.notesListToolbar],
items : [NotesApp.views.notesList]


});
NotesApp.views.viewport = new Ext.Panel({
fullscreen : true,
layout : 'card',
cardAnimation : 'slide',
items : [NotesApp.views.notesListContainer, NotesApp.views.noteEditor]
});
}
});




NotesApp.views.noteEditorTopToolbar = new Ext.Toolbar({
title: 'Edit Note',
items: [
{
text: 'Home',
ui: 'back',
handler: function () {
NotesApp.views.viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
}
},
{ xtype: 'spacer' },
{
text: 'Save',
ui: 'action',
handler: function () {


var noteEditor = NotesApp.views.noteEditor;


var currentNote = noteEditor.getRecord();
// Update the note with the values in the form fields.
noteEditor.updateRecord(currentNote);


var errors = currentNote.validate();
if (!errors.isValid()) {
currentNote.reject();
Ext.Msg.alert('Wait!', errors.getByField('title')[0].message, Ext.emptyFn);
return;
}


var notesList = NotesApp.views.notesList;
var notesStore = notesList.getStore();


if (notesStore.findRecord('id', currentNote.data.id) === null) {
notesStore.add(currentNote);
} else {
currentNote.setDirty();
}


notesStore.sync();
notesStore.sort([{ property: 'date', direction: 'DESC'}]);


notesList.refresh();

NotesApp.views.viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });


}
}
]
});
NotesApp.views.noteEditorBottomToolbar = new Ext.Toolbar({
dock: 'bottom',
items: [
{ xtype: 'spacer' },
{
iconCls: 'trash',
iconMask: true,
handler: function () {
var noteEditor= NotesApp.views.noteEditor;
var currentNote=noteEditor.getRecord();
var notesList = NotesApp.views.notesList;
var notesStore = notesList.getStore();
notesStore.remove(currentNote);
notesStore.sync();
notesList.refresh();
NotesApp.views.viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
}
}
]
});


NotesApp.views.noteEditor = new Ext.form.FormPanel({
id : 'noteEditor',
items : [{
xtype : 'textfield',
name : 'title',
label : 'Title',
required : true
}, {
xtype : 'textareafield',
name : 'narrative',
label : 'Narrative'
}],
dockedItems: [
NotesApp.views.noteEditorTopToolbar,
NotesApp.views.noteEditorBottomToolbar
]
});

mitchellsimoens
2 Dec 2011, 12:08 PM
You listen to the itemswipe and add it... where do you want to remove it? You can cache the buttons onto the list and then you have an instance of that. Or utilize ComponentQuery.

Quarks
2 Dec 2011, 10:49 PM
Thanks Mitchell for your suggestion.
But I am not sure how that would prevent multiple buttons from appearing on multiple swipes on same item.Could you please post a code snippet for the same?

Quarks
3 Dec 2011, 4:11 AM
Is there a way i can get all the child elements within a list/list-item(in my case the delete button which i m creating on itemswipe)? Also how will componentquery work with list since list is not a container but a component itself :s