I have the following snippet of code for auto expanding the textarea in sencha touch. I need to cap it out at a set number of rows.
Any ideas?
http://www.senchafiddle.com/#Q9gjN
Wouldn't this be great if it were a nice, easy to use property.
At first I thought it would be the maxRows property but this is just the number of rows to display before the vertical scrollbar appears.
It may be that the only way would be a complicated solution such as this: http://www.codeproject.com/Articles/56392/How-to-Limit-the-Number-of-Lines-and-Characters-in
or
Limiting number of lines in textarea
EDIT: I needed to cap the number of rows in an address to 5 lines.
One approach could be to listen to the keyup event on the textareafield, check for the 'Enter' key and then revert back to previous input.
The approach I have taken is just to add validation to the model, which works great.
{ type: 'format', field: 'Address', message: 'Address cannot be more than 5 lines.', matcher: /^([^\r\n]{0,50}(\r?\n|$)){5}$/ }
The regex restricts saving a record to the store that has more than 5 lines, of more than 50 chars.
Related
I'm trying to display a user's messages in a watchOS app and I'm using a WKInterfaceTable instance to do so.
I would like outgoing messages to be right-aligned and incoming messages to be left-aligned but I can't get it to work. Here is the code I'm using:
let row = mainTable.rowController(at: index) as! MessagesViewTableRowController
row.rowLabel.setText(messageText!)
row.rowLabel.setSemanticContentAttribute(.forceLeftToRight)
if outgoing == 1 {
row.rowLabel.setSemanticContentAttribute(.forceRightToLeft)
}
The line that sets the semantic to right is being executed but it's having no effect on the alignment of the row. Everything is remaining left-aligned.
I figured it out.
The label needed its width to be set to "Relative to Container" with a value of 1. After setting that in the storyboard, my code is working.
In a v-data-table, I have one column with a simple text field, this column containing the text field is sortable. The problem is that when I change the value in the text field, the data is immediately re-sorted and in my case the lines change and in the worst case the line change and the focused input changes too, like in this example: codepen reproduction
For reproduction:
click on the iron header to sort the iron column
change one input
see that the line changed its position and that you're not anymore in the same field
Expected behavior:
sort the iron column
change one input
see that the line didn't change its position and you can keep modify the input
click sort again to reorder the data once you're done.
Is there a way of behaving like in the expected behavior?
Thank you very much for the answers
It looks like you should use a different event on the <v-text-field> component to listen for changes instead of using v-model to bind changes automatically to props.items.iron. Text Field Event Docs here
You could do something like using the blur event so it only updates when your user focuses away from the text field:
<v-text-field
#blur="updateIron"
:rules="[max25chars]"
label="Edit"
single-line
counter
autofocus
></v-text-field>
then in your JS file you'd add a method like this:
methods: {
// ...other stuff here
updateIron(val) {
this.item.iron = val
}
}
Try experimenting with different events to update your values at the appropriate time.
So I found the answer to that, which consist of redefining the header:
I use the slot header.iron in order to redefine a sortIron method only on click : basic demo
What I'll have to do next is to redefine arrows, style, 'asc' and 'desc'
I'm still open to other ways of doing it!
But right now I can follow my wanted behavior which is :
sort the table via the iron column
change one field
press tab, on the next field enter a value
repeat previous step until you're done
finally re-sort the table only by clicking the header
I have to refresh an Enhanced List as i have a "quick search" input field
that should update the list while you type. It does work fine, until I select one of the result rows. Then I move back to the input field and start typing but at that moment, the focus is lost and after every letter I have to click back to the input field.
Any method I found refreshing the grid sets the focus to the first header
cell. This means of course that my input field
looses focus. I cannot type more than 1 char without refocusing the field
:-(
Any idea how to re-render a grid (or enhanced grid) without changing focus?
gridtoc = new dojox.grid.EnhancedGrid({
id: 'gridtocsearch',
store: storetoc,
structure: layout,
class: 'grid',
align: 'center',
keepSelection: true,
plugins: {
filter: true
}
});
Thanks a lot, Monika
can you try like
keepSelection:false
official document says
keepSelection
Defined by dojox.grid.EnhancedGrid
Whether keep selection after sort, filter, pagination etc.
***************** updated answer*****************
take a look at this jsfiddle
http://jsfiddle.net/bnqkodup/520/
I need some help.
I have a server side processed jquery.datatable. One of the columns is a numeric col with values between 0 and 180.
I would like to filter this column with yadcf ranger_number_slider. I set the yadcf like this:
{
column_number: 14,
filter_type: 'range_number_slider',
filter_container_id: 'external_filter_container_ZZ'
}
But I am faced with some problems:
On the first page of the datatable (paging size is 10, number of entries is roundabout 10.000), the values of this specific column are (accidentally) only from 0 to 30. The ranger_number_slider shown in the div "external_filter_container_ZZ" is as shown below:
Ranger-Number-Slider
As you see in the image, the slider is set from 0 on the left side to 30 on the right side. It seems, that the slider doesn´t get all values from the server side processing for this specific column.
Furthermore: If I try to select some values in the slider, the result in the table is always empty, and the slider disappears!
Is anybody able to give some hints for this behaviour?
Thank you very much in advance.
Best regards
BeSt
Not only that its possible, its available on the showcase page - see here, you must do some reading in the docs / showcase (source on github too) and you will find all the needed docs for that, in short: in addition to your table data that is sent form server to client you must provide yadcf with its data as well - populate the yadcf_data_COL_NUM with the relevant data,
aaData:[["Trident", "Internet Explorer 4.0", "Win 95+", "7/24/2015", "1"],…]
draw:"2"
recordsFiltered:6
recordsTotal:57
yadcf_data_0:[{value: "Trident", label: "Trident Eng'"}, {value: "Tasman", label: "Tasman Eng'"},…]
yadcf_data_1:["Nintendo DS browser", "Netscape Browser 8", "All others", "Lynx", "Mozilla 1.6", "Mozilla 1.5",…]
yadcf_data_2:["N800", "Win 95+ / Mac OS 8.6-9.2", "S60", "KDE 3.5", "Win XP SP2+", "KDE 3.3", "OSX.3", "KDE 3.1",…]
yadcf_data_4:["134", "0"] <- this is for range slider filter tips
From showcase docs
//In case that you want to populate your select / auto_complete
filters with values //you have to add to your current JSON the
following attributes yadcf_data_0 / yadcf_data_1 / etc' //where each
attribute contains a list of strings //For example:
//"yadcf_data_0":["KHTML","Webkit","Trident","Misc","Other
browsers","Tasman","Presto","Gecko"],
Using Rebol/View 2.7.7, I'm trying to create a card game based on Nick's Rebol tutorial at: http://re-bol.com/rebol.html#section-10.18. What I want to do though is read the cards from the binary file Nick created, discard some of the data, and use it to layout a tableau of cards, 4 rows of 3 columns, with the 2 center card locations not used.
Here's my code:
protect-system
random/seed now
do %cards.r ;--include the binary card data
the-tableau: [
size 320x480 backdrop 0.170.0
style tabstyle image 80x100 teal
style holdplace box 80x100 coal
across
at 30x20 tc1: tabstyle
tc2: tabstyle
tc3: tabstyle return
at 30x130 tc4: tabstyle
tc100: holdplace
tc5: tabstyle return
at 30x240 tc6: tabstyle
tc200: holdplace
tc7: tabstyle return
at 30x350 tc8: tabstyle
tc9: tabstyle
tc10: tabstyle
]
lc: copy []
lc: [tc1 tc2 tc3 tc4 tc5 tc6 tc7 tc8 tc9 tc10]
deck-cards: copy [] ; The deck holds all of the cards from the binary file
deck-cards-num: copy []
deck-cards-color: copy []
lay: layout the-tableau
foreach [card label num color pos] cards [
dimg: load to-binary decompress (card)
append deck-cards dimg ;feel movestyle
throw-away-label: label
append deck-cards-num num
append deck-cards-color color
throw-away-pos: pos
]
random-card: does [pick deck-cards random length? deck-cards]
foreach c lc [set-face get c deck-cards]
view lay
do-events
But this doesn't show the cards at all. I'm not even sure it's reading the correctly? Where is the problem?
Actually you didn't use the random-card function in your for loop at the end... :-)
foreach c lc [get c set-face get c random-card ]
You note that you are not sure if data was loaded correctly...
here is a simple way to find out... just print/probe the TYPE? of that data
dimg: load to-binary decompress (card)
probe type? dimg
In this case it will print out image! in the console... so yep... that's working. :-)
As an added little detail, I noticed you didn't compensate your random for the "back face" image in the card data (which is at its end), so the random-card function should be fixed like so:
random-card: does [pick deck-cards random (length? deck-cards) - 1] ; - 1 since we don't want the back face to be picked.
You only need 'do-events if the event loop is not started.
View/new does not start the event loop .. but View does
I'm not addressing your actual problem though :(
to make the do-events note clear, I added a little answer here so I can add some inline code....
here is an example where you'd want your do-events to be used.
view/new lay ; display the interface right now. (with no cards)
random-card: does [pick deck-cards random (length? deck-cards) - 1] ; - 1 since we don't want the back face to be picked.
; deal cards with a half second delay.
foreach c lc [f: get c set-face get c random-card wait 0.5]
do-events
here, any code you put after 'DO-EVENTS will be executed once all view windows have closed.
which can be things like tmp file cleanup, save on exit, "save changes" dialogs, etc.
additional note:
While building graphics code, its a good habit to place this at the very start of you application:
print " "
It will open up the console, and then any view windows will show up in front of it.
When ready to share, just comment the line and remove any print statements in your code.
this is useful for 3 things:
1) Its usually highly annoying when the console always pops-up over your application while its tracing (print/probe/etc) some stuff after your window opens.
2) This also has the more useful side-effect of showing you if your application quit correctly since the console will ALSO quit when all waits have terminated correctly.
In your original example, if you add the above print, then you'll see that the console never closes, so this means the application is still running with no more application windows listening to events.
3) It also has the advantage that you can terminate the graphic app directly by closing the console window. This effectively closes all windows and waits immediately and shortcuts any "on application quit" code you might have (code after do-events).