I checked out g.Raphael for creating simple charts. I managed to display them on a demo website, but I don't know how I can integrate them into my Sencha Touch 2 app now. I managed integrating it by using an iframe but this is not dynamic and performance lacks a bit too.
Can somebody please help or show me a tutorial?? Need help quickly.
Thanks!
Sorry had some code formatting issues ^^
Can you please point me into a direction? Do I have to put this into my view or a controller? I've included the Raphael files in my index.html for the ST2 app.
Heres my View:
Ext.define('Demo.view.Configurator', {
extend: 'Ext.carousel.Carousel',
xtype: 'configurator',
requires: [
'Demo.store.SampleStore'
],
config: {
title: 'Konfigurator',
iconCls: 'home',
direction: 'horizontal',
directionLock: true,
//Will be applied to every object in the array by default
defaults: {
styleHtmlContent: true,
cls: 'configurator-item',
scrollable: true,
},
items: [
{}
]
}
}
)
Thanks
What's preventing you from using both in the same page? Just include the Raphael's files, and you can use it to draw in Ext components.
For example:
var win = Ext.widget('window', {width: 600, height: 600, autoShow: true}),
r = Raphael(win.body.id);
r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2]);
Jeees, I finally found it here - works perfectly:
Link
Related
I want to send value from one view to another one, I have a code that's work in ExtJS 6 but not in ExtJS 4.
This is from the first one:
var test = Ext.create('test.text', {
delayedRenderTo: container_id,
id: 'messageBox-' + meta.rowIndex,
viewModel: {
data: {
value: value
}
}
});
and we bind it like this:
Ext.define('test.text', {
extend: 'Ext.Panel',
layout: {
type: 'vbox',
align: 'stretch',
overflow: 'scroller',
},
items: [{
xtype: 'textareafield',
grow: true,
growMin: 30,
growMax: 120,
disabled: true,
fullscreen: true,
bind: {
value: '{value}',
},
fieldStyle: 'font-weight:bold;'
}]
});
What is the alternative for ExtJS 4 ?
ViewModels were introduced in Ext JS 5 which is why it doesn't work in Ext JS 4.
To do it in Ext JS 4, you'd have to find the component (the textareafield in this case) and then execute the setter (setValue for this example). It's all manual in Ext JS 4.
Getting the component depends on many things but the best way is to use ComponentQuery and depends where the code executing this would be. First, you'd have to get your test.text instance and then use comp.child('textareafield'). I cannot give you a silver bullet example as it depends on many factors but using component's down, child, query, up methods a good start and they all have different purposes.
Så i have noticed a very annoying bug in Sencha Touch. When i try to add the paging plugin to my dataview the "load more" text is placed above the items, not below like i want it to. It works with the standard listview.
I found another thread asking me to add "inifinte:true" to my dataview, but that did not help. Nor did "bottom:0" or "docked:'bottom'" options. Here is my code:
{
xtype: 'dataview',
plugins: {
type: 'listpaging',
loadMoreText: 'Indlæs flere..',
autoPaging: true
},
flex: 1,
cls: 'inspectionImages',
itemId: 'imageContainer',
padding: 10,
style: 'background: #F7F7F7; color: black',
emptyText: 'Der er ingen billeder på synet.',
itemTpl: ['...'],
loadingText: 'Henter billeder..',
store: 'Images'
}
Also here is an example sencha fiddle code - framework is 2.4.x:
Ext.application({
launch: function () {
var touchTeam = Ext.create('Ext.DataView', {
fullscreen: true,
plugins: {
type: 'listpaging',
loadMoreText: 'Indlæs flere..',
autoPaging: true
},
store: {
fields: ['name', 'age'],
data: [{
name: 'Jamie',
age: 100
}, {
name: 'Rob',
age: 21
}, {
name: 'Tommy',
age: 24
}, {
name: 'Jacky',
age: 24
}, {
name: 'Ed',
age: 26
}]
},
itemTpl: '<div>{name} is {age} years old</div>'
});
touchTeam.getStore().add({
name: 'Abe Elias',
age: 33
});
touchTeam.getStore().getAt(0).set('age', 42);
} // launch
}); // application()
I have checked with the Ext.dataview.dataview in the sencha touch documentation, and this shows similar behaviour when adding the paging plugin so i know that this is probably not my own fault. I really would like the loadinText to be placed in the bottom of the dataview. Any suggestions would highly be appreciated!
The List Paging Plugin is Developed for Lists.
If you are using it for the DataView then The Load more Text Will appear at the Top.
I have faced the same Problem.I have Gone Through the List paging Plugin Js.
Then Got Solution By just Changing the Css Property..
Inspect the "loading-spinner" CLass and change the Style to: style="font-size: 180%; margin: 10px auto;position:absolute; bottom: 0px; left: 50%
and Inspect the Class -"list-paging-msg" And change the style to style="position:absolute; bottom: 0px; left: 50%;"
This is a bug in Sencha Touch. Mitchell Simoens has told here that it is meant for List only but I believe this should also support the dataview as it is light compared to list.
In sencha forum solutions , you can see they have changed the xtype from dataview to list. I also had same problem and I did the same. But you can do some addition if you want the look and feel of dataview instead of list.
disableSelection: true,
pressedCls: '',
I hope this helps you. Let me know if you need anything else.
I have found the solution after gone through the code of List paging Plugin, Ext.dataview.DataView and Ext.dataview.List.
Initialize list paging plugin after dataview initialized, then the "load more component" position will be right.
Ext.define('MyDataView', {
extend: 'Ext.dataview.DataView',
config: {
/* do not set here
plugins: [{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true
}, {
xclass: 'Ext.plugin.PullRefresh'
}]
*/
},
initialize: function() {
var me = this;
me.callParent();
// Initialize plugin here, so the listpaging component will append after dataview container
me.setPlugins([{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true
}, {
xclass: 'Ext.plugin.PullRefresh'
}]);
}
}
As it turns out the pagingplugin were not meant for Dataview. It can be used though. In the end i ended up just manually moving the "load more" text in the DOM at the end of each load of the plugin. To ensure no listeners were lost i used the appendchild JS function and applying some custom css. Now everything works as expected.
I have an application in ExtJS that uses a JWplayer for reproduce some videos. But i'm experiencing some weird bugs.
When the page loads it seems that the JWPlayer won't load and then I receive a black line where the player should be displayed.
I am loading the jwplayer inside a extjs panel.
Has anyone experienced this? Is there a way to solve that?
I have created a draggable floating panel with an instance of JW Player inside and it works just find.
Check it out, maybe you are doing something wrong there.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel',{
title: 'Testing JW Player',
width: 480,
height: 300,
floating: true,
draggable: true,
layout: 'fit',
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
id: 'testing'
}],
listeners: {
afterrender : function(component) {
jwplayer('testing').setup({
file: "http://videos-jp.jwpsrv.com/zWLy8Jer/videos/HkauGhRi-1753142.mp4?77c801d752d5207784c49e7ed80fb953798fae0fcca03ecf79558491aa7db70fc9392eb19e958e847c3e486d709eab9f57d25c86934c4b6091bc427de8ab078578054aaba8384904c4762bd67442c3809470687047",
image: "http://demo.jwplayer.com/homepage/homepage_preroll.jpg"
});
}
}
});
}
});
You can access my fiddle here: https://fiddle.sencha.com/#fiddle/blb
JWPlayer is a nice library by the way, this was the first time I saw it, nice work.
For those whom may have the same issue that I had.
I was placing the player in a panel but I didn't set the height of the component. Since the player takes a while to load I guess that the Extjs just see it as a common div with no size.
I try to create treepicker but i can't done with that http://jsfiddle.net/UKFVd/
Here is my code
var Panel = Ext.create('Ext.panel.Panel', {
bodyPadding: 5,
width: 300,
height: 100,
title: 'Filters',
items: [ {
xtype: 'treepicker',
name: 'list_id',
fieldLabel: 'Task List',
labelWidth: 60,
displayField: 'text',
store: store
}],
renderTo: Ext.getBody()
});
i check error is TypeError: k is undefined How to working with treepicker thanks
You need to include:
Ext.ux.TreePicker
if you have not.
The code in the fiddle you posted is perfectly fine, however, on the left side under External Resources, add the full URL path to TreePicker.js, and try again, and it will work.
Here is a working fiddle rev: http://jsfiddle.net/UKFVd/6/
Tree picker is not an out of box component that ships with extjs, you have to add it to your web page as an additional resource.
here is a page showing examples:
http://extjs.dariofilkovic.com/
here is my tab's code containing the pie chart
{
xtype: 'container',
title: 'Chart',
iconCls: 'chart',
itemId: 'chart_Tab',
layout: {
type: 'fit'
},
items: [
{
xtype: 'polar',
autoDestroy: false,
colors: [
'#115fa6',
'#94ae0a',
'#a61120',
'#ff8809',
'#ffd13e',
'#a61187',
'#24ad9a',
'#7c7474',
'#a66111'
],
store: 'elementstore',
series: [
{
type: 'pie',
xField: 'numValue'
}
],
interactions: [
{
type: 'rotate'
}
]
}
]
},
Problem is, it does show anything, but does not crash either...
I checked my store is full of model to display.
Here is the output of this chart... All there is is the ''gpl sencha generated label'' no chart at all... so im guessing something is wrong but I cant put my finger on it, + there is absolutly NO working exemple of that from the sencha team...
Still not working would someone has anny idea on why?
Try changing
store: 'elementstore',
To
`store: elementstore,`,
Charts files are not included with the free version of Sencha Touch, nor in the trial version.
If you run it in a local sever (app.html) and not index.html, you won't see anything.