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">
Related
Hello, I have built this carousel and we want to add a hover effect
onto the button. Each button is simply a div with a class of
"slick-slide" or "slick-active". "Slick-Active" is the class for any
button (div) you see in the viewport. Each div contains simply a link
(a tag). If you are familiar with Slick Slider you probably know what
I am talking about. The goal here is just to have a blue background
with white text for the link but this is becoming more complex than it
needs to be. I immediately went to just css hover at first but that is
causing ALL buttons to have a blue background, or it will white out
all links. So now I'm thinking this needs to be done with JS since we
want to change the colors on only one div and link at a time instead
of all. I can't add IDs to these as that would make it easy business
obviously. Here is the JS code I have right now, which isn't working
presently. The red is not the intended color just something to test with
but I'm not getting any action from this at all (no bg change at all)
function HoverButtonColorShift() {
let visButtons = document.getElementsByClassName('slick-active');
for (let i = 0; i < visButtons.length; i++) {
let btn = visButtons[i];
btn.addEventListener("mouseenter", function () {
btn.style.background = "red";
});
}
}
HoverButtonColorShift();
Here is the setup in html:
<div class="carousel-link-section-homepage-secton-main-header">
<h3 class="clshs-desktop-header"><asp:Literal ID="CarouselMainHeaderDesktop" runat="server" /></h3>
</div>
<div class="clshs-slider">
<asp:Panel ID="SliderLink1Panel" Visible="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink1" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
<asp:Panel ID="SliderLink2Panel" Visible="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink2" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
<asp:Panel ID="SliderLink3Panel" Visible="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink3" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
<asp:Panel ID="SliderLink4Panel" Visible="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink4" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
<asp:Panel ID="SliderLink5Panel" Visable="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink5" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
<asp:Panel ID="SliderLink6Panel" Visible="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink6" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
<asp:Panel ID="SliderLink7Panel" Visible="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink7" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
</div>
</div>
Any ideas how to pull off this relatively easy issue?
A forEach loop is what was needed.
Here is the solution. I will apply it to the text shortly after posting this:
function HoverButtonColorShift() {
let visButtons = document.querySelectorAll('.caroSlide');
visButtons.forEach(slide => {
slide.addEventListener('mouseover', function handleHover(event) {
console.log('slide hover', event);
slide.style.backgroundColor = "#283B87";
});
slide.addEventListener('mouseleave', function handleHoverk(event) {
console.log('slide leave', event);
slide.style.backgroundColor = "white";
});
});
}
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.
I am trying to get a gridpanel inside a tabpanel to display with proper height. The tab in question is maincontentpanel3. Right now, the width does 100%, but the height seems to go until the panel is filled, way past the bottom of the page.
Scroll bars do not appear, even if autoscroll is set to auto. If I give GridPanel1 a height, everything works properly except for (obviously) the height.
Here is the stripped down code:
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:Panel runat="server" ID="maincontentpanelwrapper" >
<Items>
<ext:TabPanel ID="maincontentpanel" runat="server" Layout="FitLayout">
<Items>
<ext:Panel runat="server" ID="maincontentpanel1" >
</ext:Panel>
<ext:Panel runat="server" ID="maincontentpanel2" >
</ext:Panel>
<ext:Panel runat="server" ID="maincontentpanel3" >
<Items>
<ext:GridPanel ID="GridPanel1" AutoScroll="true" runat="server" >
<Store>
[REMOVED]
</Store>
<ColumnModel>
<Columns>
[REMOVED]
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
Here is an image of what is happening in the bottom right corner (no scroll bars, clearly overflowing)
Thank you for your help!
The only way I could figure out how to do it would be to use javascript. This is the solution I came up with:
initialload2();
function initialload2() {
if (Ext.getCmp("GridPanel1")) {
if (window.innerHeight != undefined) {
var height = window.innerHeight;
}
else {
//for ie
var B = document.body,
D = document.documentElement;
var height = Math.min(D.clientHeight, B.clientHeight);
}
Ext.getCmp("GridPanel1").setHeight(height - 62);
} else {
setTimeout(initialload2, 100);
}
}
var resizeTimer;
window.onresize = function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(initialload2, 100);
};
It can be fix using markup.no need to use javascript.
i have tested on ext.net 2.0 and i think it can work on older version too
just add layout property in gridpanel and border if you like.
example given below
<ext:GridPanel ID="GridPanel1" AutoScroll="true" runat="server" Layout="FitLayout" Border="true" >
thats it .hope you like it
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>
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>