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 ) ? Или это неправильные рассуждения ? |
Цитата:
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 вспоминает:
Цитата:
Я ж просто показал Вам подход. Вот:
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);
}
});
Это исправленный вариант |
| Часовой пояс GMT +3, время: 15:23. |