How to convert GroupingView to Grouping in extjs 4 - extjs

According to sencha in extjs 4 the remove GroupingView.
GroupingView has been removed and replaced with Grouping feauture.
But I want to change my old code accordingly and missing Listeners:
<ext:GroupingView ID="gridView" HideGroupedColumn="true" ForceFit="true" >
<Listeners>
<Refresh Handler="CheckHeader(#{checkSelectionModel});" />
</Listeners>
<GetRowClass Fn="getRowClass" />
</ext:GroupingView>

I think it should be done this way.
<ext:GridPanel ID="GridPanel1" runat="server" ForceFit="true">
<View>
<ext:GridView runat="server">
<GetRowClass Fn="getRowClass" />
<Listeners>
<Refresh Handler="CheckHeader(#{checkSelectionModel});" />
</Listeners>
</ext:GridView>
</View>
<Features>
<ext:Grouping runat="server" HideGroupedHeader="true" />
</Features>
</ext:GridPanel>

Related

anychart column-3d doesn't correctly display x-axis labels with categorized_by_series=true

I am wondering is anychart column-3d has a way to fix displaying correct x-axis named while categorizing the series.
I have the following xml:
<anychart xmlns="http://anychart.com/schemas/8.0.0/xml-schema.xsd">
<chart type="column-3d" default_series_type="column" y_scale="0" z_angle="30" z_aspect="20" categorized_by_series="true">
<margin top="40">
</margin>
<chart_labels>
<label text="Bericht Gesamt||export.aspx?questionGroupId=38&version=2" anchor="top" position="left" enabled="true">
</label>
<label text="../anychart.aspx?qg=38&version=2" anchor="top" position="left" enabled="true">
</label>
</chart_labels>
<title enabled="true" use_html="true">
<text><![CDATA[Report für ELBI International S.p.A., GT Gerätefertigung (DE), 20200101 - 20210114, Lieferantenqualifizierung<br><div style="color:#0000FF; font-size: 10px;border: solid 1px #000;">Lieferantenqualifizierung, Erfüllung in % : 86,19 (AB)</span>]]></text>
</title>
<y_grids>
<grid>
<palette>
<items>
<item color="#CCC" opacity="0.25"/>
<item color="#FFF"/>
</items>
</palette>
</grid>
</y_grids>
<y_axes>
<axis>
<title use_html="true">
<text><![CDATA[<b>Set axis name here</b>]]></text>
</title>
<minor_ticks enabled="true"/>
</axis>
</y_axes>
<scales>
<scale type="linear" minimum="0" maximum="100">
<ticks interval="10" />
<minor_ticks interval="2" />
</scale>
</scales>
<series_list>
<series name="Qualität">
<tooltip enabled="true">
<format><![CDATA[Erfüllung in %: {%percentReached} ({%rating}) \nPunkte: {%score}]]></format>
<title>Qualität</title>
</tooltip>
<data>
<point value="81.9" percentReached="81,90" actionType="updateChart" sourceMode="externalData" rating="AB" score="40,95" x="1" source="../anychart.aspx?qg=39&version=2">
</point>
</data>
</series>
<series name="Lieferung">
<tooltip enabled="true">
<format><![CDATA[Erfüllung in %: {%percentReached} ({%rating}) \nPunkte: {%score}]]></format>
<title>Lieferung</title>
</tooltip>
<data>
<point value="90.48" percentReached="90,48" actionType="updateChart" sourceMode="externalData" rating="A " score="45,24" x="1" source="../anychart.aspx?qg=41&version=2">
</point>
</data>
</series>
</series_list>
</chart>
In 3d mode it shows x-labels from point's x value directly and looks like this:
But switching back to simple column type fix the issues:
Maybe someone knows a way around to overcome this?
This is the last chart version 8.
So, thanks goes to anychart support.
Unfortunatly, 3d charts doesn't support categorized_by_series attribute, at least for now.
If you need this functionality, you have to used 2d variant only.

Ext net set default panel in tabpanel

I have this code:
<ext:TabPanel ID="*" runat="server">
<Items>
<ext:Panel ID="panel1" runat="server" Title="*" Closable="false">
<Loader ID="*" runat="server" Url="*.aspx" Mode="Frame">
<LoadMask ShowMask="True" />
</Loader>
</ext:Panel>
<ext:Panel ID="panel2" runat="server" Title="*" Closable="false">
<Loader ID="*" runat="server" Url="*.aspx" Mode="Frame">
<LoadMask ShowMask="True" />
</Loader>
</ext:Panel>
<ext:Panel ID="panel3" runat="server" Title="*" Closable="false" Hidden="true">
<Loader ID="Loader" runat="server" Url="*.aspx" Mode="Frame">
<LoadMask ShowMask="True" />
</Loader>
</ext:Panel>
</Items>
</ext:TabPanel>
I need to set the first panel as default panel ( the panel that is shown when the page is loaded )
Just do it like this:
<ext:TabPanel ID="*" ActiveIndex="0" runat="server">

