PDA

View Full Version : Add plugin



wemerson.januario
7 Jul 2010, 5:16 AM
Hello. How do i add plugin in the last version. I saw that now there is an plugin option thar receive an [array ...].
For examples, how can I add a new Ext.ux.ProgressBarPager() as a plugin for my pagingtoolbar. When I add this new Ext.ux.ProgressBarPager() the generated code is between " " like
" new Ext.ux.ProgressBarPager() "
Thanks.

jarrednicholls
7 Jul 2010, 5:51 AM
Hi Wemerson,

I'll answer here, which will also answer your question in regards to the plugins for the grid. The plugins array will try to evaluate the object you type in, but if it doesn't evaluate then it will turn it into a string. The plugins configuration option can be used by specifying the "ptype" of the plugin. However, there is a bug currently that will break the rendering of the component when plugins are supplied that do not actually exist. This option is geared towards when we allow importing custom UX plugins, and was released too early. It will be removed temporarily in the next hot fix release, so you can ignore it for now.

For more information on ptypes and how to register a plugin ptype, see http://www.sencha.com/deploy/dev/docs/?class=Ext.ComponentMgr&member=registerPlugin Ext.ComponentMgr.registerPlugin is aliased by Ext.preg (analogous to how Ext.ComponentMgr.register is aliased by Ext.reg).

Example:


Ext.preg('ux-progressbarpager', Ext.ux.ProgressBarPager);


You would include the plugin and register it in your own project javascript files.

In the meantime though, you can add a plugin in the following fashion:



MyContainer = Ext.extend(MyContainerUi, {
initComponent: function(){
MyContainer.superclass.initComponent.call(this);

this.grid.plugins = [
// via constructor...
this.grid.initPlugin(new Ext.ux.ProgressBarPager({...})),

// or via a registered ptype
this.grid.initPlugin('ux-progressbarpager'),

// or via a registered ptype json configuration
this.grid.initPlugin({
ptype: 'ux-progressbarpager',
configOption1: 'blah',
configOption2: 'blah'
})
];
}
});

wemerson.januario
7 Jul 2010, 6:00 AM
Ok, Thanks Jarred. I will wait for the hot fix release. Do you kow When +/- ?

jarrednicholls
7 Jul 2010, 6:19 AM
Within 24 hours from now, for sure. The file will be named xds-1.0.2.1.ion incase you have upgrade problems again.

wemerson.januario
7 Jul 2010, 6:42 AM
Hi Wemerson,

I'll answer here, which will also answer your question in regards to the plugins for the grid. The plugins array will try to evaluate the object you type in, but if it doesn't evaluate then it will turn it into a string. The plugins configuration option can be used by specifying the "ptype" of the plugin. However, there is a bug currently that will break the rendering of the component when plugins are supplied that do not actually exist. This option is geared towards when we allow importing custom UX plugins, and was released too early. It will be removed temporarily in the next hot fix release, so you can ignore it for now.

For more information on ptypes and how to register a plugin ptype, see http://www.sencha.com/deploy/dev/docs/?class=Ext.ComponentMgr&member=registerPlugin Ext.ComponentMgr.registerPlugin is aliased by Ext.preg (analogous to how Ext.ComponentMgr.register is aliased by Ext.reg).

Example:


Ext.preg('ux-progressbarpager', Ext.ux.ProgressBarPager);


You would include the plugin and register it in your own project javascript files.

In the meantime though, you can add a plugin in the following fashion:



MyContainer = Ext.extend(MyContainerUi, {
initComponent: function(){
MyContainer.superclass.initComponent.call(this);

this.grid.plugins = [
// via constructor...
this.grid.initPlugin(new Ext.ux.ProgressBarPager({...})),

// or via a registered ptype
this.grid.initPlugin('ux-progressbarpager'),

// or via a registered ptype json configuration
this.grid.initPlugin({
ptype: 'ux-progressbarpager',
configOption1: 'blah',
configOption2: 'blah'
})
];
}
});


Thanks Jarred a lot. now I can init Plugins using best practices.
I have never seen this initPlugin() function. hehehehe
I am searching in docs its source, but I can not find it.

jarrednicholls
7 Jul 2010, 6:49 AM
It is actually a private function that is called by Ext.Component.initComponent if "plugins" is supplied in the configuration. Since the "ref" is not available until after the superclass' initComponent is called and plugins are initialized in initComponent, you are basically initializing them manually by calling the Ext.Component.initPlugin function. It is a chicken and egg problem...before initComponent, the "ref" is not available...after initComponent, plugin initialization already executed :-)

wemerson.januario
7 Jul 2010, 6:51 AM
Niceeeeeeeeeeeee

abarash
12 Jul 2010, 9:58 AM
Jarred,

Thank you for the solution and the code example - I was stuck on adding a plugin (ux.grid.GridFilters) to the grid, and this helped me solve it.

Thanks!

