Ext.js 4.2. Как связать кнопки с таблицей?
 

Доброго времени суток,друзья. Такая проблема: создал grid трехколоночный, таблица подгружается с json, каждую строку можно редактировать по двойному щелчку. Есть две кнопки: "Добавить элемент" и "Удалить элемент". По сути, задача тривиальная, но что-то никак не могу понять как это добро связать друг с другом. Что есть: при нажатии на добавление вылезает окно(window) с тремя textfield и кнопкой "save". Проблема в том, что никак не пойму какую функцию написать чтобы при нажатии на "save" в таблицу добавились введенные данные и таблица обновилась.
Выкладываю код приложения , controller и button:
Приложение:

Ext.application({
    requires: ['Ext.container.Viewport'],
    name: 'fruit',
    appFolder: 'app',
    controllers: ['fruitcontrol'],
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [
                {
                    xtype: 'fruitview',
                },
                {
                    xtype: 'addbutton',
                },
                {
                    xtype: 'deletebutton',
                }
            ]
        });
    }
});

controller:

Ext.define('fruit.controller.fruitcontrol', {
	extend: 'Ext.app.Controller',
	views: ['fruitview','fruitedit','deletebutton','addbutton'],
	stores: ['allfruits'],
	models: ['fruitmodel'],
	init: function() {
		this.control({
			'viewport > fruitview': {
				itemdblclick: this.editfruit
			},
			'fruitedit button[action=save]': {
				click: this.newfruits
			},
		});
	},
editfruit: function(grid, record) {
	var view = Ext.widget('fruitedit');
        view.down('form').loadRecord(record);
},
newfruits: function(button) {
	var win    = button.up('window'),
        form   = win.down('form'),
        record = form.getRecord(),
        values = form.getValues();
    	record.set(values);
    	win.close();
    	this.getallfruitsStore().sync();
}
}
);

button:

Ext.define( 'fruit.view.addbutton', {
	extend: 'Ext.button.Button',
	alias: 'widget.addbutton',
	title: 'Изменить фрукт',
	layout: 'fit',
	autoShow: true,
	text: 'Добавить фрукт',
    handler: function() {
    Ext.create('Ext.window.Window', {
    extend: 'Ext.window.Window' ,
    title: 'Добавить фрукт',
    models: ['fruitmodel'],
	stores: ['allfruits'],
    height: 200,
    width: 400,
    layout: 'fit',
    autoShow: true,
  	items: [{
				xtype: 'form',
				items: [

					{
						xtype: 'textfield',
						name: 'fruit',
						fieldLabel: 'Фрукт',

					},
					{
						xtype: 'textfield',
						name: 'taste',
						fieldLabel: 'Вкус'
					},
					{
						xtype: 'textfield',
						name: 'color',
						fieldLabel: 'Цвет'
					} ,
					{
                		text: 'Save',
                		xtype: 'button',
                		handler: function() {
                			// allfruits.add( fruit: this.name , taste: this.taste , color: this.color);
                			alert('fgfgfgg');
                		}
            }
    ]
     } ],
    ,
	saves: function() {
		alert('dfdfdfdf');
	}
		 })}});

Заранее спасибо!

сделайте код в песочнице

Не знаю, подходит для версии 4.2, но тем не менее...

В общем надо получить store и model таблицы и добавить в него record без ИД. Вот так я делаю при нажатии на кнопку добавить, возможно получиться адаптировать к своему коду:

// Создается и заполняется запись модели.
        var rec = new JournalApp.model.StrategyModel({
        	//id: 0,
        	name: 'Человек',
        	description: 'Двуногий'
        });
        
	var grid = this.getView(); // У вас по другому наверное надо получить.
        grid.getStore().insert(0, rec); // Тут получаем стор и вставляем в него запись модели.

Без ИД, если он будет на сервере формироваться, ну или свой задать.