Override EXTJS Button HTML - extjs

When I generate an EXT.Button, there resulting HTML looks like this:
<table id="ext-comp-1015" cellspacing="0" class="x-btn x-btn-text-icon right-toolbar-top-link x-btn-icon">
<tbody class="x-btn-small x-btn-icon-small-left">
<tr>
<td class="x-btn-tl"><i> </i></td>
<td class="x-btn-tc"></td>
<td class="x-btn-tr"><i> </i></td>
</tr>
<tr>
<td class="x-btn-ml"><i> </i></td>
<td class="x-btn-mc">
<em class="" unselectable="on">
<button type="button" id="ext-gen93" class=" x-btn-text"> </button>
</em>
</td>
<td class="x-btn-mr"><i> </i></td>
</tr>
<tr>
<td class="x-btn-bl"><i> </i></td>
<td class="x-btn-bc"></td>
<td class="x-btn-br"><i> </i></td>
</tr>
</tbody>
</table>
How can I create and pass a template into the button to have it output simply a "button" tag? I am using EXT.js 3.2.1
Thanks,
Jamie


You can get around it by using an Ext.Panel..
new Ext.Panel({
renderTo: 'id-of-element',
html: '<button onclick="alert(\'I was clicked\');">Click Me</button>',
border: false
});

Related

Search on bootstrap table with expanding rows

I have a bootstrap table with expanding rows. Each row can expand into multiple rows, and those can too expand in multiple rows (3 levels in total).
The search does find items on the 3rd level but it doesn't display them correctly.
This is an example code on codepen.
https://codepen.io/anon/pen/gGOOBz
My HTML code is:
<table st-table="displayedCollection" st-safe-src="domains" class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th st-sort="name">Domains</th>
</tr>
<tr>
<th colspan="5"><input st-search="" class="form-control" placeholder="Search ..." type="text" /></th>
</tr>
</thead>
<tbody ng-cloak>
<tr ng-repeat-start="row in displayedCollection">
<td id="package1-{{$index}}" class="accordion-toggle data-exists cursor-pointer" data-toggle="collapse" data-parent="#OrderPackages-{{$index}}" data-target=".packageDetails1-{{$index}}">{{row.name}}
</td>
</tr>
<tr ng-repeat-end>
<td id="package2-{{$index}}" colspan="3">
<div class="accordion-body collapse packageDetails1-{{$index}} + 1">
<table st-table="beansCollection" st-safe-src="types" class="table table-condensed" style="border-collapse:collapse;">
<!--<thead>
<tr>
<th st-sort="name">Types</th>
</tr>
</thead>-->
<tbody>
<tr ng-repeat-start="beanType in row.beans">
<td id="type1-{{$index}}" class="accordion-toggle" data-toggle="collapse" data-parent="#typePackages-{{$index}}" data-target=".typesDetails1-{{$index}}">
{{beanType.name}}
</td>
<td align="right">
<button ng-click="getBeanName(beanType.name, null, beanType)" data-toggle="modal" data-target="#myModal" type="button" class="btn btn-default" ng-if="showButton(beanType.beans)">
Display
</button>
</td>
</tr>
<!---->
<tr ng-repeat-end ng-visible="false">
<td id="typeId2-{{$index}}" colspan="3">
<div class="accordion-body collapse typesDetails1-{{$index}} + 1">
<table class="table table-condensed">
<tbody>
<tr ng-repeat="leafBean in beanType.beans">
<td>
{{leafBean.name}}
</td>
<td align="right">
<button ng-click="getBeanName(beanType.name, leafBean.name, leafBean)" data-toggle="modal" data-target="#myModal" type="button" class="btn btn-default">Display</button>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
I want that when I search something under a certain row it would be displayed with the row above already expanded.
PHOTO:
Say I want to search for TBLEXCHANGEMEMBERSHIPS which is on the 3rd level.
When I input it into the search bar, it finds it but doesn't display it correctly.
What should I do?

how to loop through a table in selenium?

