ExtJS: AJAX روابط الشبكة في علامة تبويب في النافذة

Question

وأنا أعمل في بلدي أول ExtJS المشروع باستخدام.

ولدي بيانات الشبكة يجلس داخل تبويب التي هي داخل النافذة.

وأريد أن أضيف رابط أو زر إلى كل عنصر من الشبكة (أنا باستخدام عناصر ممتدة في الوقت الراهن مع محتوى HTML من خلال RowExpander) من شأنها أن تجعل مكالمة أجاكس وفتح علامة تبويب أخرى.

Answer 1

وأنا فعلا عملت هذا في نهاية المطاف. ملتف جدا، ودعنا نقول فقط أنا لن تنطوي على نفسي مع ExtJS مرة أخرى إذا كنت يمكن أن تساعد في ذلك.

وأنا باستخدام Grid.RowExpander لوضع HTML داخل الشبكة باستخدام XTemplate. لذا بلدي الروابط هي إلى حد ما على التوالي إلى الأمام:

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

وأين {PRODUCT_ID} هو من البيانات JSON تحميل من استعلام اياكس. وهذا أمر مهم، كما سترى أدناه.

والعثور على هذه الأحداث هو أكثر صعوبة ... الشبكة يمكن ان اقول لكم الصف، ولكن كنت بحاجة فعلا للاستيلاء على عناصر من جدول داخل الصف الشبكة. قصة طويلة، لكني ورثت بعض من هذا القانون.

وبعد ذلك في العنصر الأم بلدي وأرفق حدث إلى الشبكة نفسها.

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

لايجاد الارتباط الفعلي، I بحث عن الارتباط في الهدف الذي يحتوي على الدرجة الصحيحة. في هذه الحالة "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 هذا ليس مفيدا للغاية إلا في حالتي، لكنه هنا للأجيال القادمة إذا كان أي شخص يحتاج شيئا من هذا القبيل في المستقبل.

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
}

وربما يكون وصلتك حدث النقر للاتصال وسيلة، وفتح علامة تبويب أخرى

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

إذا كنت تقوم بإضافة وصلات لمنطقتك الموسعة، داخل RowExpander، ثم سيكون لديك لكتابة التقديم في قالب كنت تستخدم لناحية المحتوى الموسعة.