ExtJS List Data View

Question

Left i have a list with all names. I select one name and click on a button 'add' (to the right list). Also i want to 'remove' items form the right list, back to the left list.

Someone an example?

Answer 1

$('#buttonid').click(function(){
var selecteditem = $('#listID option:selected').html();
$('#targetListId').append(selecteditem );
}

vice-vers for second question.

Answer 2

http://dev.sencha.com/deploy/dev/examples/dd/dnd_grid_to_grid.html

is an example to study

Answer 3

这就是你要追求的吗？

Answer 4

I dont have example handy, however if you look at http://dev.sencha.com/deploy/dev/examples/grid/array-grid.html you can see grid example, focus on tpl to generate action (sell, buy) images/buttons, in listView you can also use tpl, change actions to remove (maybe only gray out if want to restore)...

But add action should be easier in EditGridPanel, If you want to still use listView I will suggest to have ad button on top or bottom toolbar, execute formPanel for data entry, when submit just add to listView.store

Dont forget to build communication to DB if needed in add and remove actions

Answer 5

That's really-really simple to do.

Just grab the selected record(s), remove from the store of left list, and add to the store of right list:

var left = // define your GridPanel or ListView
var right = // define your GridPanel or ListView

new Ext.Button({
  text: "Move right ->",
  handler: function() {
    // when using GridPanel
    var records = left.getSelectionModel().getSelections();
    // when using ListView
    var records = left.getSelectedRecords();

    left.getStore().remove(records);
    right.getStore().add(records);
  }
});

I'm sure you can figure out how to implement the "Move left" button.

Note: Always first remove record from one store before adding to another as ExtJS currently doesn't support having one record in multiple stores. If you do it the other way around, strange things will happen.