nested ng-tables with common filtering and sorting - angularjs

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'}"

Related

Get the element using the text in the row in Protractor from nested repeater

I have the table structured below
<table class="table">
<thead>
<tr>
<th class="checkbox-column"></th>
<th class="main-column main-column--checkbox">Name</th>
</tr>
</thead>
<tbody ng-repeat="(a, b) in tests" class="ng-scope" style="">
<tr class="panel__sub-header">
<td>
<input name="item-checkbox" ng-click="toggleSelectAll(a)" type="checkbox">
</td>
<td colspan="4">
<h4 class="ng-binding">ROW2</h4>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.name</a>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.data</a>
</td>
</tr>
</tbody>
<tbody ng-repeat="(a, b) in tests" class="ng-scope" style="">
<tr class="panel__sub-header">
<td>
<input name="item-checkbox" ng-click="toggleSelectAll(a)" type="checkbox">
</td>
<td colspan="4">
<h4 class="ng-binding">ROW1</h4>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.name</a>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.data</a>
</td>
</tr>
</tbody>
</table>
I have got the root table element by using the below answer https://stackoverflow.com/a/41129924/2833311
But failing to get the nested repeater elements.
getSpecificNestedCell: function(tableObject, rowText, nestedTableObj, rowText1, columnCss) {
var ele = element.all(by.repeater(tableObject)).filter(function(rowElement){
return rowElement.element(by.css("td h4")).getText().then(function(text){
return text.indexOf(rowText) !== -1;
});
}).first();
ele = ele.all(by.repeater(nestedTableObj)).filter(function(rowElement1){
return rowElement1.element(by.linkText(rowText1)).getText().then(function(text1){
return text1.indexOf(rowText1) !== -1;
});
}).first().element(by.css('[' + columnCss + ']'));
findObject.waitUntilReady(ele);
return ele; }
Where as,
tableObject ==> (a, b) in tests
rowText ==> ROW2
nestedTableObj ==> test in testData
rowText1 ==> test.data
columnCss ==> ng-click="checkFunction()"
Using the above code I could able to get the element if it has the single row inside the nested repeated, but it was failing to get the element when the nested repeater has the multiple rows
this should give you what you want I believe
function getSpecificNestedCell(tableObject, rowText, nestedTableObj, rowText1, columnCss) {
return element(by.cssContainingText('tbody[ng-repeat="' + tableObject + '"]', rowText))
.element(by.cssContainingText('tr[ng-repeat="' + nestedTableObj + '"]', rowText1))
.element(by.css('[' + columnCss + ']'));
}
Here is the selector I used working

How to get the td element without using row number in protractor

I have the existing method like below,
getSpecificCell: function(tableObject, rowNumber, columnCss) {
var ele = element(by.repeater(tableObject).row(rowNumber)).element(by.css('[' + columnCss + ']'));
return ele;
}
Is that possible to do the same using the row text instead of rowNumber?
Form the below html I need to get the column value without using the row number
HTML sample:
<table class="table">
<thead>
<tr>
<th class="checkbox-column"></th>
<th class="main-column main-column--checkbox">Name</th>
</tr>
</thead>
<tbody ng-repeat="(a, b) in tests" class="ng-scope" style="">
<tr class="panel__sub-header">
<td>
<input name="item-checkbox" ng-click="toggleSelectAll(a)" type="checkbox">
</td>
<td colspan="4">
<h4 class="ng-binding">ROW2</h4>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.name</a>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.data</a>
</td>
</tr>
</tbody>
<tbody ng-repeat="(a, b) in tests" class="ng-scope" style="">
<tr class="panel__sub-header">
<td>
<input name="item-checkbox" ng-click="toggleSelectAll(a)" type="checkbox">
</td>
<td colspan="4">
<h4 class="ng-binding">ROW1</h4>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.name</a>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.data</a>
</td>
</tr>
</tbody>
</table>
You can use filter() method to filter the array of WebElement. have a look at below example,
getSpecificCell: function(tableObject, expectedRowValue, columnCss) {
var ele =element.all(by.repeater(tableObject).filter(function(rowElement){
return rowElement.element(by.css("td h4")).getText().then(function(rowValue){
return rowValue == expectedRowValue;
})
}).first().element(by.‌​css('[' + columnCss + ']'));
return ele;
}

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 Rows (Rowspan?) Within ng-repeat?

The following image is produced by the following code:
<div class="row" ng-show="result">
<div class="col-sm-12">
<table class="table">
<thead>
<tr>
<th>Group</th>
<th>Status</th>
<th>Result</th>
<th>Computations</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="r in result | orderBy:'-WarnResult.Value' | filter: { Status: 'warning'}">
<td>
{
<span ng-repeat="(k, v) in r.WarnResult.Group">
{{k}}={{v}}<span ng-hide="$last">,</span>
</span>
}
</td>
<td ng-bind="r.Status"></td>
<td>
<pre ng-bind="json(r.WarnResult.Value)"></pre>
</td>
<td>
<table class="table table-striped table-condensed">
<tbody>
<tr ng-repeat="c in r.WarnResult.Computations">
<td ng-bind="c.Text"></td>
<td ng-bind="c.Value"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr ng-repeat="r in result | orderBy:'-CritResult.Value' | filter: { Status: 'normal'}">
<td>
{
<span ng-repeat="(k, v) in r.CritResult.Group">
{{k}}={{v}}<span ng-hide="$last">,</span>
</span>
}
</td>
<td ng-bind="r.Status"></td>
<td>
<pre ng-bind="json(r.CritResult.Value)"></pre>
<pre ng-bind="json(r.WarnResult.Value)"></pre>
</td>
<td>
<table class="table table-striped table-condensed">
<tbody>
<tr ng-repeat="c in r.CritResult.Computations">
<td ng-bind="c.Text"></td>
<td ng-bind="c.Value"></td>
</tr>
</tbody>
</table>
<table class="table table-striped table-condensed">
<tbody>
<tr ng-repeat="c in r.WarnResult.Computations">
<td ng-bind="c.Text"></td>
<td ng-bind="c.Value"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I'd like to make it so the the results (The thing in the Pre boxes) lines up with their corresponding computations (The idea is both the WarnResult and CritResult are show when Status is 'normal'). It looks like maybe I want to use rowspan, or maybe something with ng-repeat-start and ng-repeat-stop, but I'm having trouble seeing the solution.
Decided to move the repeat to the tbody, which allows me to have two rows per iteration.
<table class="table">
<thead>
<tr>
<th>Group</th>
<th>Status</th>
<th>Expression</th>
<th>Result</th>
<th>Computations</th>
</tr>
</thead>
<tbody ng-repeat="r in result | orderBy:'-status_number'">
<tr>
<td rowspan="2">
{
<span ng-repeat="(k, v) in r.CritResult.Group">
{{k}}={{v}}<span ng-hide="$last">,</span>
</span>
}
</td>
<td rowspan="2" ng-bind="r.Status"></td>
<td>critical</td>
<td>
<pre ng-bind="json(r.CritResult.Value)"></pre>
</td>
<td>
<table class="table table-striped table-condensed">
<tbody>
<tr ng-repeat="c in r.CritResult.Computations">
<td ng-bind="c.Text"></td>
<td ng-bind="c.Value"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<td>warning</td>
<td>
<pre ng-bind="json(r.WarnResult.Value)"></pre>
</td>
<td>
<table class="table table-striped table-condensed">
<tbody>
<tr ng-repeat="c in r.WarnResult.Computations">
<td ng-bind="c.Text"></td>
<td ng-bind="c.Value"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Override EXTJS Button HTML

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
});

Resources