I'm developing a web app using sencha touch and I'm using sencha architect, I want to add a condition to my list itemtpl to view difference in customer's balance:
balance>=0 --> green
balance<0 --> red
This is my basic itemtpl:
<table width="100%"><tr>
<td>{c_name}</td>
<td width="95px">
<div style="width:95px;height:100%;background:#088cfc;text-align:center;color:#fff;">{balance}</div>
</td>
</tr>
</table>
How can I add xtemplate using sencha architect IDE and link it to my list?
thank you,
Old question but I wanted an answer to the same problem when dealing with how to "Use an XTemplate in Architect" which is what the title states and the Answer given does not actually show a beginning user an answer on how to do this in Architect in my opinion.
So the steps are:
So add your component to the Architect canvas or within what ever component you are using.
Next go to the Configs list and find the entry for 'Process Config' and click the plus sign
next you will get a function that allows you to update and process any of the current Config settings or add your own. My function is called 'processMyView' (I am using a dataview for my example, ergo the name)
add some javascript that creates the 'tpl'
ensure you return the 'config' parameter at the end of the function
In my example I had a list of Documents with title and owner and so the end result will look like this.
In the end anytime you are being frustrated by Architect, this may be one of the approaches you can take to get around the IDE's rigidity for a Config setting.
I'm actually using XTemplate in architect just use > and < instead of '<' and '>' in your condition:
if balance>0 ==> use: if balance > 0 see below:
<table width="100%"><tr>
<td>{c_name}</td>
<td width="95px">
<tpl if="balance > 0">
<div style="border-radius:5px;;width:95px;height:100%;background:#088cfc;text-align:center;color:#fff;font-size:12px;height:23px;padding-top:4px;">{balance} ₪</div>
</tpl>
<tpl if="balance < 0">
<div style="border-radius:5px;;width:95px;height:100%;background:#f00;text-align:center;color:#fff;font-size:12px;height:23px;padding-top:4px;">{balance} ₪</div>
</tpl>
</td>
</tr>
</table>
Related
Actually I was doing angular migration from angularjs to angular 10. While doing the upgrade we are facing an issue with this data-link binding. keep getting the error
Can't bind to 'data-link' since it isn't a known property of 'td'
Actually they were building a grid(table structure) in the UI, It's row click will navigate to some other page, the whole row will act as a hyperlink and they were passing the clicked cell information to the next page.
Following is the angularjs code which we needs to convert to angular 10.
<tr ng-repeat="data in vm.responseData" ng-click="vm.goToSummary(data,this)">
<td data-link="{{data.Description}}">
<span ng-bind="data.Description"
data-link="{{data.Description}}">
</span>
</td>
<td data-link="{{data.Description + 'propA'}}">
<div data-link="{{data.Description + 'propA'}}" >{{data.propA}}</div>
<span data-link="{{data.Description + 'propA_' + 'Priority'}}">{{data.propACount}}</span>
</td>
<td data-link="{{data.Description + 'propB'}}">
<div data-link="{{data.Description + 'propB'}}" >{{data.propB}}</div>
<span data-link="{{data.Description + 'propB_' + 'Priority'}}">{{data.propBCount}}</span>
</td>
</tr>
Can someone help me to identify how to use data-link binding in angular, or how to resolve this error. will also be helpful if someone can tell what's the role of data-link link in the above code.
In my case I was migrating a code from jQuery so the original:
data-sentence="mydata"
changes to:
data-sentence="{{oracion.oracion}}"
As it works, for specific data attribute you should bracket the attribute and add attr.
But the following does't work:
[attr.data-sentence]="{{oracion.oracion}}"
So you need to convert it to:
[attr.data-sentence]="oracion.oracion"
But in consideration I think is better rethink the functional system of this in consideration the attribute could not be useful since you can keep the data in the angular controller (component)
I am displaying Errors on my Html page using Angular JS. The problem is I am receiving only error codes from the HTML . What are the various ways in which i can change the error code to the the Error text i like
<table>
<tr ng-repeat='item in errorsd'>
<td align="left" class="validationMsg"> {{item.message}}</td></tr>
</table>
If my item.message has one . I would like to display Beginner ,if its 2 Intermediate like that and so on . Should i use ng-if ? should i use ng-switch or should i input some logic on the controller side .
Should i use ng-if ?
ng-switch is more readable and hence a better option. Later when you look back at the code it will be intuitive to you and other developers about what this code does.
should i input some logic on the controller side .
Why put a logic in controller-side if the framework already provides a solution for such use-case?
I would do it like:
<table>
<tr ng-repeat='item in errorsd'>
<td ng-switch="item.message" align="left" class="validationMsg">
<span ng-switch-when="1">Beginner</span>
<span ng-switch-when="2">Intermediate</span>
<!-- and so on.. -->
</td>
</tr>
</table>
I say use a switch statement inside of your controller.
So depending on the value, the global message would change thus displaying the correct one when triggering the validation msg box to show.
Basically I am attempting to do is allow the user to choose to show dollar formatting or not. Easy enough, just use ng-class to toggle the class, right? Except that now in empty cells a dollar sign shows.
What about if we use a custom filter? Well, I don't really know a way to toggle the custom filter on or off.
Any suggestions would be helpful.
Here is the button that toggles the formatting (it runs a function that sets format to true or false).
<button class="btn format-toggle" ng-click="setFormat();">Show <span ng-show="format">Hours</span><span ng-hide="format">Dollars</span></button>
The code that I'm trying to affect
<table>
<tr ng-repeat="project in projects">
<td>{{project.name}}</td>
<td ng-repeat="month in project.months" ng-class="{dollar : format}">{{month.total}}</td>
</tr>
</table>
I actually answered my own question but I suppose I'll leave it up in case someone else finds it useful.
I ended up just using ng-class along with another condition to check that there was a value in the cell.
<td ng-repeat="month in project.months" ng-class="{dollar : format && month !== undefined}">{{month.total}}</td>
CSS:
.dollar:before{
content:'$';
}
<td id="ext-gen383" class="x-toolbar-cell">
<table id="ext-comp-1144" class="x-btn x-btn-icon" cellspacing="0">
<tbody class="x-btn-small x-btn-icon-small-left">
<tr>
<tr>
<td class="x-btn-ml">
<td class="x-btn-mc">
<em class=" x-unselectable" unselectable="on">
**<button id="ext-gen384" class="x-btn-text x-tbar-page-last" type="button">** </button>
</em>
I tried to click the button. Please see the html above. Tried so many ways.
eg:
//*[contains(#class,'x-btn-text x-tbar-page-last')] or
//button[contains(#class,'x-btn-text x-tbar-page-last')]
But still not working.
I'm guessing that only the number at the end is generated. Try:
By.cssSelector("em.x-unselectable > button[id^='ext-gen']")
Also, looking at that <em>, are you sure that that class isn't making the button NOT clickable? By the name, it looks like it disables clicks.
Its hard to tell without seeing the full html of the page. Since ExtJS generates random ids, there really are not any good properties to use for finding the element.
I would recommend just using an XPath, and then use an index (if your page has multiple button elements):
//button[1]
And adjust the index accordingly until you get the correct button to click.
Likewise, you could use the WebDriver API for driver.findElements, which will return a collection of all matching items, and then you could apply the index to that collection to get the correct button.
I am developing a application in which one of my template renders a table with n number of rows. Now in each row, i have a column with buttons like edit and delete.
When clicked on edit, a edit form appears in the same window in some div. That form needs to be populated with values fetched from backend.
Now nothing great in this.
My problem is this:
I have a view which renders the complete table using the following template structure:
<script type="text/template" id="ledgersing">
<div class="span6 widget">
<div class="widget-header">
<span class="title">Ledgers</span>
<button class="btn btn-danger pull-right" id="addLedgerButton">Add Ledger</button>
</div>
<div class="widget-content">
<table width="100%" class="table table-striped dataTable">
<thead>
<tr><th>Name</th><th>Email</th><th>Phone</th><th>Action</th></tr>
</thead>
<tbody>
<% _.each(ledgers,function(data){ %>
<tr>
<td><%= data.name %></td>
<td><%= data.email %></td>
<td><%= data.contact_number %></td>
<td><span onClick="alert(<%= data.id %>)">x</span></td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div >
</script>
In this it just alerts a id when clicked on x. Now do i need to necessarily use onClick event like this? I mean that i will need the id in whatever construct i use for processing. What can be a better solution? I know backbonejs can handle this mess with ease if application is structured properly.
So essentially i want to know from experts, what will they do in such a scenario. How will they structure the application? I am novice to this frontend framework.
Instead of using _.each in your templates, I'd go with one view per table row as each one has some bit of complexity (edit, delete)
In these view, you use the events hash to register your DOM events. Never use onclick in your HTML, this is a really bad practice.
Don't hesitate to look at the TodoMVC Backbone example for ideas on how to organize your app.
I'm also developing a backbone application for the first time and went thru exactly the same mistake.
I first I just tried to translate my php / asp / ruby / whatever_server_side_template_technology into underscore templates, and got something pretty much like what you had.
Now I can realize it's a mistake. You should use subviews. The events and the associated model will be connected to that subview. Pretty soon you'll have lots of view listening to events and updating themselves when data changes, but if you're carefull it will be ok.
Here's a demo app I'm working on: https://bb-jugar.rhcloud.com/index.html#Wine
and here's the github repo: https://github.com/opensas/BackboneBootstrap
This is how I solved it: https://github.com/opensas/BackboneBootstrap/blob/master/demoapp/js/src/views/crud/RowsView.js