When my rpa start the data scraping, the rpa is able to start running but takes forever and never complete the data scraping. There is no error message output, the rpa never end. Why this is happening? And I strongly suspect it is caused by the selector.
Selector of "Attach Browser 'Cookingoi' Page":
<html app='chrome.exe' htmlwindowname='nameStorage:?wm_referrer=https%3A%2F%2Fredmart.lazada.sg%2F%23home&refer_pv_id=*' title='* - Buy * at Best Price in Singapore | www.lazada.sg' />
Selector of "Extract Structured Data 'DIV'":
<webctrl css-selector='body>div>div>div>div>div' parentid='root' tag='DIV' />
Selector of "NextLinkSelector":
<webctrl idx='7' isleaf='1' parentid='root' tag='A' />
Ok, I was able to do this you have to select the larger box encompassing the whole div for an item.
This is how my extract metadata tag looks like.
<extract>
<row exact='1'>
<webctrl tag='div' class='shelf_container' idx='1'/>
<webctrl tag='div' class='shelf_wrapper' idx='1'/>
<webctrl tag='div' class='product_container'/>
</row>
<column exact='1' name='col1' attr='text'>
<webctrl tag='div' class='shelf_container' idx='1'/>
<webctrl tag='div' class='shelf_wrapper' idx='1'/>
<webctrl tag='div' class='product_container'/>
<webctrl tag='a' class='pdp_link' idx='1'/>
</column>
<column exact='1' name='Column2' attr='text'>
<webctrl tag='div' class='shelf_container' idx='1'/>
<webctrl tag='div' class='shelf_wrapper' idx='1'/>
<webctrl tag='div' class='product_container'/>
<webctrl tag='a' class='pdp_link' idx='1'/>
<webctrl tag='div' class='product_details_container' idx='1'/>
<webctrl tag='div' class='title_wrapper' idx='1'/>
<webctrl tag='div' class='title' idx='1'/>
</column>
<column exact='1' name='Column3' attr='text'>
<webctrl tag='div' class='shelf_container' idx='1'/>
<webctrl tag='div' class='shelf_wrapper' idx='1'/>
<webctrl tag='div' class='product_container'/>
<webctrl tag='a' class='pdp_link' idx='1'/>
<webctrl tag='div' class='product_details_container' idx='1'/>
<webctrl tag='div' class='price_container' idx='1'/>
<webctrl tag='div' class='product_price' idx='1'/>
</column>
</extract>
Related
I need to implement load more in my table with dynamic values. This is my screen.
Initially, I have displayed the values from api call. On that time my table should be scroll down automatically to the last row of the table. Then I clicked the load more button again the api calls and added the new values in the model and added into the table too. But its not scrolling down to the table. Here is the controller code I have tried for scroll down.
var oTableModel = new sap.ui.model.json.JSONModel();
oTableModel .setSizeLimit(TABLE_ARRAY.length);
oTableModel .setData({
oset: TABLE_ARRAY
});
that.getView().byId("oSmartTable").setModel(oTableModel);
//that.getView().byId("otable").getBinding("items").refresh();
var oTable = that.getView().byId("logtable");
var oLength = TABLE_ARRAY.length - 1;
//New Item that is added
var oItem = oTable.getItems()[oLength];
var oScroll = that.getView().byId("oscroll");
//Add Delay since the new item needs to be added to the HTML Doc
jQuery.sap.delayedCall(100, that, function () {
//Scroll to the newly added item
oScroll.scrollToElement(oItem);
});
And this is view.xml code for smart table
<ScrollContainer id="oscroll" height="100%" width="99%" horizontal="false" vertical="true">
<VBox class="chartBackground" alignItems="Stretch" width="100%" id="logTableVB">
<items>
<smartTable:SmartTable id="oSmartTable" entitySet="oset" smartFilterId="smartFilterBar" tableType="ResponsiveTable"
app:p13nDialogSettings="{sort:{items:[{ columnKey: 'Type', operation: 'Ascending' }]}}" useExportToExcel="false"
beforeExport="onBeforeExport" useVariantManagement="true" useTablePersonalisation="true" showTablePersonalisation="true"
header="Total Logs " showRowCount="true" showFullScreenButton="true" enableAutoBinding="true">
<Table id="logtable" sticky="ColumnHeaders" class="headercolor" growingScrollToLoad="true" growing="true" growingThreshold="50">
<!--firstVisibleRowChanged="scroll"-->
<columns getResizable="true">
<Column minScreenWidth="Tablet" demandPopin="true" width="10%">
<customData>
<core:CustomData key="p13nData"
value='\{"sortProperty": "c1_data", "filterProperty": "c1_data","columnKey": "Column 1", "leadingProperty" : "c1_data"}'/>
</customData>
<Text class="headercolor" text="Column 1"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" width="15%">
<customData>
<core:CustomData key="p13nData"
value='\{"sortProperty": "c2_data", "filterProperty": "c2_data","columnKey": "Column 2", "leadingProperty" : "c2_data"}'/>
</customData>
<Text class="headercolor" text="Column 2"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" width="15%">
<customData>
<core:CustomData key="p13nData"
value='\{"sortProperty": "c3_data", "filterProperty": "c3_data","columnKey": "Column 3", "leadingProperty" : "c3_data"}'/>
</customData>
<Text class="headercolor" text="Column 3"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" width="15%">
<customData>
<core:CustomData key="p13nData"
value='\{"sortProperty": "c4_data", "filterProperty": "c4_data","columnKey": "Column 4", "leadingProperty" : "c4_data"}'/>
</customData>
<Text class="headercolor" text="Column 4"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" width="15%">
<customData>
<core:CustomData key="p13nData"
value='\{"sortProperty": "c5_data", "filterProperty": "c5_data","columnKey": "Column 5", "leadingProperty" : "c5_data"}'/>
</customData>
<Text class="headercolor" text="Column 5"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<customData>
<core:CustomData key="p13nData"
value='\{"sortProperty": "c6_data", "filterProperty": "c6_data","columnKey": "Column 6", "leadingProperty" : "c6_data"}'/>
</customData>
<Text class="headercolor" text="Column6"/>
</Column>
</columns>
<items>
<ColumnListItem type="Active" press="onLogTableClick_">
<cells>
<Text class="tabletext" text="{c1_data}"/>
<Text class="tabletext" text="{c2_data}"/>
<Text class="tabletext" text="{c3_data}"/>
<Text class="tabletext" text="{c4_data}"/>
<Text class="tabletext" text="{c5_data}"/>
<Text class="tabletext" text="{c6_data}"/>
</cells>
</ColumnListItem>
</items>
</Table>
<HBox>
<items>
<HBox class="contactMarigin" width="100%" justifyContent="Start" alignItems="Center">
<items></items>
</HBox>
<HBox class="contactMarigin" width="100%" justifyContent="Center" alignItems="Center">
<items></items>
</HBox>
<HBox class="contactMarigin" width="100%" justifyContent="End" alignItems="Center">
<items>
<Button id="oload_more" text="Load More" class="pdfMarigin" />
</items>
</HBox>
</items>
</HBox>
</smartTable:SmartTable>
</items>
</VBox>
</ScrollContainer>
I have put my smart table inside scroll container. when I click load more button the should be scroll down automatically to the last row. How can I achieve this? Thanks in advance.
setTimeout(function () {
oScroll.scrollToElement(oTable.getItems()[oLength], 800);
}, 0);
I used APEX 4.2 to create a Gantt chart with the AnyGantt Library.
When i use a custom XML for the Anygantt Diagram everythign works fine. As soon as i want to use custom datagrids, the collapser is missing.
My XML is the following:
<anygantt> <settings>
<navigation enabled="True" position="Top" size="30">
</navigation>
<editing allow_edit="true">
<rounding>
<date unit="Week" step="1" />
</rounding>
</editing>
<locale>
<date_time_format week_starts_from_monday="True">
<months>
<names>January,February,March,April,May,June,July,August,September,October,November,December</names>
<short_names>Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec</short_names>
</months>
<week_days>
<names>Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday</names>
<short_names>Sun,Mon,Tue,Wed,Thu,Fri,Sat</short_names>
</week_days>
<format>
<full>%yyyy.%MM.%dd.%HH.%mm.%ss</full>
<date>%yyyy.%MM.%dd</date>
<time>%HH.%mm.%ss</time>
</format>
</date_time_format>
</locale>
</settings>
<datagrid enabled="true" width="300">
<columns>
<column attribute_name="Name" width="200" cell_align="Left">
<header>
<text>Name</text>
</header>
<format>{%Name}</format>
</column>
<column width="40" cell_align="Left">
<header>
<text>Stunden</text>
</header>
<format>{%Stunden}</format>
</column>
</columns>
</datagrid>
<styles>
<defaults>
<period>
<period_style>
<bar_style>
<labels>
<label anchor="Center" valign="Center" halign="Center">
<text>{%DISPO} %</text>
<font face="Verdana" size="10" bold="true" color="White">
</font>
</label>
</labels>
</bar_style>
</period_style>
</period>
</defaults>
<period_styles>
<period_style name="test">
<bar_style>
<labels>
<label anchor="Center" valign="Center" halign="Center">
<text>Center</text>
<font face="Verdana" size="10" bold="true" color="White">
</font>
</label>
</labels>
<middle shape="Full">
<fill enabled="true" type="Solid" color="DarkSeaGreen" />
<border enabled="true" color="#FF0000" />
</middle>
</bar_style>
</period_style>
</period_styles>
</styles>
<resource_chart><resources><resource name="AVI" id="5"/>
<resource name="CAB" id="4"/>
<resource name="Test, Test (Test)" id="3-U837751" parent="3"/>
<resource name="PL" id="3"/>
<resource name="Struktur" id="2"/>
</resources><periods><period resource_id="3-U837751" name="NAME-3-U837751" start="2015.07.28 00:00" end="2015.07.31 00:00">
<attributes>
<attribute name="DISPO"><![CDATA[,5]]></attribute>
</attributes>
</period></periods></resource_chart>
You need to add cell_align="LeftLevelPadding" to the column where you want to see the collapser. Something like:
<column attribute_name="Name" width="200" cell_align="LeftLevelPadding">
This is described in KB: http://support.anychart.com/customer/portal/articles/2077851--anygantt-4-x-collapser-is-missing-in-datagrid-column
You can find more info on columns at
http://6.anychart.com/products/anygantt/docs/users-guide/index.html?columns.html
Hi I have to implement the validation functionality like if all the form controls with in the Tabpanels is valid then it should enable the "Save" button otherwise it should be disabled.
In this marked as * are required fields and corresponding Code Sa
<%# Page Language="C#" %>
<%# Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<html>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager ID="reso" SourceFormatting="true" runat="server" />
<ext:Panel ID="MainPanel" runat="server" AutoHeight="true" Layout="VBoxLayout" Border="false"
AutoScroll="true">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Left" />
</LayoutConfig>
<Items>
<ext:Panel ID="pnlEditInfo" Header="false" Border="false" runat="server" Title="Basic Info"
Width="950" AutoHeight="true" AutoScroll="true" Layout="Form" ButtonAlign="Center"
Padding="5" MinHeight="550">
<Items>
<ext:FormPanel ID="fpnlCreateStatus" Cls="formBackground" runat="server" BodyCls="formheader"
Padding="5" ButtonAlign="Center" Layout="FormLayout" Frame="false" MonitorValid="true"
Width="850" Border="false">
<Items>
<ext:Container runat="server" ID="ContnOne" Layout="ColumnLayout" Width="700" MinHeight="120">
<Items>
<ext:Container runat="server" Layout="Form" ColumnWidth=".5" ID="ContOneChild">
<Items>
<ext:TextField ID="txtCompanyName" runat="server" FieldLabel="* Company Name" Cls="labelStyle"
AnchorHorizontal="95%" AllowBlank="false" BlankText="Company Name is required"
MaskRe="/[a-zA-Z0-9-. ]/" MaxLength="240" PaddingSpec="8 0 0 0" Width="350" LabelAlign="Right"
LabelWidth="135">
</ext:TextField>
<ext:TextField ID="txtShortName" MaskRe="/[A-Za-z/_/-/ ]/" Cls="labelStyle" MaxLength="25" LabelWidth="135" AllowBlank="false" BlankText="Short Name is required"
LabelAlign="Right" Width="350" runat="server" FieldLabel="* Short Name" AnchorHorizontal="95%" />
<ext:RadioGroup ID="rghasMultipleLoc" LabelWidth="135" LabelAlign="Right" runat="server"
FieldLabel="Has Multiple Locations?" Width="250">
<Items>
<ext:Radio ID="rdMultiLocYes" runat="server" BoxLabel="Yes" Checked="true" />
<ext:Radio ID="rdMultiLocNo" runat="server" BoxLabel="No" />
</Items>
</ext:RadioGroup>
</Items>
</ext:Container>
</Items>
</ext:Container>
<ext:TabPanel ID="tbpnlCompany" runat="server" Plain="true" Width="830"
Border="false">
<Items>
<ext:Panel ID="pnlProfile" runat="server" Title="Profile" Padding="10" Layout="Form"
Border="false" Height="130">
<Items>
<ext:FormPanel ID="frmCompProfile" Cls="formBackground" runat="server" BodyCls="formheader"
Padding="5" ButtonAlign="Center" Layout="FormLayout" Frame="false" MonitorValid="true"
Width="850" Border="false">
<Items>
<ext:TextArea ID="txtCompanyProfile" LabelAlign="Right" runat="server" FieldLabel="* Company Profile"
LabelWidth="150" Height="100" TabIndex="1" LabelStyle="font-weight: bold;" AllowBlank="false"
Width="500" BlankText="Company Profile is required" MaskRe="[a-zA-Z0-9!##$%^&*().-_ ]"
MaxLength="500" />
</Items>
<Listeners>
<ValidityChange Handler="#{btnSave}.setDisabled(!valid);" />
</Listeners>
</ext:FormPanel>
</Items>
</ext:Panel>
<ext:Panel ID="pnlAddress" runat="server" Title="Address" Padding="10" Layout="Form"
Border="false" Height="130">
<Items>
<ext:FormPanel ID="frmPanelAddress" Cls="formBackground" runat="server" BodyCls="formheader"
Padding="5" ButtonAlign="Center" Layout="FormLayout" Frame="false" MonitorValid="true"
Width="850" Border="false">
<Items>
<ext:TextField ID="txtAddress1" LabelAlign="Right" runat="server" FieldLabel="* Address1"
TabIndex="2" LabelStyle="font-weight: bold;" AllowBlank="false" Width="500" BlankText="Address1 is required"
MaskRe="[a-zA-Z0-9!##$%^&*().-_ ]" MaxLength="250" />
<ext:Panel ID="Panel1" runat="server" Layout="ColumnLayout" Border="false">
<Items>
<ext:Panel ID="Panel2" runat="server" Layout="ColumnLayout" ColumnWidth=".3" Border="false">
<Items>
<ext:TextField ID="txtCity" MaskRe="[A-Za-z ]" MaxLength="50" LabelAlign="Right"
runat="server" PaddingSpec="0 0 5 0" TabIndex="4" FieldLabel="City" Width="250"
RemoveClearTrigger="true" Cls="labelStyle" AllowBlank="false" BlankText="City Name is required">
</ext:TextField>
<ext:ComboBox ID="cbCountry" LabelAlign="Right" FieldLabel="* Country" LabelStyle="font-weight: bold;"
TabIndex="5" runat="server" Editable="false" DisplayField="CountryName" BlankText="Country is required"
AllowBlank="false" MsgTarget="Side" ValueField="CountryCode" EmptyText="Select"
Resizable="false" SelectOnFocus="true" Width="250">
<Items>
<ext:ListItem Text="India" Value="1">
</ext:ListItem>
<ext:ListItem Text="U.A.E" Value="3">
</ext:ListItem>
</Items>
</ext:ComboBox>
</Items>
</ext:Panel>
<ext:Panel ID="Panel3" runat="server" Layout="ColumnLayout" ColumnWidth=".3" Border="false">
<Items>
<ext:TextField ID="txtZIP" MaskRe="/[0-9]/" MinLength="6" LabelAlign="Right" runat="server"
TabIndex="6" FieldLabel="ZIP Code" Width="250" PaddingSpec="0 0 5 0" />
<ext:ComboBox ID="cbState" LabelAlign="Right" MsgTarget="Side" FieldLabel="* State"
TabIndex="7" AllowBlank="false" LabelStyle="font-weight: bold;" runat="server"
Editable="false" DisplayField="StateName" ValueField="StateCode" BlankText="State is required"
EmptyText="Select" Resizable="false" SelectOnFocus="true" Width="250">
<Items>
<ext:ListItem Text="Andhra Pradesh" Value="1">
</ext:ListItem>
<ext:ListItem Text="Kerala" Value="2">
</ext:ListItem>
<ext:ListItem Text="London" Value="5">
</ext:ListItem>
<ext:ListItem Text="Kentucky" Value="6">
</ext:ListItem>
</Items>
<SelectedItems>
<ext:ListItem Value="1">
</ext:ListItem>
</SelectedItems>
</ext:ComboBox>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
<Listeners>
<ValidityChange Handler="#{btnSave}.setDisabled(!valid);" />
</Listeners>
</ext:FormPanel>
</Items>
</ext:Panel>
<ext:Panel ID="pnlCommunication" runat="server" Title="Communication" Border="false" TagString="Communication"
Height="130" Padding="10" Layout="Form">
<Items>
<ext:FormPanel ID="frmPnlCommunication" Cls="formBackground" runat="server" BodyCls="formheader"
Padding="5" ButtonAlign="Center" Layout="FormLayout" Frame="false" MonitorValid="true"
Width="850" Border="false">
<Items>
<ext:TextField ID="txtWebsite" LabelAlign="Right" Regex="/^[A-Za-z0-9-\.]+\.[A-Za-z]{2,4}\/?([^\s<>\#%\,\{\}\\|\\\^\[\]`]+)?$/"
MaxLength="25" InvalidText="Website is invalid" MsgTargetElement="lblErrorMsg" MsgTarget="Side"
runat="server" TabIndex="8" FieldLabel="Website" Width="500" RegexText="Enter Valid Website">
</ext:TextField>
<ext:TextField ID="txtEmailid" LabelAlign="Right" Regex="^(\w+)([-+.][\w]+)*#(\w[-\w]*\.){1,5}([A-Za-z]){2,4}$"
MaxLength="50" TabIndex="9" RegexText="Enter correct emailid" runat="server"
FieldLabel="EmailID" Width="500" />
<ext:TextField ID="txtPhone" LabelAlign="Right" BlankText="Phone is required" runat="server"
TabIndex="10" FieldLabel="Phone" Width="500" MaskRe="/[0-9\-]/" MaxLength="25"
MaxLengthText="Maximum length for phone is 15" />
</Items>
<Listeners>
<ValidityChange Handler="#{btnSave}.setDisabled(!valid);" />
</Listeners>
</ext:FormPanel>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
<ext:Panel runat="server" ID="pnlButtons" Height="30" Border="false" Width="600"
ButtonAlign="Center">
<Items>
<ext:Button ID="btnSave" runat="server" Cls="buttonstyle" Icon="Disk" Disabled="true"
Text="Save" TabIndex="24" X="250">
<Listeners>
</Listeners>
</ext:Button>
<ext:Button ID="btnCancel" runat="server" Cls="buttonstyle" Text="Cancel" Icon="Cancel"
X="260" TabIndex="25">
</ext:Button>
</Items>
</ext:Panel>
</Items>
<Listeners>
<ValidityChange Handler="#{btnSave}.setDisabled(!valid);" />
</Listeners>
</ext:FormPanel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</div>
</form>
</body>
</html>
Here it is working fine for the active tab controls in tabPanel , but it doesn't validating the other tabs in the TabPanel control and the save button enables i.e which is not validating correctly.
Suggest me the right way to validate all the controls with in the all the tabpanels also and enabling the save button after all the controls were saved.
Thank you.
Try the following. Based on this link: http://forums.ext.net/showthread.php?27203
<%# Page Language="C#" %>
<%# Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager ID="reso" SourceFormatting="true" runat="server" />
<ext:Panel ID="MainPanel" runat="server" AutoHeight="true" Layout="VBoxLayout" Border="false"
AutoScroll="true">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Left" />
</LayoutConfig>
<Items>
<ext:Panel ID="pnlEditInfo" Header="false" Border="false" runat="server" Title="Basic Info"
Width="950" AutoHeight="true" AutoScroll="true" Layout="Form" ButtonAlign="Center"
Padding="5" MinHeight="550">
<Items>
<ext:FormPanel ID="fpnlCreateStatus" Cls="formBackground" runat="server" BodyCls="formheader"
Padding="5" ButtonAlign="Center" Layout="FormLayout" Frame="false" MonitorValid="true"
Width="850" Border="false">
<Items>
<ext:Container runat="server" ID="ContnOne" Layout="ColumnLayout" Width="700" MinHeight="120">
<Items>
<ext:Container runat="server" Layout="Form" ColumnWidth=".5" ID="ContOneChild">
<Items>
<ext:TextField ID="txtCompanyName" runat="server" FieldLabel="* Company Name" Cls="labelStyle"
AnchorHorizontal="95%" AllowBlank="false" BlankText="Company Name is required"
MaskRe="/[a-zA-Z0-9-. ]/" MaxLength="240" PaddingSpec="8 0 0 0" Width="350" LabelAlign="Right"
LabelWidth="135">
</ext:TextField>
<ext:TextField ID="txtShortName" MaskRe="/[A-Za-z/_/-/ ]/" Cls="labelStyle" MaxLength="25" LabelWidth="135" AllowBlank="false" BlankText="Short Name is required"
LabelAlign="Right" Width="350" runat="server" FieldLabel="* Short Name" AnchorHorizontal="95%" />
<ext:RadioGroup ID="rghasMultipleLoc" LabelWidth="135" LabelAlign="Right" runat="server"
FieldLabel="Has Multiple Locations?" Width="250">
<Items>
<ext:Radio ID="rdMultiLocYes" runat="server" BoxLabel="Yes" Checked="true" />
<ext:Radio ID="rdMultiLocNo" runat="server" BoxLabel="No" />
</Items>
</ext:RadioGroup>
</Items>
</ext:Container>
</Items>
</ext:Container>
<ext:TabPanel ID="tbpnlCompany" runat="server" Plain="true" Width="830" DeferredRender="false"
Border="false">
<Items>
<ext:Panel ID="pnlProfile" runat="server" Title="Profile" Padding="10" Layout="Form"
Border="false" Height="130">
<Items>
<ext:Panel ID="frmCompProfile" Cls="formBackground" runat="server" BodyCls="formheader"
Padding="5" ButtonAlign="Center" Layout="FormLayout" Frame="false" MonitorValid="true"
Width="850" Border="false">
<Items>
<ext:TextArea ID="txtCompanyProfile" LabelAlign="Right" runat="server" FieldLabel="* Company Profile"
LabelWidth="150" Height="100" TabIndex="1" LabelStyle="font-weight: bold;" AllowBlank="false"
Width="500" BlankText="Company Profile is required" MaskRe="[a-zA-Z0-9!##$%^&*().-_ ]"
MaxLength="500" />
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel ID="pnlAddress" runat="server" Title="Address" Padding="10" Layout="Form"
Border="false" Height="130">
<Items>
<ext:Panel ID="frmPanelAddress" Cls="formBackground" runat="server" BodyCls="formheader"
Padding="5" ButtonAlign="Center" Layout="FormLayout" Frame="false" MonitorValid="true"
Width="850" Border="false">
<Items>
<ext:TextField ID="txtAddress1" LabelAlign="Right" runat="server" FieldLabel="* Address1"
TabIndex="2" LabelStyle="font-weight: bold;" AllowBlank="false" Width="500" BlankText="Address1 is required"
MaskRe="[a-zA-Z0-9!##$%^&*().-_ ]" MaxLength="250" />
<ext:Panel ID="Panel1" runat="server" Layout="ColumnLayout" Border="false">
<Items>
<ext:Panel ID="Panel2" runat="server" Layout="ColumnLayout" ColumnWidth=".3" Border="false">
<Items>
<ext:TextField ID="txtCity" MaskRe="[A-Za-z ]" MaxLength="50" LabelAlign="Right"
runat="server" PaddingSpec="0 0 5 0" TabIndex="4" FieldLabel="City" Width="250"
RemoveClearTrigger="true" Cls="labelStyle" AllowBlank="false" BlankText="City Name is required">
</ext:TextField>
<ext:ComboBox ID="cbCountry" LabelAlign="Right" FieldLabel="* Country" LabelStyle="font-weight: bold;"
TabIndex="5" runat="server" Editable="false" DisplayField="CountryName" BlankText="Country is required"
AllowBlank="false" MsgTarget="Side" ValueField="CountryCode" EmptyText="Select"
Resizable="false" SelectOnFocus="true" Width="250">
<Items>
<ext:ListItem Text="India" Value="1">
</ext:ListItem>
<ext:ListItem Text="U.A.E" Value="3">
</ext:ListItem>
</Items>
</ext:ComboBox>
</Items>
</ext:Panel>
<ext:Panel ID="Panel3" runat="server" Layout="ColumnLayout" ColumnWidth=".3" Border="false">
<Items>
<ext:TextField ID="txtZIP" MaskRe="/[0-9]/" MinLength="6" LabelAlign="Right" runat="server"
TabIndex="6" FieldLabel="ZIP Code" Width="250" PaddingSpec="0 0 5 0" />
<ext:ComboBox ID="cbState" LabelAlign="Right" MsgTarget="Side" FieldLabel="* State"
TabIndex="7" AllowBlank="false" LabelStyle="font-weight: bold;" runat="server"
Editable="false" DisplayField="StateName" ValueField="StateCode" BlankText="State is required"
EmptyText="Select" Resizable="false" SelectOnFocus="true" Width="250">
<Items>
<ext:ListItem Text="Andhra Pradesh" Value="1">
</ext:ListItem>
<ext:ListItem Text="Kerala" Value="2">
</ext:ListItem>
<ext:ListItem Text="London" Value="5">
</ext:ListItem>
<ext:ListItem Text="Kentucky" Value="6">
</ext:ListItem>
</Items>
<SelectedItems>
<ext:ListItem Value="1">
</ext:ListItem>
</SelectedItems>
</ext:ComboBox>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel ID="pnlCommunication" runat="server" Title="Communication" Border="false" TagString="Communication"
Height="130" Padding="10" Layout="Form">
<Items>
<ext:Panel ID="frmPnlCommunication" Cls="formBackground" runat="server" BodyCls="formheader"
Padding="5" ButtonAlign="Center" Layout="FormLayout" Frame="false" MonitorValid="true"
Width="850" Border="false">
<Items>
<ext:TextField ID="txtWebsite" LabelAlign="Right" Regex="/^[A-Za-z0-9-\.]+\.[A-Za-z]{2,4}\/?([^\s<>\#%\,\{\}\\|\\\^\[\]`]+)?$/"
MaxLength="25" InvalidText="Website is invalid" MsgTargetElement="lblErrorMsg" MsgTarget="Side"
runat="server" TabIndex="8" FieldLabel="Website" Width="500" RegexText="Enter Valid Website">
</ext:TextField>
<ext:TextField ID="txtEmailid" LabelAlign="Right" Regex="^(\w+)([-+.][\w]+)*#(\w[-\w]*\.){1,5}([A-Za-z]){2,4}$"
MaxLength="50" TabIndex="9" RegexText="Enter correct emailid" runat="server"
FieldLabel="EmailID" Width="500" />
<ext:TextField ID="txtPhone" LabelAlign="Right" BlankText="Phone is required" runat="server"
TabIndex="10" FieldLabel="Phone" Width="500" MaskRe="/[0-9\-]/" MaxLength="25"
MaxLengthText="Maximum length for phone is 15" />
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
<ext:Panel runat="server" ID="pnlButtons" Height="30" Border="false" Width="600"
ButtonAlign="Center">
<Items>
<ext:Button ID="btnSave" runat="server" Cls="buttonstyle" Icon="Disk" Disabled="true"
Text="Save" TabIndex="24" X="250">
<Listeners>
</Listeners>
</ext:Button>
<ext:Button ID="btnCancel" runat="server" Cls="buttonstyle" Text="Cancel" Icon="Cancel"
X="260" TabIndex="25">
</ext:Button>
</Items>
</ext:Panel>
</Items>
<Listeners>
<ValidityChange Handler="#{btnSave}.setDisabled(!valid);" />
</Listeners>
</ext:FormPanel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</div>
</form>
</body>
</html>
Title sounds like a real mouthful, so let me try to explain this. I'm very strong with grinding out Web Forms and this is my second crack at using a framework and MVC (don't ask about the first one). Start with a table like this:
Title: Milestones
Id int - Auto, PK
Project_Id int - FK, Many Milestones to One Project, Provided static for now
Number int
Name varchar(50)
Status_Id int - FK One Status to One Milestone
PlannedDate date
LatestEstimate date
MilestoneType_ID int - FK One Type to One Milestone
These all sit on an SQL server, are pulled in by an Entity and then are pulled in by an ObjectDataSource, like this:
<asp:ObjectDataSource runat="server" ID="MilestonesObjectSource" SelectMethod="GetByProject"
DeleteMethod="DeleteMilestone" TypeName="TCProjectManagement.Models.MilestonesAddition">
<SelectParameters>
<asp:Parameter DefaultValue="6" Name="ProjectID" Type="Int32" />
</SelectParameters>
<DeleteParameters>
<asp:Parameter Type="Int32" Name="Id" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Type="Int32" Name="Id" />
<asp:Parameter Type="Int32" Name="Number" />
<asp:Parameter Type="String" Name="Name" />
<asp:Parameter Type="Int32" Name="Status_Id" />
<asp:Parameter Type="DateTime" Name="PlannedDate" />
<asp:Parameter Type="DateTime" Name="LatestEstimate" />
<asp:Parameter Type="Int32" Name="MilestoneType_ID" />
</UpdateParameters>
</asp:ObjectDataSource>
Sofar so good. Data pull seems to work out okay. I've got a couple more Object Sources that deal exclusively with the Foriegn Keys, so I'll skip those since they seem to be working.
The problems I have are attempting to stitch together many examples that don't seem to go together well. My objectives, in no paticular order:
1) Pin Editing: Click a button to edit, click it again to confirm. Rather do this than have somebody infer to double click for a change. Sofar, this sorta works.
2) Drop Downs for Foriegn Keys: While not in edit mode, should display the "Name" field of the FK. While in edit it should be a Drop Down for options (there's only three). This stays blank dispite what I do.
3) Deletion: Press a button to blow away a row. I put the button there but it's a copy of the JS for editing. What do I need to use to have it be deletion?
4) Dates: This doesn't work at all. One of the weird parts is that from the SQL server's type of Date, it gets changed to DateTime in the Entity and stays that way throughout. However, I cannot get the desired control of ext:DateField to cooperate with the provided data since it displays a time and completely blanks out when editing.. I know I'm doing something wrong here.
5) Saving Changes: Not quite sure I set it up right (or at all).
Provisions of Javascript:
<script type="text/javascript">
var pinEditors = function (btn, pressed) {
var columnConfig = btn.column,
column = columnConfig.column;
if (pressed) {
column.pinOverComponent();
column.showComponent(columnConfig.record, true);
} else {
column.unpinOverComponent();
column.hideComponent(true);
}
};
var pinDeleters = function (btn, pressed) { };
</script>
And ASP Code:
<ext:GridPanel ID="MilestonesGridPanel" runat="server" Title="Milestones" Width="1000px"
Height="300px">
<Store>
<ext:Store ID="MilestonesGridStore" runat="server" DataSourceID="MilestonesObjectSource">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Number" Type="Int" />
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="Status_Id" Type="Int" />
<ext:ModelField Name="PlannedDate" />
<ext:ModelField Name="LatestEstimate" />
<ext:ModelField Name="MilestoneType_ID" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="IdColumn" runat="server" DataIndex="Id" Text="DBID" Visible="false" />
<ext:ComponentColumn ID="NumberColumn" runat="server" DataIndex="Number" OverOnly="true"
Pin="true" Flex="1" Text="Number" Editor="true">
<Component>
<ext:NumberField ID="NumberColumnNumberField" runat="server" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="NameColumn" runat="server" DataIndex="Name" OverOnly="true"
Pin="true" Flex="1" Text="Name" Editor="true">
<Component>
<ext:TextField ID="NameColumnTextField" runat="server" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="StatusColumn" runat="server" DataIndex="Status_Id" OverOnly="true"
Pin="true" Flex="1" Text="Status" Editor="true">
<Component>
<ext:ComboBox ID="StatusColumnDropDownBox" runat="server" QueryMode="Local" Editable="false"
StoreID="MilestoneStatusStore" DisplayField="Name" ValueField="ID" EmptyText="Empty" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="PlannedDateColumn" runat="server" DataIndex="PlannedDate"
OverOnly="true" Pin="true" Flex="1" Text="Planned Date" Editor="true">
<Renderer Format="Date" FormatArgs="'m/d/y'" />
<Component>
<ext:DateField ID="PlannedDateColumnTextField" runat="server" Format="MM/dd/yyyy"
EmptyText="Empty" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="LatestEstimateColumn" runat="server" DataIndex="LatestEstimate"
OverOnly="true" Pin="true" Flex="1" Text="Latest ETA" Editor="true">
<Renderer Format="Date" FormatArgs="'m/d/y'" />
<Component>
<ext:DateField ID="LatestEstimateColumnTextField" runat="server" Format="MM/dd/yyyy"
EmptyText="Empty" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="MilestoneTypeColumn" runat="server" DataIndex="MilestoneType_ID"
OverOnly="true" Pin="true" Flex="1" Text="Milestone Type" Editor="true">
<Component>
<ext:ComboBox ID="MilestoneTypeColumnComboBox" runat="server" QueryMode="Local" Editable="false"
StoreID="MilestoneTypesStore" DisplayField="Name" ValueField="ID" EmptyText="Empty" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="EditColumn" runat="server" Width="30" PinAllColumns="false"
AutoWidthComponent="false" OverOnly="true" Text="Edit" Sortable="False">
<Component>
<ext:Button ID="EditButton" runat="server" ToolTip="Pin Editors" Icon="Pencil" AllowDepress="true"
EnableToggle="true" Width="25">
<Listeners>
<Toggle Fn="pinEditors" />
</Listeners>
</ext:Button>
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="DeleteColumn" runat="server" Width="30" PinAllColumns="false"
AutoWidthComponent="false" OverOnly="true" Text="Delete" Sortable="False">
<Component>
<ext:Button ID="DeleteButton" runat="server" ToolTip="Delete Milestone" Icon="Delete"
AllowDepress="true" EnableToggle="false" Width="25">
<Listeners>
<Click Handler="#{MilestonesGridStore}.remove(this.parentMenu.dataRecord)" />
</Listeners>
</ext:Button>
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Single">
<Listeners>
<Select Handler="#{DeleteMilestoneGridButton}.enable();" />
<Deselect Handler="if (!#{MilestonesGridPanel}.selModel.hasSelection()) {
#{DeleteMilestoneGridButton}.disable();
}" />
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>
<Buttons>
<ext:Button ID="AddtoMilestoneGridButton" runat="server" Text="Insert" Icon="Add">
<Listeners>
<Click Handler="#{MilestonesGridStore}.insert(0, {}); #{MilestonesGridPanel}.editingPlugin.startEditByPosition({row:0, column:0});" />
</Listeners>
</ext:Button>
<ext:Button ID="DeleteMilestoneGridButton" runat="server" Text="Delete" Icon="Delete"
Disabled="true">
<Listeners>
<Click Handler="#{MilestonesGridPanel}.deleteSelected();
if (!#{MilestonesGridPanel}.hasSelection()) {
#{DeleteMilestoneGridButton}.disable();
}" />
</Listeners>
</ext:Button>
<ext:Button ID="RefreshMilestonesGridButton" runat="server" Text="RefresH" Icon="Reload">
<Listeners>
<Click Handler="#{MilestonesGridStore}.load();" />
</Listeners>
</ext:Button>
<ext:Button ID="SaveMilestoneGridButton" runat="server" Text="Save" Icon="Disk">
<Listeners>
<Click Handler="#{MilestonesGridStore}.sync();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:GridPanel>
When laying out a group, the Windows Ribbon Framework supports some predefined layouts. One of the layouts, which requires four buttons is called FourButtons.
This layout supports 3 different sizes, Large, Medium, and Small. In each case it gives the layouts:
Large:
Medium:
Small:
Right now i am using the FourButtons predefined template in my xml file as:
<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://schemas.microsoft.com/windows/2009/Ribbon">
...
<Application.Views>
<Ribbon>
...
<Ribbon.Tabs>
<Tab CommandName="tabHome">
<Group CommandName="grpActivity" SizeDefinition="FourButtons">
<Button CommandName="cmdStartWorking" />
<Button CommandName="cmdStopWorking" />
<Button CommandName="cmdPrint" />
<Button CommandName="cmdDuplicateTicket" />
</Group>
</Tab>
</Ribbon.Tabs>
</Ribbon>
</Application.Views>
</Application>
And you can see the line
<Group CommandName="grpActivity" SizeDefinition="FourButtons">
which specifies the FourButtons layout template.
And my layout is FourButtons:
Except i don't want FourButtons layout, i want "Four Buttons, Two Big Two Small".
In the same way that there is ThreeButtons-OneBigAndTwoSmall:
And there is a FiveButtons:
i want a FourButtons-TwoBigTwoSmall, which i can manually mockup:
Unfortunately declarative programming that Microsoft invented for creating custom layouts confounds me as a programmer.
Can anyone decipher the declarative language example at the bottom of the page and come up with a FourButton-TwoBigTwoSmall template?
Note: All the pretty graphics, formatting, links, and stuff are used to attract squirrels - who love shiny graphics. And if you actually read this far i could actually use your help.
you should use BigButtonsAndSmallButtonsOrInputs SizeDefinition
e.g.
<Group CommandName="cmdGroupBatch" SizeDefinition="BigButtonsAndSmallButtonsOrInputs">
<ControlGroup>
<Button CommandName="cmdButtonGetBatch" />
<Button CommandName="cmdButtonPutBatch" />
</ControlGroup>
<ControlGroup>
<Button CommandName="cmdButtonSaveBatch" />
<Button CommandName="cmdButtonDiscartBatch" />
</ControlGroup>
</Group>
Just check, if your Group has Size="Large" in your Tab.ScalingPolicy.
i eventually did figure it out.
First is the control map, which mandates that the group have (in this case) four buttons. By having four entries in the ControlNameMap we mandate that the group using this size definition actually has four buttons.
<ControlNameMap>
<ControlNameDefinition Name="button1"/>
<ControlNameDefinition Name="button2"/>
<ControlNameDefinition Name="button3"/>
<ControlNameDefinition Name="button4"/>
</ControlNameMap>
The four buttons are given aliases:
button1
button2
button3
button4
so that they can be referenced in the definitions to follow. First is the Large template:
<GroupSizeDefinition Size="Large">
<ControlSizeDefinition ControlName="button1" ImageSize="Large" IsLabelVisible="true" />
<ControlSizeDefinition ControlName="button2" ImageSize="Large" IsLabelVisible="true" />
<ColumnBreak ShowSeparator="true"/>
<ControlSizeDefinition ControlName="button3" ImageSize="Large" IsLabelVisible="true" />
<ControlSizeDefinition ControlName="button4" ImageSize="Large" IsLabelVisible="true" />
</GroupSizeDefinition>
which causes two large buttons, a separator, and another 2 large buttons.
The medium template:
<GroupSizeDefinition Size="Medium">
<ControlSizeDefinition ControlName="button1" ImageSize="Large" IsLabelVisible="true" />
<ControlSizeDefinition ControlName="button2" ImageSize="Large" IsLabelVisible="true" />
<ColumnBreak ShowSeparator="true"/>
<Row>
<ControlSizeDefinition ControlName="button3" ImageSize="Small" IsLabelVisible="true" />
</Row>
<Row>
<ControlSizeDefinition ControlName="button4" ImageSize="Small" IsLabelVisible="true" />
</Row>
</GroupSizeDefinition>
causes two large buttons, a separator, and then two rows (with each row containing one small button).
The small template:
<GroupSizeDefinition Size="Small">
<Row>
<ControlSizeDefinition ControlName="button1" ImageSize="Small" IsLabelVisible="true" />
<ControlSizeDefinition ControlName="button3" ImageSize="Small" IsLabelVisible="false" />
</Row>
<Row>
<ControlSizeDefinition ControlName="button2" ImageSize="Small" IsLabelVisible="true" />
<ControlSizeDefinition ControlName="button4" ImageSize="Small" IsLabelVisible="false" />
</Row>
</GroupSizeDefinition>
causes two rows, of two small buttons in each, to appear.
Bringing it all together:
<Group CommandName="grpActivity" >
<SizeDefinition>
<ControlNameMap>
<ControlNameDefinition Name="button1"/>
<ControlNameDefinition Name="button2"/>
<ControlNameDefinition Name="button3"/>
<ControlNameDefinition Name="button4"/>
</ControlNameMap>
<GroupSizeDefinition Size="Large">
<ControlSizeDefinition ControlName="button1" ImageSize="Large" IsLabelVisible="true" />
<ControlSizeDefinition ControlName="button2" ImageSize="Large" IsLabelVisible="true" />
<ColumnBreak ShowSeparator="true"/>
<ControlSizeDefinition ControlName="button3" ImageSize="Large" IsLabelVisible="true" />
<ControlSizeDefinition ControlName="button4" ImageSize="Large" IsLabelVisible="true" />
</GroupSizeDefinition>
<GroupSizeDefinition Size="Medium">
<ControlSizeDefinition ControlName="button1" ImageSize="Large" IsLabelVisible="true" />
<ControlSizeDefinition ControlName="button2" ImageSize="Large" IsLabelVisible="true" />
<ColumnBreak ShowSeparator="true"/>
<Row>
<ControlSizeDefinition ControlName="button3" ImageSize="Small" IsLabelVisible="true" />
</Row>
<Row>
<ControlSizeDefinition ControlName="button4" ImageSize="Small" IsLabelVisible="true" />
</Row>
</GroupSizeDefinition>
<GroupSizeDefinition Size="Small">
<Row>
<ControlSizeDefinition ControlName="button1" ImageSize="Small" IsLabelVisible="true" />
<ControlSizeDefinition ControlName="button3" ImageSize="Small" IsLabelVisible="false" />
</Row>
<Row>
<ControlSizeDefinition ControlName="button2" ImageSize="Small" IsLabelVisible="true" />
<ControlSizeDefinition ControlName="button4" ImageSize="Small" IsLabelVisible="false" />
</Row>
</GroupSizeDefinition>
</SizeDefinition>
<Button CommandName="cmdStartWorking" />
<Button CommandName="cmdStopWorking" />
<Button CommandName="cmdPrint" />
<Button CommandName="cmdDuplicateTicket" />
</Group>