0

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

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

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

4

3 に答える 3

0

これを試して ：

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

そしてここにいます:)

于 2010-09-15T14:00:17.060 に答える
0

私は実際にこれを最終的に解決しました。かなり複雑です。私が ExtJS を手伝うことができるなら、二度と 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 はあまり役に立ちませんが、将来誰かが同様のものが必要になった場合に後世のためにここにあります。

于 2009-02-21T04:16:51.430 に答える
0

リンクをグリッド自体に追加する場合は、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 内の展開された領域にリンクを追加する場合は、展開されたコンテンツ領域に使用しているテンプレートにレンダリングを書き込む必要があります。

于 2009-02-06T19:21:59.653 に答える