从 tpl Sencha 传递参数 [英] Pass Argument From tpl Sencha

问题描述

我的json如下:

<代码>({"状态":"真","message":"单词",数据":[{"name":"油漆","author":"snooky","word_id":"1","类别":"业务",定义":[{"评级":"绿色","定义":"为某物添加颜色","def_id":"1",示例":空，"作者":"坑","is_favourite":"yesStar"},{"评级":"红色","defintion":"这是油漆一词的新定义.","def_id":"42",示例":空，"作者":"公牛","is_favourite":"noStar"}]}]})

我正在解析这个值并将其显示在 tpl 中，如下所示:

<代码>{xtype: '列表',商店:'词'，高度:140，布局:'适合'，可滚动:{方向:'垂直'，方向锁定:真，},边距:'0 0 5px 0'，itemTpl: ['
','<tpl for="data">','
','<li><h2><b>{name}</b></h2>','<tpl for="定义">','<ul class="para-box-wrapper">','<li class="{rating}"><div >','<div class="paragraph-def" ><p id = "wordDefinition" >{defintion}</p></div>','<span class="authorBox"><i>作者:{author}</i></span>','<div id="favourite" class="{is_favourite}" ></div>','</div>','</li>','</ul>','</tpl>','</li>','</ul>','</tpl>','</div>',].加入('')，听众:{itemtap : 函数(列表、索引、目标、记录、事件){如果(event.target.id=='wordDefinition'){alert("点击评分！");console.log(event.target.id);console.dir("定义--"+记录);//评级之星();}如果(event.target.id=='收藏夹'){alert('收藏夹被点击了！');console.log(event.target.id);console.dir("收藏夹--"+记录);//添加收藏夹();}}}}

我的控制台如下:

![控制台][1]

如上图所示，当用户点击相应的 tpl 时，我想访问 def_id 和 word_id，如下图所示，当用户点击定义时即超重足球支持者我需要它的 word_id，当用户点击明星我需要得到 word_id.做 record.data.data[0].definitions[0].def_id 我可以得到它，但我希望它是动态的，因为以后可能会有 4-5 个定义.

![率][2]

我的商店:

Ext.define('MyApp.store.wordsmenu',{扩展:'Ext.data.Store',配置:{自动加载:真，模型:'MyApp.model.words'，id:'联系人',代理人:{类型:'阿贾克斯'，网址:'json'，读者:{根属性:''}}}});

我的模型是:

Ext.define('MyApp.model.words', {扩展:'Ext.data.Model'，配置:{字段: [{名称:'状态'，映射:'状态'}，{名称:'消息'，映射:'消息'}，{名称:'数据'，映射:'数据'}，{名称:'定义'，映射:'定义.定义'}，{名称:'评级'，映射:'definitions.rating'}，]}});

我可以在 tpl 中显示 json 值.现在，我应该跟踪特定的点击定义和星标并将其id发送到服务器但无法获取id.

有关记录的参考，您可以查看这里.任何帮助！

解决方案

看起来 roll_id 是你模型的一个字段，所以你应该可以从你的记录中得到它:

var rollId = record.get('roll_id');评级开始(rollId)；

My json is as follow:

({
"status":"TRUE",
"message":"Words",
"data":[
{
  "name":"paint",
  "author":"snooky",
  "word_id":"1",
  "category":"Business",
  "definitions":[
    {
      "rating":"Green",
      "defintion":"to put color to in something",
      "def_id":"1",
      "example":null,
      "author":"pit",
      "is_favourite":"yesStar"
    },
    {
      "rating":"Red",
      "defintion":"this is a new definition of word paint.",
      "def_id":"42",
      "example":null,
      "author":"bull",
      "is_favourite":"noStar"
    }
  ]
}
]
})

I am parsing this value and show it in tpl as shown below:

{
    xtype: 'list',
    store: 'words',
    height: 140,
    layout: 'fit',
    scrollable: {  
      direction: 'vertical',
      directionLock: true,
    },
    margin: '0 0 5px 0',
    itemTpl: [          
    '<div>',
    '<tpl for="data">',
    '<ul class="parabox">',
    '<li><h2><b>{name}</b></h2>',
    '<tpl for="definitions">',
    '<ul class="para-box-wrapper">',
    '<li class="{rating}"><div >',
    '<div class="paragraph-def" ><p id = "wordDefinition" >{defintion}</p></div>',
    '<span class="authorBox"><i>Author: {author}</i></span>',
    '<div id="favourite" class="{is_favourite}" ></div>',
    '</div>',
    '</li>',
    '</ul>',
    '</tpl>',
    '</li>',
    '</ul>',
    '</tpl>',
    '</div>',
    ].join(''),
    listeners: {
      itemtap : function(list, index, target, record, event) {
  if (event.target.id=='wordDefinition') {
  alert("Rating clicked!");
   console.log(event.target.id);
  console.dir("Definition--"+record);
    //ratingStar();
  }
  if (event.target.id=='favourite') {
   alert('Favourite clicked!');
   console.log(event.target.id);
   console.dir("Favourite--"+record);
  //addToFavourite();
  }
}
}
}

My Console is as follow:

![console][1]

As shown in above pic i want to access def_id and word_id when user clicks on the respective tpl as shown in below image when user clicks on definition i.e overweight football supporter i need it's word_id and when user clicks on star i need to get word_id. Doing record.data.data[0].definitions[0].def_id i can get it but i want it to be dynamic as there may be 4-5 definition later.

![rate][2]

My store:

Ext.define('MyApp.store.wordsmenu',{
extend: 'Ext.data.Store', 
config:
{
autoLoad:true,
model: 'MyApp.model.words',    
id:'Contacts',
proxy:
{
    type: 'ajax',
    url: 'json', 
    reader:
    {
            rootProperty:''
    }
}
}
});

My model are:

Ext.define('MyApp.model.words', {
extend: 'Ext.data.Model',

config: {
   fields: [
        {name: 'status', mapping: 'status'},
        {name: 'message', mapping: 'message'},
        {name:'data', mapping: 'data'},
        {name: 'definitions', mapping: 'definitions.defintion'},
        {name: 'ratings', mapping: 'definitions.rating'},
    ]
}
});

I am able show json value in tpl. Now, i should keep track of click on specific definition and star and send its id to server but unable to get id.

For reference of record you can check here. Any Help!

解决方案

It seems that roll_id is a field of your model, so you should be able to get it from your record:

var rollId = record.get('roll_id');
ratingStart(rollId);

这篇关于从 tpl Sencha 传递参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！