Ext.Net - Change panel width from Javascript - ext.net

I would like to change panel width size from javascript.
Here my code but don't work:
Javascript code:
<script type="text/javascript">
var ExtraExpandMAP = function (pannello) {
pannello.setWidth = 920;
};
</script>
Asp.Net code:
<ext:Panel ID="PanelLazyMAP" runat="server"
Region="East"
Width="460"
Title="Mappa"
Layout="Fit"
Floatable="false"
Resizable="true"
Collapsed="true"
Collapsible="true"
AutoScroll="false"
BodyStyle="background-color:#ffffff;"
MarginSpec="84 0 0 0" AnimCollapse ="false">
<HeaderConfig>
<Items>
<ext:Button ID="btnExpandExtraMAP" runat="server" Icon="RewindGreen">
<Listeners>
<Click Handler="ExtraExpandMAP(#{PanelLazyMAP});">
</Click>
</Listeners>
</ext:Button>
</Items>
</HeaderConfig>
</ext:Panel>

The problem is:
pannello.setWidth = 920;
instead of:
pannello.setWidth(920);

Related

Callback when Ext.NET Combobox local query returns no data

Using Ext.NET combobox.
<ext:ComboBox runat="server"
ID="ComboBoxCategorizedList"
QueryMode="Local"
ValueField="Id"
EmptyText="Type to begin search..."
TypeAhead="false"
DisplayField="Name"
Width="500"
NoteAlign="Down" EnableKeyEvents="true"
Note="Press 'Search' icon or Press ENTER for more results"
RemoveClearTrigger="true">
<%--Note="Type '*' for a full list"--%>
<HtmlBin>
<ext:XScript runat="server">
<script type="text/javascript">
$(window).on("__refresh__", function () {
#{ StoreComboBoxCategorizedList }.reload();
});
</script>
</ext:XScript>
</HtmlBin>
<Store>
<ext:Store runat="server" ID="StoreComboBoxCategorizedList" OnReadData="ComboBoxCategorizedList_ReadData">
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model Id="ModelCategorizedComboBox" runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="Type" />
<ext:ModelField Name="RefId" />
<ext:ModelField Name="Description" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Update Handler="#{ComboBoxCategorizedList}.expand();" />
<EndUpdate Handler="categorizedList();" />
</Listeners>
<Parameters>
<ext:StoreParameter Mode="Raw" Name="filter" Value="#{ComboBoxCategorizedList}.getValue()" />
</Parameters>
</ext:Store>
</Store>
<Triggers>
<ext:FieldTrigger Icon="Clear"/>
<ext:FieldTrigger Icon="Search"></ext:FieldTrigger>
</Triggers>
<Listeners>
<SpecialKey Fn="enterKeyPressHandler" />
<Expand Handler="categorizedList();" Delay="100" />
<BeforeSelect Fn="onBeforeSelect" />
<KeyPress Handler="#{ComboBoxCategorizedList}.getTrigger(1).onClick();" Buffer="1000" />
<Change Handler="filterComboxBoxFunction(#{StoreComboBoxCategorizedList}, #{ComboBoxCategorizedList}.getValue()); #{ComboBoxCategorizedList}.expand(); categorizedList();" Delay="100" />
</Listeners>
Not asking for debugging help, but I want to know if an Ext.NET or Extjs dev has a generic solution: Very simply ... I want to initiate a remote search only when the local search returns no records. So I am looking for the best way to wire this up to the combobox. I've looked at using the Expand event and BeforeQuery event but this seems to come up short.
I'm looking for best practices so i can add a "OnLocalQuery" event to my comboboxes; and then take action if the local query returns 0 matches.
I use this function and it works fine .. and without QueryMode="Local":
<ext:ComboBox ID="cmb_name" runat="server" FieldLabel="ComboBox" EmptyText="-Select-" HideTrigger="true" TriggerAction="All" SelectOnFocus="true" DisplayField="Name" ValueField="Id" Editable="true" TabIndex="11">
<Store>
<ext:Store ID="str_ComboBox" runat="server" PageSize="10">
<Model>
<ext:Model ID="mdl_ComboBox" runat="server">
<Fields>
<ext:ModelField Name="Id" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="Type" />
<ext:ModelField Name="RefId" />
<ext:ModelField Name="Description" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<Change Fn="fn_filter" />
</Listeners>
</ext:ComboBox>
<script type="text/javascript">
var fn_filter = function (_this, newValue, oldValue, eOpts) {
var n = 0;
if (_this.lastQuery == undefined || _this.lastQuery == null) {
_this.lastQuery = "";
}
_this.getStore().clearFilter(true);
_this.getStore().load();
_this.store.filter(function (item) {
if (item.get('Name').includes(_this.getRawValue())) {
n = n + 1;
return true;
}
else {
return false;
}
});
_this.expand();
if (n == 0) {
//returns no records
//enter code here Callback
}
}
</script>