I am new to selenium and I have this question where I need to loop through a table and get the values in that table
<table>
<tr>
<td style="width:5px">
</td>
<td>
<table class="reportTable" id="Allocations">
<tbody>
<tr class="table_header">
<td style="width:5px;">
<img class="HideImage" src="Images/minus.gif" alt="Hide Details">
</td>
<td style="width:33%">
Channel of Trade</td>
<td style="width:33%">
PILOT TRAVEL CENTE-122194-W/S - UNB Contract</td>
<td style="width:33%">
<span id="TruckLoading_10142602_Info" style="COLOR: white;text-decoration:underline;cursor:pointer">
Trucks loading - 0</span>
</td>
</tr>
<tr>
<td style="width:5px;">
</td>
<td colspan="3">
<table rules="rows" class="reportTable" font-family="Tahoma" pagerstyle-visible="False" id="TerminalGrid" border="1">
<tbody>
<tr class="productlabel2" align="left">
<td scope="col" style="width:5px;">
</td>
<td>
Product Details</td>
</tr>
<tr class="hdr2">
<td scope="col" style="width:5px;">
</td>
<td scope="col">
Fuel Type</td>
</tr>
<tr class="FuelTypeHeader">
<td style="width:5px;border:none" onclick="ShowHideDetails(this)">
<img class="HideImage" src="Images/minus.gif" alt="Hide Details" id="Fuel_Img">
</td>
<td style="border-left:none;border-right:none; padding-left:3px">
<table id="C_V" style="width:100%;border-collapse:collapse; border:none; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;">
<tbody>
<tr>
<td style="width:20em;">
<span>
DSL - LSD/ULSD</span>
</td>
<td style="width:60em;">
<span id="CVSpan">
<span style="margin-right:10px">
<span style="float:left;padding-top:3px">
Currently:</span>
<span style="float:left;width:6em;padding-top:2px; margin-left:5px; margin-right:5px;margin-top:2px;padding-bottom:2px; text-align:center; background-color:#00FF00;">
Available</span>
<span style="float:left; padding-top:3px">
<b>
30,839</b>
gallons remaining until Mon 8/1/2016 12:00:00 AM CDT</span>
</span>
</span>
</td>
<td align="right">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="">
<td style="width:5px;">
</td>
<td>
<table id="ProdDetails" rules="all" pagerstyle-visible="False" style="width: 100%" border="1">
<tbody>
<tr class="table_header2">
<th scope="col">
Nominated Volume</th>
<th scope="col">
Allocation Period</th>
<th scope="col">
Allocation %</th>
<th scope="col">
Allocation Start Amt</th>
<th scope="col">
Allocation Lifted</th>
<th scope="col">
Allocation Remaining</th>
<th scope="col">
GPO Allowance</th>
<th scope="col" class="center width8em">
GPO Remaining</th>
<th scope="col">
Category Status</th>
<th scope="col">
Ratability Status</th>
<th scope="col">
Next Scheduled Refresh Date</th>
<th scope="col">
Reference ID</th>
</tr>
<tr class="tablerow2">
<td class="right width8em">
41,118</td>
<td class="center width10em">
Daily</td>
<td class="right">
75%</td>
<td class="right">
30,839</td>
<td class="right">
0</td>
<td class="right">
30,839</td>
<td class="right">
0</td>
<td class="right width8em bold" id="GPO_Rmd">
0
</td>
<td class="center" style="background-color:#00FF00;">
Available</td>
<td class="center" style="background-color:#0099CC;">
Below Trend</td>
<td class="center width20em">
8/1/2016 12:00:00 AM CDT</td>
<td class="center width20emWordWrap">
DSL - LSD/ULSD</td>
</tr>
<tr class="tablerow2">
<td class="right width8em">
287,826</td>
<td class="center width10em">
Weekly</td>
<td class="right">
125%</td>
<td class="right">
359,783</td>
<td class="right">
114,083</td>
<td class="right">
245,700</td>
<td class="right">
0</td>
<td class="right width8em bold" id="GPO_Rmd">
0
</td>
<td class="center" style="background-color:#00FF00;">
Available</td>
<td class="center" style="background-color:#0099CC;">
Below Trend</td>
<td class="center width20em">
8/4/2016 12:00:00 AM CDT</td>
<td class="center width20emWordWrap">
DSL - LSD/ULSD</td>
</tr>
<tr class="tablerow2">
<td class="right width8em">
1,233,540</td>
<td class="center width10em">
Monthly</td>
<td class="right">
115%</td>
<td class="right">
1,418,571</td>
<td class="right">
1,361,264</td>
<td class="right">
57,307</td>
<td class="right">
0</td>
<td class="right width8em bold" id="GPO_Rmd">
0
</td>
<td class="center" style="background-color:#FFFF00;">
Low</td>
<td class="center" style="background-color:#00CC00;">
On Track</td>
<td class="center width20em">
8/1/2016 12:00:00 AM CDT</td>
<td class="center width20emWordWrap">
DSL - LSD/ULSD</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr id="GPO_Row">
<td style="width:5px;">
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="table_header">
<td style="width:5px;" onclick="ShowHideDetails(this)">
<img class="HideImage" src="Images/minus.gif" alt="Hide Details">
</td>
<td style="width:33%">
Channel of Trade</td>
<td style="width:33%">
PILOT TRAVEL CENTE-122194-W/S - UNB Fwrd Cont</td>
<td style="width:33%">
<span id="TruckLoading_17049566_Info" style="COLOR: white;text-decoration:underline;cursor:pointer" onclick="GetTruckLoadingInformationJS(this,17049566);">
Trucks loading - 0</span>
</td>
</tr>
<tr>
<td style="width:5px;">
</td>
<td colspan="3">
<table rules="rows" class="reportTable" font-family="Tahoma" pagerstyle-visible="False" id="TerminalGrid" border="1">
<tbody>
<tr class="productlabel2" align="left">
<td scope="col" style="width:5px;">
</td>
<td>
Product Details</td>
</tr>
<tr class="hdr2">
<td scope="col" style="width:5px;">
</td>
<td scope="col">
Fuel Type</td>
</tr>
<tr class="FuelTypeHeader">
<td style="width:5px;border:none" onclick="ShowHideDetails(this)">
<img class="HideImage" src="Images/minus.gif" alt="Hide Details" id="Fuel_Img">
</td>
<td style="border-left:none;border-right:none; padding-left:3px">
<table id="C_V" style="width:100%;border-collapse:collapse; border:none; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;">
<tbody>
<tr>
<td style="width:20em;">
<span>
DSL - LSD/ULSD</span>
</td>
<td style="width:60em;">
<span id="CVSpan">
<span style="margin-right:10px">
<span style="float:left;padding-top:3px">
Currently:</span>
<span style="float:left;width:6em;padding-top:2px; margin-left:5px; margin-right:5px;margin-top:2px;padding-bottom:2px; text-align:center; background-color:#FF0000;">
Out</span>
<span style="float:left; padding-top:3px">
<b>
0</b>
gallons remaining until Mon 8/1/2016 12:00:00 AM CDT</span>
</span>
</span>
</td>
<td align="right">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="">
<td style="width:5px;">
</td>
<td>
<table id="ProdDetails" rules="all" pagerstyle-visible="False" style="width: 100%" border="1">
<tbody>
<tr class="table_header2">
<th scope="col">
Nominated Volume</th>
<th scope="col">
Allocation Period</th>
<th scope="col">
Allocation %</th>
<th scope="col">
Allocation Start Amt</th>
<th scope="col">
Allocation Lifted</th>
<th scope="col">
Allocation Remaining</th>
<th scope="col">
GPO Allowance</th>
<th scope="col" class="center width8em">
GPO Remaining</th>
<th scope="col">
Category Status</th>
<th scope="col">
Ratability Status</th>
<th scope="col">
Next Scheduled Refresh Date</th>
<th scope="col">
Reference ID</th>
</tr>
<tr class="tablerow2">
<td class="right width8em">
0</td>
<td class="center width10em">
Custom 1 day(s)</td>
<td class="right">
100%</td>
<td class="right">
0</td>
<td class="right">
0</td>
<td class="right">
0</td>
<td class="right">
0</td>
<td class="right width8em bold" id="GPO_Rmd">
0
</td>
<td class="center" style="background-color:#FF0000;">
Out</td>
<td class="center" style="background-color:#0099CC;">
Below Trend</td>
<td class="center width20em">
8/1/2016 12:00:00 AM CDT</td>
<td class="center width20emWordWrap">
MERC-DSL</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr id="GPO_Row">
<td style="width:5px;">
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
I wanted to know how to loop the table so i can get a contracts that's the " PILOT TRAVEL CENTE-122194-W/S - UNB Contract","PILOT TRAVEL CENTE-122194-W/S - UNB Fwrd Cont" and "UNB Spot" along with the data of the table also.
Thanks in advance.

