Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.04.2011, 11:43
Интересующийся
Отправить личное сообщение для bdfy1 Посмотреть профиль Найти все сообщения от bdfy1
 
Регистрация: 16.09.2010
Сообщений: 14

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 ) ? Или это неправильные рассуждения ?
Ответить с цитированием
  #2 (permalink)  
Старый 29.04.2011, 12:54
Аватар для Ex_Soft
Профессор
Отправить личное сообщение для Ex_Soft Посмотреть профиль Найти все сообщения от Ex_Soft
 
Регистрация: 19.12.2009
Сообщений: 164

Сообщение от bdfy1 Посмотреть сообщение
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
		...
	});
__________________
"Helo, word!" - 17 errors 56 warnings
Ответить с цитированием
  #3 (permalink)  
Старый 29.04.2011, 13:14
Интересующийся
Отправить личное сообщение для bdfy1 Посмотреть профиль Найти все сообщения от bdfy1
 
Регистрация: 16.09.2010
Сообщений: 14

Уважаемый это конечно очевидно но неудобно . Предположим я имею 5 табличек на странице. Я должен для каждой таблички копипастом ставить 5 кнопочек "удалить" ?
Ответить с цитированием
  #4 (permalink)  
Старый 29.04.2011, 13:28
Аватар для Ex_Soft
Профессор
Отправить личное сообщение для Ex_Soft Посмотреть профиль Найти все сообщения от Ex_Soft
 
Регистрация: 19.12.2009
Сообщений: 164

/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);
	}
});
__________________
"Helo, word!" - 17 errors 56 warnings
Ответить с цитированием
  #5 (permalink)  
Старый 29.04.2011, 15:46
VKS VKS вне форума
Профессор
Отправить личное сообщение для VKS Посмотреть профиль Найти все сообщения от VKS
 
Регистрация: 24.09.2010
Сообщений: 178

для того чтобы не копипастить прочитай
http://blog.extjs.eu/know-how/factor...xt-extensions/
Ответить с цитированием
  #6 (permalink)  
Старый 29.04.2011, 15:51
Аватар для Ex_Soft
Профессор
Отправить личное сообщение для Ex_Soft Посмотреть профиль Найти все сообщения от Ex_Soft
 
Регистрация: 19.12.2009
Сообщений: 164

/me думает: до купы
Tutorial:Writing a Big Application in Ext
Application Design and Structure
__________________
"Helo, word!" - 17 errors 56 warnings
Ответить с цитированием
  #7 (permalink)  
Старый 03.05.2011, 12:34
Интересующийся
Отправить личное сообщение для bdfy1 Посмотреть профиль Найти все сообщения от bdfy1
 
Регистрация: 16.09.2010
Сообщений: 14

За шаблон абстрактной фабрики спасибо
НО
Вот я написал скрипт:
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" экспортировать в кнопочку . Но это не работает. Почему ?
Ответить с цитированием
  #8 (permalink)  
Старый 03.05.2011, 13:11
VKS VKS вне форума
Профессор
Отправить личное сообщение для VKS Посмотреть профиль Найти все сообщения от VKS
 
Регистрация: 24.09.2010
Сообщений: 178

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

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


Это исправленный вариант
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не пойму под какой лицензией распространяется Extjs kostiaGt ExtJS 11 23.09.2014 13:30
ExtJs - Перевод книги "Lerning ExtJs" MaXyC ExtJS 17 22.06.2012 17:41
ExtJS & ZendAcl cmygeHm ExtJS 0 13.12.2010 17:16
[Книги] Learn ExtJS, ExtJS in Action mycoding Учебные материалы 0 23.10.2010 15:07
Москва, ищу JavaScript программиста отлично знающего ExtJS, от 10 USD / час. maximgb Работа 3 03.08.2010 14:34