I have an XTemplate and I would like to add some actual EXT widgets inside the template so that I have template code rendered above and below the widgets. Let's say I have a "dataview" with the following itemTpl defined:
itemTpl: [
'<tpl for=".">',
'<div class="song-page-header">',
' <div class="artwork"><img src="{artwork}"/></div>',
' <h1>{title}</h1>',
' <h2>{artist}</h2>',
' <h3>Genre: {genre}</h3>',
' <p>{copyright}</p>',
'</div>',
/* Ext.Button should go here */
'<tpl for="offers">',
' <p>{offer_id}: {offer_type}, {price}</p>',
'</tpl>',
'</tpl>'
]
Is it possible to define a real Ext.Button there (and not just some HTML approximating the behavior of an Ext.Button)? I don't care if it has to be applied after the fact, but I can't seem to find the correct event handler to use to be able to insert a button there. The Sencha documentation sucks so any help would be greater appreciated.
Actually you can do this, you just have to be a little bit creative.
Check out my blog post here: http://jakes-hackerblog.herokuapp.com/blog/2013/05/23/a-fresh-rails-blog/
Essentially, you put some dynamic div element in your template
'<div id="box-holder">' +
'<div id="box-{schoolpersonid}"></div>'+
'</div>'+
Then you use the use "renderTo" within your button config, calling it in a refresh funciton:
listeners: {
'refresh': function(records) {
var storeRecords = records._store._data.items;
for(var i = 0; i < storeRecords.length; i++){
var data = storeRecords[i].data;
var renderTo = this.element.select('#box-' + data.schoolpersonid).elements[0];
var button1 = new Ext.Button({
action: 'doPresent',
xtype: 'button',
align: 'right',
text: 'Present',
ui: 'present',
renderTo: renderTo,
schoolpersonid: data.schoolpersonid
});
}
}
},
I think XTemplate does not support this feature due to managment and performance of Sencha Touch framework.
Secondly, you cannot do like that because basically you're trying to merge between HTML and javascript inside your itemTpl when sencha template only allow html structure.
In order to address this scenario, you may take a look at Component Dataview
Related
I am running my sencha-touch/phonegap app on the emulator and when the i set the html using iframe on a panel. It is not visible. But if i switch to a different panel and come back to the original html panel. the html is visible.
I believe its the refresh or layout issue but i cant find a way to redraw the panel.
I have already tried myPanel.hide() and myPanel.show() but the content is not visible. I have the iframe inside a div like below
'<div style="height:100%;-webkit-overflow-scrolling:touch;"><iframe style="width:100%;height:100%" src="'+results[i].url+'"/></div>'
I am setting the content of the div dynamically like below.
for(var i=0;i<results.length;i++)
{
console.log("Setting the result page to "+results[i].url);
var url = '<div style="height:100%;-webkit-overflow-scrolling:touch;"><iframe style="width:100%;height:100%" src="'+results[i].url+'"/></div>';
this.getResultsTabPanel().add({
title: results[i].title,
id:results[i].title+(i+1),
itemId:results[i].title+(i+1),
html:url
});
}
Any ideas?
I have a solution now. Instead of adding the child panels to the tabpanel right away. I create them inside like this
for(var i=0;i<results.length;i++)
{
var url = '<div style="height:100%;-webkit-overflow-scrolling:touch;"><iframe style="width:100%;height:100%" src="'+results[i].url+'"/></div>';
var result = {
title: results[i].title,
id:results[i].title+(i+1),
config : {
itemId:results[i].title+(i+1),
},
xtype: 'panel',
scrollable:true,
styleHtmlContent : true,
html:url
};
panels.push(result);
}
this.getResultsTabPanel().add(panels);
This works both on chrome browsers and emulators.
How can I display all items in Ext.List that are nested in Ex.Panel dynamically,
that means the height of nested Ext.List must be dynamic, and how to add a scrollbar for parent, that is Ex.Panel?
Thanks!
Ext.define('framework.view.ShoppingCart', {
extend: 'Ext.Panel',
alias : 'widget.ShoppingCart',
id: 'ShoppingCart',
requires: [
],
config: {
autoDestroy: true,
fullscreen : true,
items: [
{
xtype: 'fieldset',
id: 'shoppingCartItemsTitle',
title: Util.getMessageInner('mstore_item_list',null,0),
height : 27,
border: 0,
margin: "10 10 6 10",
cls: 'items_hided'
},
{
xtype : 'list',
itemId : 'itemList2',
id: 'itemList2',
autoDestroy: true,
selectedCls: 'x-item',
scrollable: 'vertical',
height : '100%',
itemTpl: new Ext.XTemplate(
'<div class="as_icon_list as_icon_list_bg height_68">',
' <div style="margin:7px 0 0 10px; float:left">',
'<div style="display:block;">{gName}</div>',
'<div style="display:block;">',
ASVari.appInfo.currencyName + ' {[Util.formatMoney(values.gPrice)]} × ',
'{gQuantity}',
'</div>',
'</div>',
'</div>'
)
}
]
}
});
I am not sure what it is that you are trying to accomplish...
As far as dynamically setting the data dynamically, you can use the getData() and setData(), getHeight() and setHeight() method for Ext.Panel() and Ext.data.List().
Based on some event you can listen for in a controller you could get all the properties from one view and set them into another view.
For 'how to add a scrollbar for parent, that is Ex.Panel?' I'm really unsure about what you are asking but I think you are looking for something like a scrollable container with items next to a static container that contains a details view.
If that is the case check out the hbox layout. You would do something drop a list with flex : 1 next to a container with details and flex : 5 (or whatever). You would then listen for itemTap on the list and load the container view with the desired data.
Sorry that this was brief but with such a vague question I didn't want to spend the time answering a question you weren't asking.
Please let me know how I might get you some better information.
Good Luck,
Brad
I've this requirement of giving user provision of subscribing to certain categories. The layout which is to be designed is having -
checkbox => at top toggling automatic subscription setting.
dataview => at middle, having list of subscriptions and checkbox field.
button => allowing user to update the subscription list.
I've setup the dataview correctly. Dataview is added as fallows -
xtype: 'dataview',
itemTpl:'<div style="color:#fff;margin-left: 20px;background: transparent;" class="x-field-checkbox x-field">' +
'<span style="float:left">{name}</span>' +
'<span style="float:right">' +
'<input type="checkbox" class="x-input-el x-input-checkbox" style="display: inline;top:10px">'+
'</span>'+
'</div>',
fields:['name'],
data:[
{
name :'A'
},
{
name :'B'
},
{
name :'C'
}
When I try to add component no 1 and 3 ( specified above in question ) , dataview is not getting displayed. I'm getting checkbox and button only. When I inspect the rendered html, I realize that dataview is not even populating with data config. The code I used to add these three components is as fallows -
Ext.define("PApp.view.home.Subscription", {
extend:'Ext.Container',
xtype:'subscription',
config: {
layout:'fit',
fullscreen:true,
scrollable:false,
items: [
{
xtype:'container',
fullscreen:true,
items:[
{
xtype:'checkboxfield',
name : 'subscriber-setting',
label: 'Subscriber',
value: 'yes',
checked: true
},
{
xtype: 'dataview',
itemTpl:'<div style="color:#fff;margin-left: 20px;background: transparent;" class="x-field-checkbox x-field">' +
'<span style="float:left">{name}</span>' +
'<span style="float:right">' +
'<input type="checkbox" class="x-input-el x-input-checkbox" style="display: inline;top:10px">'+
'</span>'+
'</div>',
fields:['name'],
data:[
{
name :'A'
},
{
name :'B'
},
{
name :'C'
}
},
{
xtype:'button',
text:'Update',
ui:'action'
}
}
]
}
});
I can't figure out why dataview is not getting displayed ( not even populated with data ). When dataview is not breaded between the checkbox and button, it gets rendered as expected.
and when dataview is breaded ,it looks like this -
Please try giving some height in css of template or dataview config with hbox layout of container
Tried few things and managed to solve this problem. Mostly, list or dataview are used to display fullscreen content. But in my case, I needed it between two other components.
To make this work, I added following config to parent container -
layout: {
type: 'vbox',
align : 'stretch'
},
This was not sufficient though. Need to add flex config in each component. Without this config, dataview was not being seen. And I was wrong about data not populating indeed it was ( missed it first time since html is deeply nested ). Here's the preview how it looks.
I have a treegrid "templatecolumn" that displays an image based on a condition in an XTemplate.
However, I also would like an html formatted tooltip displayed upon mouseover of the image. I've done this with Ext JS 3.x via ext:qtip metatdata attribute in a renderer, but haven't been able to figure out how to do this in Ext JS 4.1 using tpl and haven't found anything in my searching.
Here's what I have to display the image based on a record value:
var myTemplate = new Ext.XTemplate(
'<tpl if="p > 0">',
'<img src="exclamation.gif" height="16" width="16"/>',
'</tpl>'
);
var schedTree = Ext.create('Ext.tree.Panel', {
...
columns:[
{ header:' ', dataIndex:'p', xtype:'templatecolumn', tpl:myTemplate }
]
}
Has anyone done this or have any suggestions? Is there a better way to do this? Thanks
This isn't a method using XTemplate, but this one works for me:
{
text : 'Zdj',
width: 40,
align : 'center',
dataIndex : 'Name',
sortable : false,
resizable: false,
renderer: function (v, m, r) {
if(r.get('leaf')==true) {
m.tdAttr = 'data-qtip="<img src=services/Images.ashx?id='+r.get('id')+' width=60px height=60px>"';
return '<img src="services/Images.ashx?id='+r.get('id')+'" width="25px" height="25px"/>';
}
}
},
In my example I'm showing a bigger image in tooltip, but there is no problem to show HTML formatted tooltip.
You can add conditions to renderer and in my opinion do more that XTemplate can do.
Your small image should go to return line and tooltip content to m.tdAttr.
You can read more about renderer function here: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-renderer
Hope this helps :)
I'm developing a Sencha Touch application in which I'm doing lots of Ext.extend and creating my own custom components and classes. I'm relatively new to the Sencha Touch realm, and I'm having a bit of a problem trying to use one of my components inside an Ext.XTemplate. Here's a concept of what I'm trying to do in some code:
MyObj = Ext.extend(Ext.Panel, {
cls: 'myClass',
layout: 'card',
scroll: 'vertical',
monitorOrientation: true,
config: myConfigObject.localObjectType,
loc: 'en_US',
initComponent: function() {
// some random init code here…
// Including:
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="Available === true"><div class="itemAvail"></tpl>',
'<tpl if="Available !== true"><div class="itemNotAvail"></tpl>',
'<div class="formText">',
// INSERT MY VIDEO COMPONENT HERE…
'</div>',
'</div>',
'</tpl>',
{ compiled : true }
);
},
// Object definition continues, but I don't think it's germane to this discussion…
});
Ext.reg('videoList', MyApp.views.VideoList);
And now the semi-code for my Video Component that I need included above:
MyVideoComponent = Ext.extend(Ext.Panel, {
programID: null,
chapterID: null,
video: null,
videoPlayer: null,
initComponent: function() {
var progID = this.programID;
var chapID = this.chapterID;
// Set up the video object based on progID and chapID
this.videoPlayer = new Ext.Video({
id: "videoPlayer",
url: video.URL,
posterURL: video.posterURL,
fullscreen: true,
autoResume: true,
// configure listeners for play/end/error
});
// Call superclass.initComponent()
},
// Create listener callbacks for onPlay, onEnded, onError…
});
Ext.reg('videoComponent', MyApp.components.VideoComponent);
Does anyone have any ideas on how I can accomplish this?
Thanks!
[Sencha Person] Our template language currently is a bit restrictive. Once you drop into HTML for an item renderer, you cannot get back to the component level. You can achieve the desired result by extending panel as a custom component that iterates through a data list and creates and adds the items to the DOM.
We'd like to make our templating much more flexible so you can accomplish what you're looking to do more easily, but at least in Touch 1.0, it's not a basic task.
Since the code you presented is quite conceptual, I can only provide a general direction to possible solutions:
I would try to break down the content in the page into multiple components and organize them (including the video component) with the layout system provided by Sencha Touch.
When using Extjs/Sencha Touch, the "proper" way to think of views is not to write them in html, but to construct them with components in the library as much as possible.