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

StackOverflow https://stackoverflow.com/questions/415170

  •  03-07-2019
  •  | 
  •  

Вопрос

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

У меня есть Data Grid внутри вкладки, которая находится внутри окна.

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

Это было полезно?

Решение

На самом деле, я все решил в конце. Довольно запутанный, и, скажем так, я больше не буду вовлекаться в 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
  }
}

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

Другие советы

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

// 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>';
}

А вот и вы:)

Если вы хотите добавить ссылку на саму сетку, вы можете указать другой столбец в вашей 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, вам нужно будет записать рендеринг в шаблон, который вы используете для расширенной области содержимого.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top