使用Sencha Touch ver 2.3.1a
PassDownEntryView中的轮播控件
{ xtype: "container", itemId: "pageEntryItemsContainer", layout: "fit", items: [ { xtype: "carousel", itemId: "carouselItems", direction: "horizontal", items: [ ] } ] }我正在为旋转木马创建多个视图实例
var data = JSON.parse(response.responseText); var itemViewArray = []; var index = 0; Ext.Array.each(data.Data, function(item) { var itemView = Ext.create('MCConnect.view.PassDown.PassDownEntryItemView'); itemView.setItemId('EntryItemId' + index); itemView.configureEntry(item); itemViewArray.push(itemView); index++; }); if(itemViewArray.length > 0) { carouselControl.setItems(itemViewArray); }configureEntry在PassDownEntryItemView中设置html
{ xtype: "label", html: "" }设置标签的代码：
configureEntry: function(item) { var fieldLabel = Ext.ComponentQuery.query('label')[0]; fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>"); }它创建了正确数量的轮播，但只有第一个实例具有标签集。 其余的都是空白的。 我做了一个configureEntry（）的输出，并正确地将每个项目通过。 好像我在设置时遗漏了一些东西。 有任何想法吗？
更新：6/21 - A似乎问题是视图的实例。 原因当我创建硬编码视图时：
var item1 = { item: "test1" } var itemView = new MCConnect.view.PassDown.PassDownEntryItemView(); itemView.configureEntry(item1); var item2 = { item: "test2" } var itemView1 = new MCConnect.view.PassDown.PassDownEntryItemView(); itemView1.configureEntry(item2); carouselControl.setItems([itemView, itemView1]);即使有两个旋转木马面板出现，我仍然得到只有“Test2”显示的结果。 除了第二个是空白
更新6/22我添加了下面的PassDownEntryItemView代码：
Ext.define('MCConnect.view.PassDown.PassDownEntryItemView', { extend: 'Ext.form.Panel', xtype: 'passdownEntryItemView', requires: [ 'Ext.data.Store', "Ext.field.Text", "MCConnect.view.Commons.AutoHeightTextArea" ], config: { itemId: '', isReadOnly: true, passDownEntryItemId: 0, layout: "vbox", items: [ { xtype: 'fieldset', style: 'padding: 0; margin: 1px;', items: [ { xtype: "label", html: "" } ] } ], listeners: [ ] }, initialize: function() { }, configureEntry: function(item) { this.setPassDownEntryItemId(item.passDownEntryId); var fieldLabel = Ext.ComponentQuery.query('label')[0]; fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>"); } });6/22感谢Akatum的建议。 我想到了。 我将标签的itemId标记为＃labelDistrictItem-0所以在我的configureEntry（）中我搜索了它然后设置它并重命名为itemId：
var fieldLabel = Ext.ComponentQuery.query('passdownEntryItemView #labelDistrictItem-0')[0]; fieldLabel.setItemId('labelDistrictItem-' + item.id); fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");它现在有效
Using Sencha Touch ver 2.3.1a
The carousel control in PassDownEntryView
{ xtype: "container", itemId: "pageEntryItemsContainer", layout: "fit", items: [ { xtype: "carousel", itemId: "carouselItems", direction: "horizontal", items: [ ] } ] }I'm creating multiple instances of a view for a carousel
var data = JSON.parse(response.responseText); var itemViewArray = []; var index = 0; Ext.Array.each(data.Data, function(item) { var itemView = Ext.create('MCConnect.view.PassDown.PassDownEntryItemView'); itemView.setItemId('EntryItemId' + index); itemView.configureEntry(item); itemViewArray.push(itemView); index++; }); if(itemViewArray.length > 0) { carouselControl.setItems(itemViewArray); }configureEntry sets the html in the PassDownEntryItemView
{ xtype: "label", html: "" }Code that sets the label:
configureEntry: function(item) { var fieldLabel = Ext.ComponentQuery.query('label')[0]; fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>"); }It creates the right number of carousels but only the first instance has the label set. The rest of them are blannk. I did an output of configureEntry() and it is properly passwing each item. Seems like im missing something when setting it. Any ideas?
Update: 6/21 - A It seems like the problem is the instance of the view. Cause When I create a hard coded view:
var item1 = { item: "test1" } var itemView = new MCConnect.view.PassDown.PassDownEntryItemView(); itemView.configureEntry(item1); var item2 = { item: "test2" } var itemView1 = new MCConnect.view.PassDown.PassDownEntryItemView(); itemView1.configureEntry(item2); carouselControl.setItems([itemView, itemView1]);I still get the result that only "Test2" shows even though there are two carousel panels showing up. Except the second one is blank
Update 6/22 Ive added my PassDownEntryItemView code below:
Ext.define('MCConnect.view.PassDown.PassDownEntryItemView', { extend: 'Ext.form.Panel', xtype: 'passdownEntryItemView', requires: [ 'Ext.data.Store', "Ext.field.Text", "MCConnect.view.Commons.AutoHeightTextArea" ], config: { itemId: '', isReadOnly: true, passDownEntryItemId: 0, layout: "vbox", items: [ { xtype: 'fieldset', style: 'padding: 0; margin: 1px;', items: [ { xtype: "label", html: "" } ] } ], listeners: [ ] }, initialize: function() { }, configureEntry: function(item) { this.setPassDownEntryItemId(item.passDownEntryId); var fieldLabel = Ext.ComponentQuery.query('label')[0]; fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>"); } });6/22 Thanks to Akatum suggestion. I figured it out. I labeled the itemId of the label as #labelDistrictItem-0 so in my configureEntry() i searched for it then set it and renamed the itemId:
var fieldLabel = Ext.ComponentQuery.query('passdownEntryItemView #labelDistrictItem-0')[0]; fieldLabel.setItemId('labelDistrictItem-' + item.id); fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");and it works now
最满意答案
问题出在configureEntry函数中。 var fieldLabel = Ext.ComponentQuery.query('label')[0]; 将始终返回整个应用程序中的第一个标签组件。 因此，在您的情况下，它将始终返回您的第一个轮播面板中的标签。
而不是使用Ext.ComponentQuery.query('label')[0]; 您应该使用up()或down()方法（取决于应用程序的布局down()在特定MCConnect.view.PassDown.PassDownEntryItemView查找特定标签。
编辑
您可以通过仅在PassDownEntryItemView子组件中查找它来获取label组件。 为此，您可以使用down()方法。 所以你的configureEntry方法应如下所示：
configureEntry: function(item) {
this.setPassDownEntryItemId(item.passDownEntryId);
var fieldLabel = this.down('label');
fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");
}
举例说明： https ： //fiddle.sencha.com/#fiddle/6t4
Problem is in your configureEntry function. var fieldLabel = Ext.ComponentQuery.query('label')[0]; will always returns first label component in your whole application. So in your case it will always returns label which is in your first carousel panel.
Instead of using Ext.ComponentQuery.query('label')[0]; you should look for specific label in specific MCConnect.view.PassDown.PassDownEntryItemView by using up() or down() methods (depends on layout of your application).
Edit
You can get your label component by looking for it only in child components of your PassDownEntryItemView. For this you can use down() method. So your configureEntry method should look like this:
configureEntry: function(item) {
this.setPassDownEntryItemId(item.passDownEntryId);
var fieldLabel = this.down('label');
fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");
}
Fiddle with working example: https://fiddle.sencha.com/#fiddle/6t4
更多推荐
发布评论