Why I cannot use a checkbox and radiobutton column using filterhead?

I have the next problem, when I use only two columns (one for the names and other for the checkbox or one for the names and other for the radiobutton) everything is fine, but when I use three columns(one for the names, other for the checkbox and the last for the radiobutton) I´ve got the next error in console when I try to write in the filter field.
filterheader.js:46 Uncaught TypeError: field.getValue is not a function
at g.<anonymous> (filterheader.js:46)
at Object.each (ext-all.js:19)
at g.runFiltering (filterheader.js:46)
at g.onFieldChange (filterheader.js:45)
at ext-all.js:19
I dont know what to do, I dont have much practice in ext.net. Before
an apology for my English. I would really appreciate some help.
<ext:GridPanel ID="grdNames" runat="server" Title="Names" HideCollapseTool="false" UI="Primary" HideHeaders="false" Layout="FitLayout" ColumnLines="false" BodyStyle="GridFiltros" Border="false" Region="Center" Frame="false" ForceFit="true" AutoScroll="false" Resizable="false">
<Store>
<ext:Store ID="strOrigen" runat="server">
<Model>
<ext:Model ID="Model25" runat="server">
<Fields>
<ext:ModelField Name="CheckNames" Type="Boolean" DefaultValue="false" />
<ext:ModelField Name="Names" />
</Fields>
</ext:Model>
</Store>
<View>
<ext:GridView ID="GridView6" runat="server" TrackOver="true" StripeRows="true" />
</View>
<ColumnModel ID="ColumnModel15" runat="server">
<Columns>
<ext:ComponentColumn ID="radColumn" runat="server" Width="30" DataIndex="CheckNames" Align="Left">
<Component>
<ext:Radio ID="rdGo" runat="server" Name="vGO">
</ext:Radio>
</Component>
</ext:ComponentColumn>
<ext:CheckColumn ID="CheckColumn" runat="server" DataIndex="CheckNames" Sortable="false" HideTitleEl="true" Width="35"
Resizable="false" StopSelection="false" Editable="true" Filterable="false" Align="Left"
Groupable="false" MenuDisabled="true">
<Items>
<ext:Checkbox runat="server" ID="chkRptGeoO" Checked="false">
<Listeners>
<Change Fn="chkChangeRptGeoO"></Change>
</Listeners>
</ext:Checkbox>
</Items>
</ext:CheckColumn>
<ext:Column ID="NamesColumn" runat="server" HideTitleEl="true" DataIndex="Names" MenuDisabled="true" Width="200" TabMenuHidden="true" />
</Columns>
</ColumnModel>
<Plugins>
<ext:FilterHeader ID="grdNames" runat="server" OnCreateFilterableField="OnCreateFilterableField">
</ext:FilterHeader>
</Plugins>
</ext:GridPanel>
I tried to reproduce your code but couldn't reproduce the issue. Maybe you need to upgrade your Ext.NET version?
Check if this works on your side, I tried reproducing your scenario with the code snippet you provided, but maybe I skipped something?
<%# Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
strOrigen.Data = new List<object>()
{
new { CheckNames = false, Names = "Name 1" },
new { CheckNames = false, Names = "Name 2" },
new { CheckNames = true, Names = "Name 3" },
new { CheckNames = false, Names = "Name 4" }
};
strOrigen.DataBind();
}
}
</script>
<html>
<head runat="server">
<title></title>
</head>
<body>
<form runat="server" id="fm1">
<div>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="grdNames" runat="server" Title="Names">
<Store>
<ext:Store ID="strOrigen" runat="server">
<Model>
<ext:Model ID="Model25" runat="server">
<Fields>
<ext:ModelField Name="CheckNames" Type="Boolean" DefaultValue="false" />
<ext:ModelField Name="Names" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<View>
<ext:GridView ID="GridView6" runat="server" TrackOver="true" StripeRows="true" />
</View>
<ColumnModel ID="ColumnModel15" runat="server">
<Columns>
<ext:ComponentColumn ID="radColumn" Text="radCol" runat="server" Width="30" DataIndex="CheckNames">
<Component>
<ext:Radio ID="rdGo" runat="server" Name="vGO">
</ext:Radio>
</Component>
</ext:ComponentColumn>
<ext:CheckColumn ID="CheckColumn" runat="server" Text="chkCol" Editable="false" Filterable="false" DataIndex="CheckNames" Width="35" MenuDisabled="true">
<Items>
<ext:Checkbox runat="server" ID="chkRptGeoO" Checked="false">
</ext:Checkbox>
</Items>
</ext:CheckColumn>
<ext:Column ID="NamesColumn" runat="server" Text="names" DataIndex="Names" Width="200" />
</Columns>
</ColumnModel>
<Plugins>
<ext:FilterHeader ID="FilterHeader1" runat="server">
</ext:FilterHeader>
</Plugins>
</ext:GridPanel>
</div>
</form>
</body>
</html>
Using Ext.NET 4.2.1 here.

<f:viewAction> included into facelets template client does not work [duplicate]

