About me
I was born in Hong Kong, first half of my education was in HK and the other half in UK. Got my B.Sc & Ph.D in Multimedia at Southampton University. Since then I have worked for various size of companies from mega to a handful of employees. Currently, I am working for iTrinegy in the UK, been on various networking projects but for the last 7 years I have been responsible for implementing the web front ends of the entire company products range.
18 Comments
Post a comment
Hi Joe (Joseph) Kuan i am new to word press can you help me to learn WP?
I like to work with you
i am himanshu patel form India
WP shouldn’t require much learning curve. What would you like to learn from WP?
Joe
http://joekuan.wordpress.com/2011/03/22/changing-columns-editor-dynamically-in-extjs-roweditor/
I’m using your code in this area of my RowEditor code
editor.on({
scope : this,
beforeedit : function(grid, rowIndex, colIndex) {
your code here……
When I’m in edit mode in the RowEditor everything works perfectly. When I update and go back to my grid, the rows aren’t the right xtype. For instance a date I return gives me the whole time date stamp … I guess because it’s in a text field.
How or where should I place your code so that I can change my grid row types as well as my RowEditor types?
Thanks in advance.
Mike
First of all, you need to have one column with combobox type which has a selection of data type for the target column to edit with.
So, on the ‘select’ event handler of this combobox, you put in the code to change the editor of the column
select: function(combo, record, index) {
var cm = Ext.getCmp(‘color_editor’).getColumnModel();
var valCol = cm.getColumnAt(3);
var change = false;
….
As for datetime field updating the column, I think you can either specify the column renderer handler or ‘afteredit’ event handler to format the value.
Hi Joe,
Would you be interested inauthoring a book on “Learning Highcharts” for Packt Publishing?
Please mail me at kartikeyp@packtpub.com for more details. Thanks.
Hi Joe,
I would like to know abuot your updating version of HighCharts Gauge for EXTJS 4.
I am looking forward to hearing from you.
Regards,
Highcharts 3.0 will have a lot of new type of charts including stunning gauge chart and I will update my extension for it.
Good tips about enabling mouse events on iPad for ExtJS. I am wondering if you ever played with the Ext.Slider control, which doesn’t work with iPad either. I tried adding touchHandler, but that didn’t seem to work, and I was hoping you might have a recommendation on where to look to try to make it work. My google efforts turned up little but this site: http://xantus.tumblr.com/page/2 and he hasn’t posted any code.
Hi Joe, I started using your Highcharts Sencha adapter in a small project. It works fine as long using one single ExtJS store.
For this I have the following questions:
1. Can I use multiple stores and define per serie what store to use?
2. When loading a store, I tried to figure out how I can assgin an Y value to a specific value on the X axis. Although trying to use “xField” I never managed, data from the serie always gets assigned to the [0] index on the x Axis
3. As well I tried to setup x Axis wit a range from -20 to +30. Again I was not able to assign data starting by -20
4. I would like to mix lines and scatter in one chart. I think this will only be feasible by using multpil stores since the data is too different…?
It’s not a secret, so you may check the details in the website link of this post.
Thank’s a lot for your help,
Frank
Sorry, extremely busy right now. I will try to give u some answers in the weekend
Sure, any help is welcome!
The following is a pure Highcharts sample what I am trying like to achieve:
http://www.hasensprung.org/myETA/chart.html
The following what I have right now:
http://www.hasensprung.org/myETA/app.html
Best,
Frank
1. No, current the extension doesn’t support multiple stores. Partly, I don’t get many feature requests on this issue. If you really have to use multiple stores, then I suggest you use addSeries with ‘data’ option that are extracted from those store.on(‘load’). Assume you have a refresh button, then you reload all those stores together and call the internal chart API functions setData.
2. Sorry, I don’t really follow this. I think you need to point me to particular section of your code and guide me through your online demo.
3. x axis range should be configured via Highcharts configuration section.
4. Yes, you can mix lines and scatter in one chart and I don’t see any problem doing that with the extension. What do you mean by ‘too different’? The data model/definition or the value range?
PS: Email me via kuan.joe@gmail.com, as this may require quite a few exchanges.
Thanks
Joe
Joe,
Your extension + highcharts is the only combination I found that allows me to generate charts in ExtJS while dynamically adding series. I have undefined numbers of series which represent data spread over period of time (one of the fields represent date)
Using addSeries() I can compare these series dynamically! But what should I do with x values (date in my case)? Can I control X-values during series generation or is there other workaround?
Tried to make fake store – to bind the chart to. Store has only one field – Time. But it breaks the chart.
Any clue is greatly appreciated!
Thanks,
Roman
The extension allows you to add dynamic series without binding to a store
You can try to use addSeries as follows:
addSeries([{
type: 'spline',
data: [ [ x1, y1 ], [ x2, y2 ], [ x3, y3 ], …. ]
}]);
Thanks
Joe
even if x1,x2,x3,.. are dataType;’date’ ?
tried passing
1. [date,value] (Highcharts doesn’t see the date – x marks are from 0 to…number of values)
2. ["time":date,"value":value] with specifying xField:’time”
3. for 1st series created in memory store to use bindStore and then load the rest series using addSeries
none worked :-(
Highcharts supports numerical x-axis and other options for formatting date time values, such as formatter and dateTimeLabelFormats. The online demo ‘Line Shift – numerical x-axis’ illustrates how to format numerical x-axis values.
xAxis : {
type: ‘datetime’,
title : {
text : ‘Time’
}
}
yep, it worked :)
no-store binding, populating series with pairs of {x:value, y:date} and setting
xAxis : {
type: ‘datetime’,
….
Thank you!