extjs : ajax 링크 탭의 탭 탭에서 ajax 링크

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

  •  03-07-2019
  •  | 
  •  

문제

ExtJS를 사용하여 첫 번째 프로젝트를 진행하고 있습니다.

창 안에있는 탭 안에 데이터 그리드가 있습니다.

그리드의 각 요소에 링크 또는 버튼을 추가하고 싶습니다 (Rowexpander를 통해 HTML 컨텐츠와 함께 확장 요소를 사용하고 있음).

도움이 되었습니까?

해결책

나는 실제로 이것을 결국 해결했다. 꽤 복잡하고, 내가 도와 줄 수 있다면 다시 Extjs와 관련이 없을 것이라고 말합시다.

Grid.rowexPander를 사용하여 xtemplate을 사용하여 그리드 안에 HTML을 배치하고 있습니다. 따라서 내 링크는 상당히 간단합니다.

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

여기서 {product_id}는 ajax 쿼리에서로드 된 JSON 데이터입니다. 아래에서 볼 수 있듯이 이것은 중요합니다.

이러한 이벤트를 찾는 것은 훨씬 더 어렵습니다 ... 그리드는 당신에게 행을 알려줄 수 있지만 실제로 그리드 행 안쪽의 테이블에서 요소를 가져와야했습니다. 긴 이야기이지만이 코드 중 일부를 물려 받았습니다.

그런 다음 부모 구성 요소에서는 이벤트를 그리드 자체에 첨부했습니다.

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
  }
}

이것의 MPST는 제 경우를 제외하고는 그다지 도움이되지 않지만, 미래에 비슷한 것을 필요로하는 사람이라면 후손을 위해 여기에 있습니다.

다른 팁

이 시도 : 

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

그리고 여기 있습니다. :)

그리드 자체에 링크를 추가하려는 경우 열 모델에 다른 열을 지정하고 열에 렌더러를 적용 할 수 있습니다. 렌더러의 기능은 해당 셀에 적용 할 형식의 컨텐츠를 반환하는 것입니다.이 셀에 적용되는 경우 열의 DatainDex 값에 따라 조정할 수 있습니다 (다른 열의 복제본이더라도 DatainDex가 있어야합니다). 그 행의 기록.

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

링크에 클릭 이벤트가있어 메소드를 호출하여 다른 탭을 열 수 있습니다.

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

RowExpander 내의 확장 된 영역에 링크를 추가하는 경우 확장 된 컨텐츠 영역에 사용중인 템플릿에 렌더링을 작성해야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top