ExtJS：ウィンドウのタブにあるグリッドのAJAXリンク

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

  •  03-07-2019
  •  | 
  •  

質問

ExtJSを使用して最初のプロジェクトに取り組んでいます。

ウィンドウ内のタブ内にデータグリッドがあります。

リンクまたはボタンをグリッドの各要素に追加し（RowExpanderを介してHTMLコンテンツで現在拡張要素を使用しています）、AJAX呼び出しを行い、別のタブを開きます。

役に立ちましたか？

解決

私は実際にこれを最後に解決しました。かなり複雑で、私がそれを助けることができれば、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} 
});

実際のリンクを見つけるために、正しいクラスを持つターゲット内のリンクを検索します。この場合＆quot; add_cart_btn＆quot; 

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

そしてここにいます：）

リンクをグリッド自体に追加する場合は、ColumnModelで別の列を指定し、列にレンダラーを適用できます。レンダラーの機能は、そのセルに適用されるフォーマット済みコンテンツを返すことです。これは、列の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