INTran Not showing LotNumberNbr

Good day
I have made a new Grid to show data from INTran(PX.Objects.IN.INTran)
I see there is a LotSerialNbr in the INTran DAC. But when I make a new PXSelect I don't see it in the "ADD DATA FIELDS" on my page.
I add the Lot/Serial Nbr(LotSerialNbr) when loading stock on the Inventory Receipts.
I have also checked INRegister and INTranSplit both not show the Lot Serial Nbr?
using System;
using PX.Data;
using PX.Objects.IN;
using PX.Objects.SO;
namespace Test
{
public class StockTransfer : PXGraph<StockTransfer>
{
public PXSave<MasterTable> Save;
public PXCancel<MasterTable> Cancel;
public PXFilter<MasterTable > MasterView;
public PXFilter<INTran> DetailsView;
[Serializable]
public class MasterTable : IBqlTable
{
}
[Serializable]
public class DetailsTable : IBqlTable
{
}
public PXSelect<INRegister> Register;
public PXSelect<INTran> INTran;
public PXSelect<INTranSplit > INTranSplit ;
}
}
How can I get the Lot Serial number to show on the grid?
edit here is the ASPX:
<%# Page Language="C#" MasterPageFile="~/MasterPages/FormDetail.master" AutoEventWireup="true" ValidateRequest="false" CodeFile="ABIT1111.aspx.cs" Inherits="Page_ABIT1111" Title="Untitled Page" %>
<%# MasterType VirtualPath="~/MasterPages/FormDetail.master" %>
<asp:Content ID="cont1" ContentPlaceHolderID="phDS" Runat="Server">
<px:PXDataSource ID="ds" runat="server" Visible="True" Width="100%"
TypeName="JVDLocationTransfer.TransferGrap"
PrimaryView="MasterView"
>
<CallbackCommands>
</CallbackCommands>
</px:PXDataSource>
</asp:Content>
<asp:Content ID="cont2" ContentPlaceHolderID="phF" Runat="Server">
<px:PXFormView ID="form" runat="server" DataSourceID="ds" DataMember="MasterView" Width="100%" Height="100px" AllowAutoHide="false">
<Template>
<px:PXLayoutRule ID="PXLayoutRule1" runat="server" StartRow="True"></px:PXLayoutRule>
<px:PXTextEdit runat="server" ID="CstPXTextEdit1" DataField="UsrFROMLocation" />
<px:PXTextEdit runat="server" ID="CstPXTextEdit2" DataField="UsrInventoryID" />
<px:PXTextEdit runat="server" ID="CstPXTextEdit3" DataField="UsrInventoryItemDescription" />
<px:PXTextEdit runat="server" ID="CstPXTextEdit4" DataField="UsrQty" />
<px:PXTextEdit runat="server" ID="CstPXTextEdit5" DataField="UsrReasonCode" />
<px:PXTextEdit runat="server" ID="CstPXTextEdit6" DataField="UsrSKU" />
<px:PXTextEdit runat="server" ID="CstPXTextEdit7" DataField="UsrUOM" /></Template>
</px:PXFormView>
</asp:Content>
<asp:Content ID="cont3" ContentPlaceHolderID="phG" Runat="Server">
<px:PXGrid ID="grid" runat="server" DataSourceID="ds" Width="100%" Height="150px" SkinID="Details" AllowAutoHide="false">
<Levels>
<px:PXGridLevel DataMember="INTran">
<Columns>
<px:PXGridColumn DataField="InventoryID" Width="70" />
<px:PXGridColumn DataField="LotSerialNbr" ></px:PXGridColumn></Columns>
</px:PXGridLevel>
</Levels>
<AutoSize Container="Window" Enabled="True" MinHeight="150" />
<ActionBar >
</ActionBar>
</px:PXGrid>
</asp:Content>
The screen graph JVDLocationTransfer.TransferGrap declared in ASPX doesn't match the target StockTransfer graph. Also inexistent columns are declared on dataview like MasterView which points to empty DACs like MasterTable. Wizards functionality such as Add Data Field won't work properly in that context.

