I have created a table with few columns getting data from Odata and i have created another column will have just check box.
My Code is
var oTable = new sap.ui.table.Table("Brand",{
title: "Brand List",
// visibleRowCount: 10,
//firstVisibleRow: 3,
selectionMode: sap.ui.table.SelectionMode.None,
navigationMode: sap.ui.table.NavigationMode.Paginator,
fixedColumnCount: 10,
width:"700px"
});
oTable.addColumn(new sap.ui.table.Column({
// visible: false,
label: new sap.ui.commons.Label({text: "Country"}),
template: new sap.ui.commons.TextView().bindProperty("text", "COUNTRY_ID"),
sortProperty: "COUNTRY_ID",
filterProperty: "COUNTRY_ID",
flexible : false,
width:"1px"
}));
//Define the columns and the control templates to be used
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Brand"}),
template: new sap.ui.commons.TextView().bindProperty("text", "BRAND"),
sortProperty: "CUSTOMER",
filterProperty: "CUSTOMER",
width:"250px"
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "2013",textAlign:"Center"}),
template: new sap.ui.commons.CheckBox().bindProperty("checked","checked"),
sortProperty: "checked",
filterProperty: "checked",
width: "100px",
hAlign: "Center"
}));
It works fine when the table length is 10 ( defined in the table creation statement). But if my brand list is more than 10 ( some times it can be more than 100) , still the no. of check boxes is created is 10. so in the table if go to next page (paginator mode ) , the check boxes are still the same.
So if i select a brand in first page and select a brand in third page , the check box remains same. Its not creating check boxes except for the first page.
Please help me on this issue.
Thanks
Sathish
Attempt 2. This time, I'll try answer the question. Sathish, it appears as though your model does not account for the checkbox property. Your OData service is returned data to you (using JSON notation for simplicity) like this:
data : [{
"COUNTRY_ID" : "USA",
"BRAND" : "Nike"
},{
"COUNTRY_ID" : "GER",
"BRAND" : "Adidas"
},{
"COUNTRY_ID" : "ITA",
"BRAND" : "Lotto"
}]
But you are using the returned model as if there is a third property in each object, named 'checked'. E.g.
data : [{
"COUNTRY_ID" : "USA",
"BRAND" : "Nike",
"checked" : false
},{
"COUNTRY_ID" : "GER",
"BRAND" : "Adidas",
"checked" : false
},{
"COUNTRY_ID" : "ITA",
"BRAND" : "Lotto",
"checked" : false
}]
If this property is not part of the model, then you effectively have nothing to bind your checkbox to. Because the property does not exist in the model, the check box column is not bound to anything. When the table is initialised to 10 rows, that is the number of checkbox controls you've created, no more. Once you begin paginating, the number rows never changes, but the pagination binds the next 10 rows of your OData dataset to the table rows and columns. Because the dataset doesn't contain the property 'checked' (my assumption), the column listing the checkboxes is not rebound to the model's data, thus the checked checkboxes never change.
I would suggest you do one of two things - update the OData service to include this additional property (checked), and bind the checkbox column to that property, or two, copy the model data to a new model, add the 'checked' property to each object in the collection, and then bind your table to this new model. Either way, you need to ensure that the model has a property to which you can bind the checkboxes.
This link to an editable Table control demonstrates the principal I'm referring to:
Editable Table control
In this example, the author is making a table editable by using the 'editable' property in each object in his collection. This property, which exists for every entry in the model's data, is bound to the TextField control in the table's second column.
template: new sap.ui.commons.TextField({
value: '{lname}',
editable: '{edit}' // Binding editable property of text field to 'edit' attribute of Model
}),
You'll need to do something very similar, but for the Checkbox, ensuring the model has a property to bind to.
Good luck.
sencha touch select field change event not firing if store has duplicate names
suppose my data looks like
options: [{
text: 'Sencha Touch',
value: 'extjs'
}, {
text: 'Sencha Touch',
value: 'senchatouch'
}, {
text: 'Sencha Animator',
value: 'animator'
}, {
text: 'Sencha Designer',
value: 'designer'
}], // options
for the above code the change event not fired for same text
help me?
change event only fires when the new value is actually different from the old value. Not just for select fields, but for all field.
Am having a problem with the following selectfield on my form:
{
xtype: 'selectfield',
label: 'Title',
displayField: 'ItemName',
valueField: 'Id',
listeners: {
initialize: function () {
var titleStore = Ext.create('MyApp.store.Titles', {});
this.setStore(titleStore);
}
}
},
On the form which uses the selectfield, whenever I select the option the form updates correctly, but the first item in the list always has a check mark against it. Also when selecting the first item in the list never updates the form. My knowledge of ST is limited but surely this should work out of the box?
Any ideas why this isn't working?
This was down to a silly error. The data coming from the server had identical 'Id' values, so when an item in the list was selected it had the same value as the rest of the items. The select field would then just show the first item that matched the 'Id' value which would be the first in the list.
I have a button:
{
xtype:'button',
text:'2',
ui: 'orange',
style: 'font-size:14px;',
height:20
}
I want the text of the button to be loaded dynamically depending on the number of priority values in the store.
If the priority value is 0 for ten values i want the button text as 10. Can anyone help me regarding this?
You need to use setText() method of Ext.Button. That will dynamically set the text for your button.
First, set the id property on your button
{
xtype:'button',
text:'2',
id: 'myBtn',
ui: 'orange',
style: 'font-size:14px;',
height:20
}
Then do like this,
if(validCondition) {
Ext.getCmp('myBtn').setText('10');
}
*validCondition is the condition that you want to set before changing the text.
I have Grid with "rowexpander". with this I am able to expand the row, and able to show the content .i.e. html checkbox.
Now my requirement is the in my DB I got the value true or false. So depending upon the value i.e. true I want show check box with checked.
Here is my code.
plugins: [
{
ptype: 'rowexpander',
rowBodyTpl:
['<ul><li><input type="checkbox" name="" checked={marginAccess} ><span>Margin Access for Quote</span></li></ul> ']
}
Now {marginAccess} when is it true I want to show ""
i.e. checked = checked
I am not able to do this, Can you please suggest me ?
Create a virtual member in your model. One which will return 'checked/unchecked' for true/false value of other field. Like this:
{ name: 'marginAccess_str', type: 'string', convert: function(v, r) {
if (r.get('marginAccess'))
return 'checked';
else
return 'unchecked';
}},
And then use marginAccess_str in your template.