ExtJS: AJAX-ссылки в сетке на вкладке в окне

Question

Я работаю над своим первым проектом с использованием ExtJS.

У меня есть Таблица данных, расположенная внутри вкладки, которая находится внутри окна.

Я хочу добавить ссылку или кнопку к каждому элементу сетки (сейчас я использую расширенные элементы с содержимым HTML через RowExpander), который будет выполнять вызов AJAX и открывать другую вкладку.

Answer 1

В конце концов, я все обдумал. Довольно запутанный, и давайте просто скажем, что я больше не буду вмешиваться в ExtJS, если смогу помочь.

Я использую Grid.RowExpander для размещения HTML внутри Grid с использованием XTemplate. Поэтому мои ссылки довольно просты:

<a href="#" class="add_cart_btn" id="{product_id}" onclick="return false;">Add to Cart</a>

Где {product_id} из данных JSON, загруженных из Ajax-запроса. Это важно, как вы увидите ниже.

Найти эти события гораздо сложнее ... Сетка может сказать вам строку, но мне действительно нужно было извлечь элементы из таблицы внутри строки сетки. Длинная история, но я унаследовал часть этого кода.

Затем в своем родительском компоненте я прикрепил событие к самой Grid.

this.on({       
  click :{scope: this, fn:this.actionGridClick} 
});

Чтобы найти фактическую ссылку, я ищу ссылку в целевом объекте, который имеет правильный класс. В этом случае "add_cart_btn"

actionGridClick:function(e) {
  // Looking for a click on a cart button
  var addCartEl = Ext.get(e.getTarget('.add_cart_btn'));   
  if(addCartEl) {
    productID = addCartEl.id;
    // Once we have the ID, we can grab data from the data store
    // We then call to the server to complete the "add to cart" functionality
  }
}

Скорее всего, это не очень полезно, за исключением моего случая, но это здесь для потомков, если кому-то понадобится нечто подобное в будущем.

Answer 2

Попробуйте это:

// create grid
var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
        {header: 'NAME', width: 170, sortable: true, dataIndex: 'name'},
        {header: 'PHONE #', width: 150, sortable: true, dataIndex: 'phone'},
        {header: 'BIRTHDAY', width: 100, sortable: true, dataIndex: 'birthday',
            renderer: Ext.util.Format.dateRenderer('d/m/Y')},
        {header: 'EMAIL', width: 160, sortable: true, dataIndex: 'email',
            renderer: renderIcon }
    ],
    title: 'My Contacts',
    autoHeight:true,
    width:600,
    renderTo: document.body,
    frame:true
});

Смотрите это:

{header: 'EMAIL', width: 160, sortable: true, dataIndex: 'email', renderer: renderIcon }

рендерер будет определен так:

//image path
var IMG_EMAIL = '/gridcell-with-image/img/email_link.png';

//renderer function
function renderIcon(val) {
    return '<a href="mailto:' + val + '">'+ '<img src="' + IMG_EMAIL + '"> ' + val  +'</a>';
}

А вот и вы:)

Answer 3

Если вы хотите добавить ссылку на саму сетку, вы можете указать другой столбец в вашей ColumnModel и применить средство визуализации к столбцу. Функция средства визуализации состоит в том, чтобы возвращать форматированное содержимое, которое будет применено к этой ячейке, которое может быть адаптировано в соответствии со значением dataIndex столбца (у вас должен быть dataIndex, даже если он является дубликатом другого столбца), и запись этой строки.

function myRenderer(value,meta,record,rowIndex,colIndex,store){
    // Do something here
}

В вашей ссылке может быть событие click для вызова метода, открывающее другую вкладку

function myClickEvent(value1, value2){
     var myTabs = Ext.getCmp('myTabPanel');
     myTabs.add(// code for new tab);
}

Если вы добавляете ссылки на расширенную область в RowExpander, вам нужно будет записать рендеринг в шаблон, который вы используете для расширенной области содержимого.