PDA

View Full Version : [CLOSED] PagingToolbar plugin ownerCt



softmachine2011
Jun 14, 2012, 1:40 PM
Hi,

In Ext.NET v1.3 I had a plugin that could be used like this inside a GridPanel or TreePanel



<BottomBar>
<ext:PagingToolbar ID="GruposCalendariosPager" runat="server">
<Plugins>
<SoftMachine:IndexServerPagingToolbar runat="server" />
</Plugins>
</ext:PagingToolbar>
</BottomBar>


And this is my plugin code (example):


Ext.namespace('Ext.ux.netbox');

Ext.ux.netbox.IndexServerPagingToolbar = function (config) {
//Nothing
};

Ext.ux.netbox.IndexServerPagingToolbar.prototype = {
//Instancia del control PagingToolbar
controlPagingToolbar: null,

init: function (control) {
if (control.ownerCt.xtype == "netgrid") {
//Some Code
}
}
};
Ext.ux.IndexServerPagingToolbar = Ext.ux.netbox.IndexServerPagingToolbar;


But control.ownerCt is undefined right now. How can I obtain ownerCt to access xtype and other properties?

Daniil
Jun 14, 2012, 2:04 PM
Hi,

It has been changed due to the changes in the widget life cycle. Now its plugins are initialized before it has the ownerCt reference.

The ownerCt appears when a widget is added to the container. So, I can suggest to use the widget Added listener to initialize the plugin.

Example

<ext:PagingToolbar runat="server">
<Listeners>
<Added Handler="new Ext.ux.netbox.IndexServerPagingToolbar().init(this );" />
</Listeners>
</ext:PagingToolbar>

Also, please note that we didn't create a separate class for GridPanel in v2, so, this

control.ownerCt.xtype
will be "gridpanel" for <ext:GridPanel> as for a common ExtJS grid.

softmachine2011
Jun 14, 2012, 2:41 PM
With this workaround plugin will be initialized two times right?
And to difference it ownerCt is present in added event, right?

Daniil
Jun 14, 2012, 3:09 PM
With this workaround plugin will be initialized two times right?

Well, yes, if you will leave Plugins section. But you should remove it in the case when you initialize the plugin within the Added listener.


And to difference it ownerCt is present in added event, right?

Yes, you can access ownerCt within the Added listener.

Even mode, the container is passed as an argument.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-event-added

softmachine2011
Jun 15, 2012, 7:32 AM
Well, removing plugins section Ext.ux.netbox.IndexServerPagingToolbar doesn't exists. How I have to add it? Like a regular JS in a centralized master page or there is another way to load it for plugins?

Vladimir
Jun 15, 2012, 9:12 AM
I would recommend to check ownerCt in js and if it empty then listen 'added' event

Something like this (did not test it)


init: function (control) {
if (!control.ownerCt) { control.on("added", this.init, this, {single:true});
return;
}


if (control.ownerCt.xtype == "grid") {

}
}

Daniil
Jun 15, 2012, 9:18 AM
Agree, it would be more consistent.


Well, removing plugins section Ext.ux.netbox.IndexServerPagingToolbar doesn't exists. How I have to add it? Like a regular JS in a centralized master page or there is another way to load it for plugins?

Yes, just a common JavaScript file.

Or you even could implement a custom control, here is the example.
http://forums.ext.net/showthread.php?14864&p=63023&viewfull=1#post63023

softmachine2011
Jun 15, 2012, 9:31 AM
The problem is that I have server side code for the control since original version (ext.net v1.3) but removing plugin section, it doesn't initialize the assembly information or maybe it is done after added event. I don't know

here's my plugin code


using System.ComponentModel;
using System.Collections.Generic;
using System.Web.UI;
using System.Xml.Serialization;
using Newtonsoft.Json;

[assembly: WebResource("Softmachine.Millenium.Presentation.Web.MVC.Client. Resources.js.WebControls.IndexServerPagingToolbar. js", "text/javascript")]

