I have a settings screen that works quite nicely using the "ProMotion-formotion" gem. I would like to make a couple of the rows into buttons that will call a method when pressed eg:
def table_data
set_nav_bar_button :left, title: "Cancel", action: :close
set_nav_bar_button :right, title: "Save", action: :submit
{sections:[{
title: 'Help',
rows: [{
title: "About",
type: :string,
editable: false,
action: :help #this is the sort of thing I want
}]
}, {
title: 'General',
rows: [
[...etc...]
Anyone know how I can achieve this?
edit: I've found a possible solution here:
How to use .on_delete callback in ProMotion-Formotion
But still wondering if there is a way of doing it within the table_data method.
Figured it out...
{
title: "Any Button",
type: :button,
key: :some_button
}
# later...
form.row(:some_button).on_tap do |row|
# do something when tapped
end
from here:
https://github.com/clayallsopp/formotion/blob/master/LIST_OF_ROW_TYPES.md#button
Related
I want to observe a nested property. I have the following Ember Array:
specifications: [
{
title: "specification name",
filters: [
{
title: "example"
checked: false
},
{
title: "example 2",
checked: true
}
]
},
...
]
I want to create a computed property:
activeFilters: (->
Ember.computed.filterBy('specifications.#each.filters', 'checked', true),
).property('specifications.#each.filters')
The active filters property is not working, I tried several combinations of property methods, but none worked.
Is the property I am trying to create actually possible?
Yes, it is possible. The thing is that for it to work you can't use a JavaScript array, you need an Ember.ArrayProxy and then you can access its special properties: http://emberjs.com/api/classes/Ember.ArrayProxy.html
specifications: Ember.ArrayProxy.create({
content: [
{
title: "specification name",
},
]
});
So, you'll have something like:
oneSpecChangedCheck: function() {
// don't know which, but someone changed
var s = this.get('specs');
// loop and process
return s;
}.property('specs.#each.checked'),
http://emberjs.jsbin.com/zohuzo/2/edit?html,js,console,output
Does igGrid support column edit/new templates?
I have a grid defined as below. But the template won't work when editing/adding a new row.
The "ChooseEmployee" function displays a popup dialog for users to choose employee's from.
$(function() {
var employees = [{
Id: 1,
"Name": "John, Smith",
"DirectReports": "Mary, Ann;David,Lowe"
}, {
Id: 2,
"Name": "Mary, Ann",
"DirectReports": "Kelly,Walsh;Kevin, Edwards;Terri, Gibson"
}];
$('#grid1').igGrid({
dataSource: employees,
primaryKey: "Id",
autGenerateColumns: false,
width: "100%",
columns[{
headerText: "Id",
key: "Id",
dataType: "number",
width: 100
}, {
headerText: "Name",
key: "Name",
dataType: "string",
width: 120
}, {
headerText: "Reports",
key: "DirectReports",
dataType: "object",
width: 300,
template: "<div style='clear:both'><div style='overflow:hidden;white-space:wrap;max-width:320px;width:320px;float:left;'>${DirectReports}</div><input type='button' onclick='chooseEmployees(${Id});' value='...' style='float:left;' /></div>"
}],
features: [ {name: "Updating", enableAddRow: true, editMode: "row" } ]
});
});
<table id="grid1"></table>
Basically you would have to cancel the original row editing that the igGrid is performing and you would have to invoke row updating and row adding programmatically. Also this template will work for rows that already exist, but would not be applied when adding a new row. You can try the Row Edit Template feature of the igGrid as it provides in the box editing dialog. If you want to choose from a list of values for this specific column, then you can use a combo editor provider for this column.
Option for configuring editor provider for the column.
updateRow API method.
addRow API method.
Setting up a row edit template.
Im quite new to rubymotion and Promotion so sorry if the question is a stupid one :) I can't find any information how to manipulate a height of a cell after clicking on it. Somebody knows how to do this? Thanks a lot
class TimeOffsScreen < ProMotion::TableScreen
def table_data
TimeItem.all.map do |item|
{
title: item.name,
action: :open_time_item,
arguments: { item: item },
editing_style: :delete,
height: 90
}
end
end
def open_time_item(item)
# Set height of this table cell
end
end
There isn't a great way to do this currently. One way you can accomplish it is to access the data in your hash and then refresh the table data.
By the way, I noticed a bug in your code. You need to provide an array of sections wrapping your cells.
I've put an example of how to do this here, but you'll need to verify that it does work.
def table_data
#time_items ||= TimeItem.all
[{
cells: #time_items.map do |item|
{
title: item.name,
action: :open_time_item,
arguments: { item: item },
editing_style: :delete,
height: item.height || 90
}
end
}]
end
def open_time_item(item)
item.height = 180 # .height can be a temporary attr_accessor with no persistence
update_table_data
end
Hi StackOverFlow Community,
Well, maybe is theory that I forget read, but I don't stand why this code below don't show me anything. (I already try with another answers in the forum like config height manual and layout fit work but with these layout I can't do what I want).
Code:
Ext.define('myMoney.view.Settings',{
extend: 'Ext.Panel', //--> Ext.Container don't work either
fullscreen: true,
xtype: 'configuracion',
config: {
title: 'Configuracion',
iconCls: 'settings',
scrollable: true,
styleHtmlContent: true,
layout: {
type: 'vbox',
align: 'middle'
},
defaults: {
width: '50%',
height: '50%',
flex:1,
},
items: [
{
xtype: 'list',
itemTpl: '{item}',
data: [
{item: 'Cuentas Actuales'},
{item: 'Agregar nueva Cuenta'},
]
},
]
}
});
The real code have two 'fieldset' before the list but I don't want show you guys a code too long. so, anyone knows what happens?
Usually it is fixed by layout: 'fit' setting. You could add it to the outer fieldset config.
I'm new to Sencha Touch and the Ext JS logic. Actually, I'm displaying a list of items containing two fields (title, type) grouped by default alphabetically by first character of the title and I added a button to a toolbar that I want it to switch the grouping to be by type. I tried to programmatically set the getGroupString function in the buton handler in this way :
var toolbar = new Ext.Toolbar({
dock: 'top',
title: 'Toolbar',
items: [{
text: 'By type',
handler: function() {
MyApp.MyStore.getGroupString = function(record) {
return record.get('type');
};
MyApp.itemsList.update();
}
}]
});
But that seems just to not work. Any help ?
Thanks
Just wanted to close the question as I have already answered it
MyApp.itemsList.refresh();