Autentication logic form

i'm working in ext.net login form, but no idea how to implement a custom logic to take the user text field & password textfield & validate it.
here is what a had made till now.
appretiate help..
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Ext.NET Example</title>
<link type="text/css" rel="stylesheet" href="http://speed.ext.net/www/intro/css/main.css" />
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Window runat="server" Width="300" Height="200" Draggable="False" Closable="False" Icon="Lock" Title="Loging" BodyPadding="5">
<Items>
<ext:TextField runat="server" Text="Demo" FieldLabel="user" BlankText="ur name is required" AllowBlank="False" ReadOnly="False"/>
<ext:TextField runat="server" Text="password" FieldLabel="pass" BlankText="Pass required" AllowBlank="False" ReadOnly="False" />
</Items>
<Buttons>
<ext:Button runat="server" ID="buton" Icon="Accept" Text="Submit" >
<Listeners>
<Click Handler="init"></Click>
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>
</form>
</body>
</html>
There's a login form with browsers 'saving' functionality (allows google chrome to ask you to "save" the password. This is a full transcript of the example which can be accessed at http://examples4.ext.net/#/Form/Login/Auto_Complete/.
<%# Page Language="C#" %>
<script runat="server">
protected void Button1_Click(object sender, DirectEventArgs e)
{
// Do some Authentication...
if (e.ExtraParams["user"] != "Ext.NET" || e.ExtraParams["pass"] != "extnet")
{
e.Success = false;
e.ErrorMessage = "Invalid username or password.";
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Login - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
// Invalidate the login fields with the given reason.
var invalidateLogin = function(reason) {
App.txtUsername.setValidation(reason);
App.txtPassword.setValidation(reason);
App.txtUsername.validate();
App.txtPassword.validate();
Ext.MessageBox.show({
title: 'Authentication error',
msg: reason,
buttons: Ext.MessageBox.OK,
animateTarget: 'Window1',
icon: 'Error'
});
};
var handleLogin = function() {
var form = App.Window1.el.up().dom; // Window1 is a direct child of the form element.
App.Window1.close();
// Now this would work for Chrome, and we already triggered autoComplete for IE.
// Chrome's is only triggered after the destination page is loaded.
setForm(form, "../../../Desktop/Introduction/Overview/Desktop.aspx", form.target);
form.submit();
restoreForm(form);
};
var orgFormAction, orgFormTarget,
btn = null, iframe = null;
// If we are on IE, we will create a button and click it (at once),
// so autoComplete is triggered.
var handleClientClick = function() {
var form = App.Window1.el.up().dom; // Window1 is a direct child of the form element.
if (Ext.isIE) {
if (iframe == null) {
iframe = document.createElement("IFRAME");
iframe.name = "ie_login_flush";
iframe.style.display = "none";
form.appendChild(iframe);
}
if (btn == null) {
btn = document.createElement("BUTTON");
btn.type = "submit";
btn.id = "submitButton";
btn.style.display="none";
form.appendChild(btn);
}
// On WebForms, we have to force set the form settings as we run or else we'll
// break directEvent calls.
setForm(form, "about:blank", "ie_login_flush");
btn.click();
restoreForm(form);
}
}
var setForm = function(form, action, target) {
// Back up original settings once per execution.
if (typeof orgFormAction == 'undefined') {
orgFormAction = form.action;
}
if (typeof orgFormTarget == 'undefined') {
orgFormTarget = form.target;
}
form.action = action;
form.target = target;
};
var restoreForm = function(form) {
form.action = orgFormAction;
form.target = orgFormTarget;
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<h1>Logging with browser saving functionality</h1>
<p>The valid login/password combination here would be:</p>
<p>
Username: Ext.NET<br>
Password: extnet
</p>
<p>On successful authentication, you will be redirected to the Desktop example.</p>
<ext:Window
ID="Window1"
runat="server"
Closable="false"
Resizable="false"
Height="200"
Icon="Lock"
Title="Login"
Draggable="true"
Width="350"
Modal="false"
BodyPadding="5"
Layout="Form">
<Items>
<ext:TextField
ID="txtUsername"
runat="server"
Name="username"
FieldLabel="Username"
AllowBlank="false"
BlankText="Your username is required." />
<ext:TextField
ID="txtPassword"
runat="server"
Name="password"
InputType="Password"
FieldLabel="Password"
AllowBlank="false"
BlankText="Your password is required." />
</Items>
<Buttons>
<ext:Button
ID="Button1"
runat="server"
Text="Login"
Icon="Accept"
FormBind="true"
Handler="handleClientClick">
<DirectEvents>
<Click
OnEvent="Button1_Click"
Success="handleLogin"
Failure="invalidateLogin(result.errorMessage);"
ShowWarningOnFailure="false">
<EventMask ShowMask="true" Msg="Verifying..." MinDelay="1000" />
<ExtraParams>
<ext:Parameter Name="user" Value="App.txtUsername.value" Mode="Raw" />
<ext:Parameter Name="pass" Value="App.txtPassword.value" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</Buttons>
</ext:Window>
</form>
</body>
</html>

Filter issue in Ext.Net grid panels

In Ext.Net while using Filters item under ext:GridFilters
I am getting Filters is not supported under ext:GridFilters. Please suggest how to resolve this issue
Aspx Page
<%# Page Language="C#" %>
<%# Import Namespace="System.Collections.ObjectModel" %>
<%# Import Namespace="System.Collections.Generic" %>
<%# Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = FiltersTestData.Data;
this.Store1.DataBind();
}
}
protected void SetFilter(object sender, DirectEventArgs e)
{
StringFilter sf = (StringFilter)GridFilters1.Filters[1];
sf.SetValue("xyz");
sf.SetActive(true);
}
</script>
<!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>GridPanel with Local Filtering, Sorting and Paging - Ext.NET Examples</title>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ext:ResourceManager runat="server" DirectEventUrl="default.aspx" />
<h1>GridPanel with Local Filtering, Sorting and Paging</h1>
<p>Please see column header menu for apllying filters</p>
<ext:Store runat="server" ID="Store1">
<Reader>
<ext:JsonReader IDProperty="StudentNo">
<Fields>
<ext:RecordField Name="StudentNo" Type="Int" />
<ext:RecordField Name="StudentName" Type="String" />
<ext:RecordField Name="StudentSurname" Type="String" />
</Fields>
</ext:JsonReader>
</Reader>
<SortInfo Field="StudentSurname" Direction="ASC" />
</ext:Store>
<ext:Window
ID="Window1"
runat="server"
Width="700"
Height="400"
Closable="false"
Collapsible="true"
Title="Example"
Maximizable="true"
Layout="Fit">
<Items>
<ext:GridPanel runat="server" ID="GridPanel1" Border="false" StoreID="Store1">
<ColumnModel runat="server">
<Columns>
<ext:Column Header="StudentNo" DataIndex="StudentNo" />
<ext:Column Header="StudentName" DataIndex="StudentName" />
<ext:Column Header="StudentSurname" DataIndex="StudentSurname" />
</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
<Plugins>
<ext:GridFilters runat="server" ID="GridFilters1" Local="true">
<Filters>
<ext:NumericFilter DataIndex="StudentNo" />
<ext:StringFilter DataIndex="StudentName" />
<ext:StringFilter DataIndex="StudentSurname" />
</Filters>
</ext:GridFilters>
</Plugins>
<BottomBar>
<ext:PagingToolbar ID="PagingToolBar1" runat="server" PageSize="10">
<Items>
<ext:ToolbarSeparator runat="server" />
<ext:Button runat="server" Text="Find 'xyz'">
<DirectEvents>
<Click OnEvent="SetFilter" />
</DirectEvents>
</ext:Button>
</Items>
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Window>
</body>
</html>
cs page:
using System;
using System.Collections.Generic;
public class FiltersTestData
{
public static List<object> Data
{
get
{
var StudentInfo = new List<object>
{
new
{
StudentNo = 1,
StudentName = "xy",
StudentSurname = "xyz"
},
new
{
StudentNo = 2,
StudentName = "AB",
StudentSurname = "ABC"
},
new
{
StudentNo = 3,
StudentName = "pq",
StudentSurname = "pqr"
}
};
return StudentInfo;
}
}
}
please try this code.
this solution works fine for me:
<ext:GridPanel ID="GridPanelDatiAssociati" runat="server" Title="Dati associati" Stateful="true">
<Store>
<ext:Store ID="StoreDatiAssociati" runat="server" PageSize="6">
<Model>
<ext:Model ID="ModelDatiAssociati" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="PARAMETRO" />
<ext:ModelField Name="DESCRIZIONE" />
<ext:ModelField Name="UNITA" />
<ext:ModelField Name="VALORE" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModelDatiAssociati" runat="server">
<Columns>
<ext:Column ID="ColumnID_DATI_ASSOCIATI" runat="server" Text="ID" DataIndex="ID" Width="100" Hidden = "true" >
</ext:Column>
<ext:Column ID="ColumnPARAMETRO" runat="server" Width="100" Text="Parametro" DataIndex="PARAMETRO">
<Filter>
<ext:StringFilter />
</Filter>
</ext:Column>
<ext:Column ID="ColumnUNITA" runat="server" Width="170" Text="Unità" DataIndex="UNITA">
<Filter>
<ext:DateFilter>
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
</Filter>
</ext:Column>
<ext:Column ID="ColumnVALORE" runat="server" Width="170" Text="Valore" DataIndex="VALORE">
<Filter>
<ext:DateFilter>
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
</Filter>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:GridFilters ID="GridFiltersDatiAssociati" runat="server">
</ext:GridFilters>
</Plugins>
</ext:GridPanel>

how to use the updatepanl and postback trigger and progress templete in asp.net ajax

hi i am using update panel in my project, one page i have file upload control is there, so save the page file upload is not working that time i used post back trigger control (id is button id) now my problem is progress bar is not working , please give me any suggestion. my code is
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="up1" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="IBtnSave" />
<asp:PostBackTrigger ControlID="ddlAgent" />
<asp:PostBackTrigger ControlID="btnSelectCity" />
<asp:PostBackTrigger ControlID="imgBtnAgent" />
<asp:PostBackTrigger ControlID="ImgBtnCancel" />
</Triggers>
progress bar code is
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="up1"
DynamicLayout="true">
<ProgressTemplate>
<div id="Progressbar" class="Progressbar" align="center" valign="middle" runat="server">
<asp:Image ID="Image1" Width="75" Height="95" runat="server" ImageUrl="~/images/animation_processing.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
how to solve that problem, please give me any suggestion
Thank u
hemanth
i can find out the answer it is working
just write the java script like this
<script type="text/javascript">
var updateProgress = null;
function postbackButtonClick() {
updateProgress = $find("<%= UpdateProgress1.ClientID %>");
window.setTimeout("updateProgress.set_visible(true)", updateProgress.get_displayAfter());
return true;
}
</script>
after that
<asp:UpdatePanel runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="IBtnSave" />
</Triggers>
button onclick event just call that function like this
<asp:Button ID="IBtnSave" runat="server" Text="Save" CssClass="art-button"
ClientIDMode="Static" onclick="IBtnSave_Click" OnClientClick="return postbackButtonClick();"/>

Resources