namespace Ext.Net
{
[ToolboxItem(true)]
[ToolboxData("<{0}:IndexServerPagingToolbar runat=\"server\" />")]
[Description("IndexServerPagingToolbar plugin used for index pagination in server-side")]
public class IndexServerPagingToolbar : Plugin
{
/// <summary>
///
/// </summary>
[Description("")]
protected override List<ResourceItem> Resources
{
get
{
List<ResourceItem> baseList = base.Resources;

baseList.Capacity += 1;

ClientScriptItem _csi = new ClientScriptItem(
this.GetType(),
"Softmachine.Millenium.Presentation.Web.MVC.Client. Resources.js.WebControls.IndexServerPagingToolbar. js",
"/ux/plugins/indexserverpagingtoolbar/indexserverpagingtoolbar.js");

baseList.Add(_csi);

return baseList;
}
}

/// <summary>
///
/// </summary>
[Category("0. About")]
[Description("")]
public override string InstanceOf
{
get
{
return "Ext.ux.netbox.IndexServerPagingToolbar";
}
}

/// <summary>
///
/// </summary>
[Browsable(false)]
[EditorBrowsable(EditorBrowsableState.Never)]
[DesignerSerializationVisibility(DesignerSerializat ionVisibility.Hidden)]
[XmlIgnore]
[JsonIgnore]
public override ConfigOptionsCollection ConfigOptions
{
get
{
ConfigOptionsCollection list = base.ConfigOptions;

return list;
}
}
}
}

Any idea?

Daniil
Jun 15, 2012, 9:39 AM
Can you see a resource request? What is its URL and response?

softmachine2011
Jun 15, 2012, 9:44 AM
Can you see a resource request? What is its URL and response?

No, with developer tools of IE9 in network there isn't any request to this JS, but with plugin section the request is done correctly.

Daniil
Jun 15, 2012, 11:26 AM
Are there any 404 requests?

The following works on my side.

CustomPlugin.cs

using System.Collections.Generic;
using Ext.Net;

namespace Work2
{
public class CustomPlugin : Plugin
{
public override string InstanceOf
{
get
{
return "Ext.ux.CustomPlugin";
}
}

protected override List<ResourceItem> Resources
{
get
{
List<ResourceItem> baseList = base.Resources;

baseList.Capacity += 1;

ClientScriptItem _csi = new ClientScriptItem(
this.GetType(),
"Work2.resources.js.CustomPlugin.js",
"/resources/js/CustomPlugin.js");

baseList.Add(_csi);

return baseList;
}
}
}
}

CustomPlugin.js

Ext.define("Ext.ux.CustomPlugin", {
extend : "Ext.AbstractPlugin",
init : function (c) {
alert("The plugin has been initialized.");
}
});

AssemblyInfo.cs

[assembly: WebResource("Work2.resources.js.CustomPlugin.js", "text/javascript")]

Example Page

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Assembly="Work2" Namespace="Work2" TagPrefix="cc" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Panel runat="server">
<Plugins>
<cc:CustomPlugin runat="server" />
</Plugins>
</ext:Panel>
</form>
</body>
</html>


Also I have marked CustomPlugin.js as "Embedded Resource".

softmachine2011
Jun 15, 2012, 11:30 AM
It works too for me, but remember that we are removing plugins section to add the plugin in added event, because I need ownerCt property.

I paste js code of plugin if you needed



Ext.namespace('Ext.ux.netbox');

Ext.ux.netbox.IndexServerPagingToolbar = function (config) {
//Nothing
};