Ok you didn't say nothing about the language you use so i will give you example in C#
//Init table element (in this case by tag name but better chose by id or Name)
IWebElement tableElement = driver.FindElement(By.TagName("table"));
//Init TR elements from table we found into list
IList<IWebElement> trCollection = tableElement.FindElements(By.TagName("tr"));
//define TD elements collection.
IList<IWebElement> tdCollection;
//loop every row in the table and init the columns to list
foreach(IWebElement element in trCollection)
{
tdCollection = element.FindElements(By.TagName("td"));
//now in the List you have all the columns of the row
string column1 = tdCollection[0].Text;
string column2 = tdCollection[1].Text;
...
}
if you use other language just change the syntax the logic is the same.

nested ng-tables with common filtering and sorting

I am trying to found how i can have a table with nested table or second level data. With ng-repeat-start i create the desired ui result but i can't do sorting and filtering in nested data
html code is :
<table ng-table="list.tableParams"
class="table table-condensed table-bordered table-striped">
<tr ng-repeat-start="row in $data">
<td data-title="'Name'" sortable="'name'" filter="{name: 'text'}">
<span ng-if="row.data.length > 0" class="glyphicon"
ng-class="{ 'glyphicon-chevron-right': !row.hideRows, 'glyphicon-chevron-down': row.hideRows }"
ng-click="row.hideRows=!row.hideRows"></span> {{row.name}}
</td>
<td data-title="'Age'" filter="{age: 'number'}">{{row.age}}</td>
<td data-title="'Money'" filter="{money: 'number'}">{{row.money}}</td>
<td data-title="'Country'" filter="{ country: 'select'}"
filter-data="list.countries">{{row.country}}</td>
</tr>
<tr ng-hide="!row.hideRows" ng-repeat="sub in row.data">
<td style="padding-left: 50px" filter="{name: 'text'}">{{sub.name}}<br />
<td>{{sub.age}} members</td>
<td>{{sub.money}}</td>
<td>{{row.country}}</td>
</tr>
<tr ng-repeat-end></tr>
and my data and table params are :
vm.simpleList =[{"name":"Karen","age":45,"money":798,"country":"Czech Republic",
data:[{"name":"lala","age":59,"money":523,"country":"American Samoa"},
{"name":"aaa","age":56,"money":540,"country":"Canada"},
{"name":"Cat","age":57,"money":746,"country":"China"},
{"name":"Christian","age":59,"money":572,"country":"Canada"},
{"name":"Tony","age":60,"money":649,"country":"Japan"},
{"name":"Cat","age":47,"money":675,"country":"Denmark"}]},
{"name":"Cat","age":49,"money":749,"country":"Czech Republic"},
{"name":"Bismark","age":48,"money":672,"country":"Denmark"},
{"name":"Markus","age":41,"money":695,"country":"Costa Rica"},
{"name":"Anthony","age":45,"money":559,"country":"Japan"},
{"name":"Alex","age":55,"money":645,"country":"Czech Republic"},
{"name":"Stephane","age":57,"money":662,"country":"Japan"},
{"name":"Alex","age":59,"money":523,"country":"American Samoa"},
{"name":"Tony","age":56,"money":540,"country":"Canada"},
{"name":"Cat","age":57,"money":746,"country":"China"},
{"name":"Christian","age":59,"money":572,"country":"Canada"},
{"name":"Tony","age":60,"money":649,"country":"Japan"},
{"name":"Cat","age":47,"money":675,"country":"Denmark"},
{"name":"Stephane","age":50,"money":674,"country":"China"},
{"name":"Markus","age":40,"money":549,"country":"Portugal"},
{"name":"Anthony","age":53,"money":660,"country":"Bahamas"},
{"name":"Stephane","age":54,"money":549,"country":"China"},
{"name":"Karen","age":50,"money":611,"country":"American Samoa"},
{"name":"Therese","age":53,"money":754,"country":"China"},
{"name":"Bismark","age":49,"money":791,"country":"Canada"},
{"name":"Daraek","age":56,"money":640,"country":"Costa Rica"},
{"name":"Tony","age":43,"money":674,"country":"Canada"},
{"name":"Karen","age":47,"money":700,"country":"Portugal"},
{"name":"lala","age":0,"money":0,"country":null}];
vm.tableParams = new NgTableParams({
sorting: {name: "asc"},
count: 5
}, {
counts: [],
dataset: vm.simpleList
});
I can't found anywhere an example or a way to do that. If i have nested tables like this :
<table ng-table="list.tableParams">
<tr ng-repeat-start="row in $data">
<!-- td's -->
<td data-title="'Name'" sortable="'name'" filter="{name, data.name: 'text'}">
<span ng-if="row.data.length > 0" class="glyphicon"
ng-class="{ 'glyphicon-chevron-right': !row.hideRows, 'glyphicon-chevron-down': row.hideRows }"
ng-click="list.createNestedTable(row)"></span> {{row.name}}
</td>
<td data-title="'Age'" filter="{age: 'number'}">{{row.age}}</td>
<td data-title="'Money'" filter="{money: 'number'}">{{row.money}}</td>
<td data-title="'Country'" filter="{country: 'select'}"
filter-data="list.countries">{{row.country}}</td>
</tr>
<tr ng-repeat-end ng-hide="!row.hideRows" >
<td>
<table ng-table="list.tableParams2">
<tr ng-repeat="sub in $data">
<td style="padding-left: 50px" filter="{name: 'text'}" sortable="'name'">{{sub.name}}<br />
<td filter="{age: 'number'}" sortable="'age'">{{sub.age}}</td>
<td filter="{money: 'number'}" sortable="'money'">{{sub.money}}</td>
<td filter="{country: 'select'}" sortable="'country'">{{row.country}}</td>
</tr>
</table>
</td>
</tr>
</table>
How can i make filtering in both columns name and data.name (nested data) from the common external filtering? Something like that : filter="{name, data.name: 'text'}"