I have made a lot of progress in converting my JSF applications to book-markable pages, but I am wondering if I am doing it the right way. One question is that is there a best-practice location for the f:metadata tags?
My typical Facelets client page looks like this:
<ui:composition template="./pattern.xhtml">
<ui:define name="content">
<f:metadata>
<f:viewParam name="userId" value="#{bean.userId}" />
<f:viewParam name="startRecord" value="#{bean.startRecord}" />
<f:viewParam name="pageSize" value="#{bean.pageSize}" />
<f:viewParam name="sort" value="#{bean.sort}" />
</f:metadata>
<h1>Data Table</h1>
etc
So the f:metadata and child f:viewParam tags are encountered in the body of my page. My pattern.xhtml template also has a section (named "header") that could put these tags in the header section. Should they be put there? Does it make a difference or am I set up for some side effect I haven't seen yet?
Technically, it doesn't matter where you declare the <f:metadata> in the view as long as it's in the top level view (so, when using templating, in the template client and thus not in the master template). When the view get built, the metadata is basically not part of the JSF component tree, but of the view root (which you can obtain on a per-view basis by ViewDeclarationLanguage#getViewMetadata()).
Most self-documenting would be to put the <f:metadata> in the top of the view, so that you can see any metadata at first glance without the need to scroll to halfway or bottom the view source code.
When using a plain page, just put it right before the <h:head>.
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<f:metadata>
<f:viewParam name="userId" value="#{bean.userId}" />
<f:viewParam name="startRecord" value="#{bean.startRecord}" />
<f:viewParam name="pageSize" value="#{bean.pageSize}" />
<f:viewParam name="sort" value="#{bean.sort}" />
</f:metadata>
<h:head>
...
</h:head>
<h:body>
...
</h:body>
</html>
When using templating, the recommended approach, as stated in the <f:metadata> tag documentation, would be to declare a separate <ui:insert name="metadata"> in the master template and let the client define the <f:metadata> in an <ui:define name="metadata">.
<ui:composition template="/WEB-INF/pattern.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<ui:define name="metadata">
<f:metadata>
<f:viewParam name="userId" value="#{bean.userId}" />
<f:viewParam name="startRecord" value="#{bean.startRecord}" />
<f:viewParam name="pageSize" value="#{bean.pageSize}" />
<f:viewParam name="sort" value="#{bean.sort}" />
</f:metadata>
</ui:define>
<ui:define name="content">
<h1>Data Table</h1>
...
</ui:define>
</ui:composition>

Richface popup not working in GAE

Base on example from richface showcase:
http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=popup&sample=simplePopup&skin=blueSky
When I call the popup using #{rich:component, nothing happen (ie. no popup):
<a4j:commandLink styleClass="no-decor" execute="#this"
oncomplete="#{rich:component('popup')}.show()">
However when I change to using rich:componentControl, popup appear
<a4j:commandLink styleClass="no-decor" execute="#this">
<rich:componentControl target="popup" operation="show" />
Note: Both work find from GAE when I run from my local notebook but problem happen when I deploy to GAE online (http://cloudenterpriseapps.appspot.com/public/test/testPopup.jsf)
Any help?
Just solved by adding
<a4j:status onstart="#{rich:component('statPane')}.show()"
onstop="#{rich:component('statPane')}.hide()" />
...
<rich:popupPanel id="statPane" autosized="true">
<h:graphicImage value="/images/common/ai.gif" alt="ai" />
Please wait...
</rich:popupPanel>
Here the complete code and now work fine.
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<ui:composition>
<h:head>
<title>RichFaces Showcase</title>
</h:head>
<h:body>
<a4j:status onstart="#{rich:component('statPane')}.show()"
onstop="#{rich:component('statPane')}.hide()" />
<a4j:commandLink styleClass="no-decor" execute="#this" render="#none"
action="#{dummyBean.methodCall}"
oncomplete="#{rich:component('popup')}.show()">
<h:graphicImage value="/images/icons/common/edit.gif" alt="edit" />
</a4j:commandLink>
<h:form id="myform">
<rich:popupPanel id="popup" modal="false" autosized="true"
resizeable="false">
<f:facet name="header">
<h:outputText value="Simple popup panel" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('popup')}.hide(); return false;">
X
</h:outputLink>
</f:facet>
<p>Any content might be inside this panel.</p>
<p>
The popup panel is open and closed from the javascript function of
component client side object. The following code <a href="#"
onclick="#{rich:component('popup')}.hide()">hide this panel</a>:
<f:verbatim>#</f:verbatim>
{rich:component('popup')}.hide()
</p>
<a4j:commandButton value="Close" styleClass="no-decor"
execute="#this" render="#none" action="#{dummyBean.methodCall2}"
oncomplete="#{rich:component('popup')}.hide()"/>
<br />
</rich:popupPanel>
</h:form>
<rich:popupPanel id="statPane" autosized="true">
<h:graphicImage value="/images/common/ai.gif" alt="ai" />
Please wait...
</rich:popupPanel>
</h:body>
</ui:composition>
</html>

Resources