Ext.ux.netbox.IndexServerPagingToolbar.prototype = {
//Instancia del control PagingToolbar
controlPagingToolbar: null,

init: function (control) {
if (!Ext.isEmpty(control.ownerCt)) {
//Obtenemos la instancia del control
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar = control;

//Modificamos el comportamiento del boton "refresh"
if (control.ownerCt.xtype == "netgrid") {
//GridPanel
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.refresh.onClick = Ext.ux.netbox.IndexServerPagingToolbar.prototype.r efreshFunctionGridPanel;
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.setNavigationVisibility = Ext.ux.netbox.IndexServerPagingToolbar.prototype.s etNavigationVisibility;
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.doLoad = Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ustomDoLoad;
}
else if (control.ownerCt.xtype == "nettreepanel") {
//Ocultamos el input textbox (Los TreePanel no tienen paginacion)
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.inputItem.hide();
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.first.hide();
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.next.hide();
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.prev.hide();
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.last.hide();

//Ocultamos los separadores
for (var i = 0; i < Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.items.items.length - 1; i++) {
if (Ext.ux.netbox.IndexServerPagingToolbar.prototype. controlPagingToolbar.items.items[i].getXType().toString().toLowerCase() == "tbseparator")
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.items.items[i].hide();
}

//TreePanel
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.refresh.onClick = Ext.ux.netbox.IndexServerPagingToolbar.prototype.r efreshFunctionTreePanel;
}
else if (Ext.isEmpty(control.ownerCt.xtype) && control.ownerCt.defaultType == "panel") {
//Panel
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.refresh.onClick = Ext.ux.netbox.IndexServerPagingToolbar.prototype.r efreshFunctionPanel;
}
}
},

//Funcion que refresca el listado de un GridPanel (Invalidacion de cache)
refreshFunctionGridPanel: function (e) {
//Agregamos un parametro base (valor == true)
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.store.setBaseParam('Refresh', true);

//Funcion onClick de Refresh
if (e) {
e.preventDefault();
}
if (e.button !== 0) {
return;
}
if (!this.disabled) {
this.doToggle();
if (this.menu && !this.hasVisibleMenu() && !this.ignoreNextClick) {
this.showMenu();
}
this.fireEvent('click', this, e);
if (this.handler) {

this.handler.call(this.scope || this, this, e);
}
}

//Modificamos el parametro base (valor == false)
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.store.setBaseParam('Refresh', false);
},

refreshFunctionTreePanel: function (e) {
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.ownerCt.loader.baseParams.Refr esh = true;
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.ownerCt.getRootNode().reload() ;
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.ownerCt.loader.baseParams.Refr esh = null;
},

refreshFunctionPanel: function (e) {
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.store.setBaseParam('Refresh', true);
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.store.reload();
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.store.setBaseParam('Refresh', false);
},

customDoLoad: function (start) {
var o = {}, pn = this.getParams();
o[pn.start] = start;
o[pn.limit] = this.pageSize;
if (this.fireEvent('beforechange', this, o) !== false) {
this.store.load({ params: o, callback: function () {
if (!Ext.isEmpty(this.reader.jsonData.hideNavigation) )
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.setNavigationVisibility(this.r eader.jsonData.hideNavigation);
}
});
}
},

setNavigationVisibility: function (isHidden, allowOrderDescending) {
if (isHidden == true) {
for (var i = 0; i < Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.items.items.length; i++) {
switch (Ext.ux.netbox.IndexServerPagingToolbar.prototype. controlPagingToolbar.items.items[i].getXType().toString().toLowerCase()) {
case 'tbbutton':
//Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.items.items[i].setDisabled(false);
break;

case 'tbtext':
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.items.items[i].el.dom.style.visibility = 'hidden';
break;

case 'numberfield':
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.items.items[i].el.dom.style.visibility = 'hidden';
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.items.items[i].setDisabled(true);
break;
}
}
}
else {
for (var i = 0; i < Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.items.items.length; i++) {
switch (Ext.ux.netbox.IndexServerPagingToolbar.prototype. controlPagingToolbar.items.items[i].getXType().toString().toLowerCase()) {
case 'tbbutton':
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.items.items[i].setDisabled(false);
break;

case 'tbtext':
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.items.items[i].el.dom.style.visibility = 'visible';
break;

case 'numberfield':
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.items.items[i].el.dom.style.visibility = 'visible';
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.items.items[i].setDisabled(false);
break;
}
}

var pageData = this.getPageData();

if (pageData.activePage == 1) {
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.first.setDisabled(true);
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.prev.setDisabled(true);
}
if (pageData.activePage == pageData.pages) {
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.next.setDisabled(true);
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.last.setDisabled(true);
}
}

if (Ext.isEmpty(allowOrderDescending))
allowOrderDescending = true;

if (Ext.ux.netbox.IndexServerPagingToolbar.prototype. controlPagingToolbar.ownerCt.view)
Ext.ux.netbox.IndexServerPagingToolbar.prototype.c ontrolPagingToolbar.ownerCt.view.hmenu.getComponen t('desc').setVisible(allowOrderDescending);
}
};

Ext.ux.IndexServerPagingToolbar = Ext.ux.netbox.IndexServerPagingToolbar;

Daniil
Jun 15, 2012, 11:43 AM
It works too for me, but remember that we are removing plugins section to add the plugin in added event, because I need ownerCt property.

If you want the JavaScript file will be registered automatically, you should use that plugin as a custom control within Plugins section.

In that case please follow the Vladimir's recommendation.

I would recommend to check ownerCt in js and if it empty then listen 'added' event

Something like this (did not test it)


init: function (control) {
if (!control.ownerCt) { control.on("added", this.init, this, {single:true});
return;
}


if (control.ownerCt.xtype == "grid") {

}
}

softmachine2011
Jun 15, 2012, 11:47 AM
Ok, I would use Vladimir suggestion.

Thanks for all