Bootstrap collapse close other on click

I am using ng-repeat from AngularJS in a table.
When I click on a row, there is data that appears just below this row.
The problem is that when I click on another row while one is already expanded, both are expanded.
I would like to close the first one and expand the second one.
HTML
<div id="accordion">
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-10">Name</th>
<th class="col-md-1">Collateral</th>
<th class="col-md-1"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="pack in packages | filter:search" id="row">
<td data-toggle="collapse" data-target="#collapse{{$index}}" data-parent="#accordion" ng-click="expand(pack)">{{pack.name}}</td>
<td><button class="btn btn-info"><span class="glyphicon glyphicon-open-file"></span></button></td>
<td><input type="radio" ng-model="$parent.selectedPackage" ng-value="pack" /></td>
</tr>
<tr ng-repeat-end>
<td colspan="3">
<div class="collapse" id="collapse{{$index}}">
<table class="table">
<tbody>
<tr>
<td>{{indication}}</td>
</tr>
<tr ng-repeat="bb in bananas">
<td>{{bb.name}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>

first you don't need of unique id for it... Just try with https://github.com/angular-ui/bootstrap/tree/master/src/collapse or in your case maybe: https://github.com/angular-ui/bootstrap/tree/master/src/accordion
Good Luck.

Angular - how to use ng-repeat value as variable

I'm trying to leverage "column" as a number and re-use it to define the "colspan" in the following "td".
<table>
<tr>
<td ng-repeat="column in columns">
{{column}}
</td>
<td colspan="column">
Something
</td>
</tr>
</table>

Not sure if thats what you meant but you can try the following:
<table>
<tr>
<td ng-repeat-start="column in columns">
{{column}}
</td>
<td ng-repeat-end colspan="{{column}}">
Something
</td>
</tr>
</table>

Resources