Javascript-форум - extjs: взаимодествие сложных компонент

Javascript-форум (https://javascript.ru/forum/)

- ExtJS (https://javascript.ru/forum/extjs/)

- - extjs: взаимодествие сложных компонент (https://javascript.ru/forum/extjs/16936-extjs-vzaimodestvie-slozhnykh-komponent.html)

extjs: взаимодествие сложных компонент

рассмотрим пример:
есть grid с store и кнопочкой del. Т е при нажатии на кнопочку del нужно удалять запись из store.
В стандартном виде это выглядело примерно так бы:

Model1.getBottomToolbar().items.item('Model1Del'). on('click',function() {
rec = Model1.getSelectionModel().getSelected()
Model1.store.remove(rec)
})

что конечно работает но выглядит нечитабельно. Хочется создать отдельный компонент Delbutton на основе стандартной кнопочки Ext.Button и уже в этом компоненте прописать удаление записи в гриде где этот компонент будет применен. Как это сделать ( точнее как в этом компоненте получить ссылку на grid ) ? Или это неправильные рассуждения ?

Цитата:

Сообщение от bdfy1 (Сообщение 102604)

Model1.getBottomToolbar().items.item('Model1Del').>>>on<<<('click',function() {
   rec = Model1.getSelectionModel().getSelected()
    Model1.store.remove(rec)
})

/me думает: ну, вот, почему основная масса именно посредством on вешает обработчики?

var
	store = new Ext.data.JsonStore({
		...
	}),
	tbar = new Ext.Toolbar({
		items: [
		...
		{
			text: "Delete",
			handler: function() {
				grid.getStore().remove(grid.getSelectionModel().getSelected());
			}
		}
		...
		]
	}),
	grid = new Ext.grid.EditorGridPanel({
		...
		store: store,
		tbar: tbar
		...
	});

Уважаемый это конечно очевидно но неудобно :). Предположим я имею 5 табличек на странице. Я должен для каждой таблички копипастом ставить 5 кнопочек "удалить" ?

/me вспоминает:

Цитата:

Сообщение от bdfy1

Test1.getBottomToolbar().items.item('Test1Del'). on('click',function() {
rec = Test1.getSelectionModel().getSelected()
Test1.store.remove(rec)
})

"...и эти люди запрещают мне ковырятся в носу?.." © ;)
Я ж просто показал Вам подход. Вот:

Ext.ns("App.Components");

App.Components.EditorGridPanelWithPaging = Ext.extend(Ext.grid.EditorGridPanel, {

	GetPageSize: function(CookieName)
	{
		var
			defaultPageSize=2;

		if(!CookieName
			|| !(CookieName=CookieName.replace(/\s/ig,"")).length)
			return defaultPageSize;

		var
			c,
			cv = (c=Ext.util.Cookies.get(CookieName)) ? Ext.urlDecode(c) : {};

		return cv.pageSize ? (!isNaN(c=parseInt(cv.pageSize,10)) ? c : defaultPageSize) : defaultPageSize;
	},

	SetPageSize: function(CookieName, pageSize)
	{
		if(!CookieName
			|| !(CookieName=CookieName.replace(/\s/ig,"")).length)
			return;
			
		var
			c,
			cv = (c=Ext.util.Cookies.get(CookieName)) ? Ext.urlDecode(c) : {};

		if(!cv.pageSize
			|| parseInt(cv.pageSize,10)!=pageSize)
		{
			cv.pageSize=pageSize;
			//Ext.util.Cookies.set(CookieName,Ext.urlEncode(cv),new Date().add(Date.YEAR,1));
			document.cookie=CookieName+"="+Ext.urlEncode(cv)+";expires="+new Date().add(Date.YEAR,1).toGMTString();
		}
	},

	initComponent: function() {
		var
			PagingComboBox = new Ext.form.ComboBox({
				width: 40,
				store: new Ext.data.ArrayStore({
					fields: ["id"],
					data: [ ["2"], ["4"], ["8"], ["64"] ]
				}),
				mode: "local",
				value: this.GetPageSize(this.cookieName).toString(),
				listWidth: 40,
				triggerAction: "all",
				displayField: "id",
				valueField: "id",
				editable: false,
				forceSelection: true,
				listeners: {
					select: {
						scope: this,
						fn: function(combo, record, index) {
							var
								bbar=this.getBottomToolbar();

							this.SetPageSize(this.cookieName, bbar.pageSize=parseInt(record.get("id"),10));
							bbar.doLoad(0);
						}
					}
				}
			}),
			bbar = new Ext.PagingToolbar({
				pageSize: parseInt(PagingComboBox.value, 10),
				store: this.store,
				displayInfo: true,
				items: [
					"-",
					"Per page: ",
					PagingComboBox
				],
				displayMsg: "Displaying items {0} - {1} of {2}",
				emptyMsg: "No items found"
			});

		Ext.apply(this, Ext.apply(this.initialConfig, {
			clickstoEdit: 1,
			bbar: bbar,
			tbar: {
				items: [
					"->",
				{
					xtype: "button",
					text: "Save",
					scope: this,
					handler: function(b, e) {
						this.getStore().save();
					}
				},
					" "
				]
			}
		}));

		App.Components.EditorGridPanelWithPaging.superclass.initComponent.apply(this, arguments);
	}
});

для того чтобы не копипастить прочитай
http://blog.extjs.eu/know-how/factor...xt-extensions/

За шаблон абстрактной фабрики спасибо
НО
Вот я написал скрипт:

DelButton = Ext.extend(Ext.Button, {
    ,disabled: false
    ,listeners: {
        ,selectionchange: function() {
            alert('!!!!');
        }
    ,initComponent:function() {
        this.relayEvents(this.grid.getSelectionModel(), ['selectionchange']);
        DelButton.superclass.initComponent.call(this);
    }
});

buildTBar: function(config) {
    config.tbar = {}
    config.tbar.push(new DelButton({grid:this }))
}

buildConfig:function(config) {
    this.buildTBar(config)
}

AbstractEditorGridPanel = Ext.extend(Ext.grid.EditorGridPanel, {
    initComponent:function() {
        var config = {
            defaults:{border:true, autoHeight:false }
        };
        this.buildConfig(config);
        Ext.apply(this, Ext.apply(this.initialConfig, config));
        AbstractEditorGridPanel.superclass.initComponent.call(this);

    }

Т е задача проста событие "selectionchange" экспортировать в кнопочку . Но это не работает. Почему ?

Исправьте синтаксические ошибки в

DelButton = Ext.extend(Ext.Button, {
    disabled: false
    ,listeners: {
        selectionchange: function() {
            alert('!!!!');
        }
    }
    ,initComponent:function() {
        this.relayEvents(this.grid.getSelectionModel(), ['selectionchange']);
        DelButton.superclass.initComponent.call(this);
    }
});

Это исправленный вариант