micheus
12 Jul 2010, 1:58 PM
How do i add plugin in the last version. I saw that now there is an plugin option thar receive an [array ...].Where I can find it?
I would like to add some components from ext-3.2.1\examples\ux folder, like SearchField i saw in examples/form/custom.html file.

Tks

tomdchi
26 May 2011, 5:03 PM
How is the Group Summary plugin supposed to be used? I have this in the Ui file for each column I want totaled:



{
xtype: 'numbercolumn',
header: 'Credit Amt',
dataIndex: 'credit_amount',
sortable: true,
width: 80,
summaryType: 'sum',
renderer : function(v) {
return v;
},
editor: {
xtype: 'numberfield'
}
},


And in the js file I have



RPS.ClientTax.ViewTaxData = Ext.extend(RPS.ClientTax.ViewTaxDataUi, {
initComponent: function() {
RPS.ClientTax.ViewTaxData.superclass.initComponent.call(this);
this.plugins=[this.initPlugin(new Ext.ux.grid.GroupSummary())];
this.selModel = new Ext.grid.RowSelectionModel({
});
this.view = new Ext.grid.GroupingView({
startCollapsed: true,
showGroupName: true,
enableNoGroups: false,
enableGroupingMenu: true,
hideGroupedColumn: true,
getRowClass : function (record, index) {
if (!record) {
return '';
}
if (record.data.is_closed) {
return 'grey-row';
}
else {
return 'yellow-row';
}
},
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length >1 ? "Returns" : "Return"]})'
});

this.on('afteredit', this.onEditCell, this);
this.on('beforeedit', this.onEditRow, this);
},


The row below each summary does change color to grey as specified in the CSS but nothing else appears.

wemerson.januario
26 May 2011, 5:16 PM
you can apply config options using Ext.apply();

i.e.



Ext.apply(yourColumnModel.findColumById('idhere'),{
summaryType: 'sum',
you can add config option here.

})

tomdchi
26 May 2011, 9:51 PM
Thank You!! It is displaying data but something is still wrong. For some reason the plugin thinks all my values are strings and instead of adding them together it is concatenating them into one huge string. Anyway thanks for the help.

I used this in the js file:


Ext.apply(this.getColumnModel().getColumnById('begbalamt'), {
summaryType: 'sum',
renderer : function(v) {
return v;
}
});

wemerson.januario
27 May 2011, 4:21 AM
how you are initializing the plugin on the grid?

tomdchi
27 May 2011, 7:37 AM
I am doing it like this


RPS.ClientTax.ViewTaxData = Ext.extend(RPS.ClientTax.ViewTaxDataUi, {
initComponent: function() {
RPS.ClientTax.ViewTaxData.superclass.initComponent.call(this);
this.plugins = [this.initPlugin(new Ext.ux.grid.GroupSummary())];
Ext.apply(this.getColumnModel().getColumnById('begbalamt'), {
summaryType: 'sum',
SummaryRenderer: function(v, params, data){
return Ext.util.Format.number(v, '0,0.00');
}
});

I think the problem may lie with how my data is being sent to the application. PHP's json_encode is sending it with the values enclosed in double quotes so I think they are being interpreted as strings. I fixed this by modifying the group summary plugin. It does no checking on the var type so I changed the calculation function for sum to


Ext.ux.grid.GroupSummary.Calculations = {
'sum' : function(v, record, field){
return v + Ext.num(record.data[field], 0);
},


Now my only problem deals with addition of negative numbers. One of my columns has these values (as logged to the console)



0
6.59
0
0
1.24
0
52.86
0
0
0
0
0
57.93
0
29.4
0
38.47
0
102.57
0
102.57
0
5.5
0
0
0
0
0
45.56
0
32.54
0
0
0
0
0
0.98
0
0
0
0.33
0
81.78
0
0
0
0
0
-6861.18
0
0
85.53
0.66
0
3.53
0
4.03
0
0
0
2.14
0
0.27
0
-4.76
0
0
21.6
-40.63
0
0
14674
-577.42
0
-2580.03
0
-1996.98
0
41
0
0
0
1.02
0
0
0
-623.77
0
0.66
0
0
0
29.4
0
17.77
0
0
0
0
0
0
0
0
0
-5080.76
0
0
0
0
6661.19
0
1535.99
0
2
326.78
0
0
1622
0
0
-4618.26
0
0
0
-87.99
0
0
0
0
0
23.51
0
0
0
0
0
0.76
0
-2823.26
0
0
0
0
0



No matter what I try to do, the result of the above values is displayed as -24291.780000000006


Any idea how to fix that??

tomdchi
27 May 2011, 1:27 PM
got it fixed. xtype of column was set to gridcolumn and not numbercolumn. All is working great now!

feiq
22 Nov 2011, 6:18 PM
Jarred,

Thank you for the solution and the code example - I was stuck on adding a plugin (ux.grid.GridFilters) to the grid, and this helped me solve it.

Thanks!

How did you solve the problem?