Created
August 26, 2014 11:21
-
-
Save Amimul100/86d6005b8ba769cb4a13 to your computer and use it in GitHub Desktop.
List View with nested Child Template in a Child Template...
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Hello, Mauro Parra-Miranda here is the Classic Code that you asked for. | |
| CODE SEGMENT | |
| app.js | |
| var win = Ti.UI.createWindow({backgroundColor: 'white'}); | |
| var sections = []; | |
| var template = { | |
| childTemplates: [ | |
| { | |
| type: 'Ti.UI.View', | |
| class: 'itemContainer' , | |
| properties: { | |
| backgroundColor: "#EEE" | |
| }, | |
| childTemplates: [ | |
| { | |
| type: 'Ti.UI.View', | |
| id: 'iconWrapper' , | |
| properties: { | |
| top:10, | |
| left:15, | |
| height: 60, | |
| width: 60, | |
| backgroundColor: "#fff", | |
| touchEnabled:false | |
| }, | |
| childTemplates: [ | |
| { | |
| type: 'Ti.UI.ImageView', | |
| bindId: 'pic', | |
| id: 'icon' , | |
| properties: { | |
| width: 30, | |
| height: 30 | |
| } | |
| }, | |
| ], | |
| }, | |
| { | |
| type: 'Ti.UI.View', | |
| id: 'detailWrapper' , | |
| properties: { | |
| top:10, | |
| left:85, | |
| height: Ti.UI.FILL, | |
| right: 15, | |
| backgroundColor: "#fff" | |
| }, | |
| childTemplates: [ | |
| { | |
| type: 'Ti.UI.View', | |
| id: 'hiddenView' , | |
| properties: { | |
| backgroundColor: "#0196D7", | |
| touchEnabled:false | |
| }, | |
| childTemplates: [ | |
| { | |
| type: 'Ti.UI.Label', | |
| bindId: 'hiddenLbl', | |
| id: 'hiddenLbl', | |
| properties: { | |
| width:200, | |
| height: Ti.UI.FILL, | |
| color: "#fff", | |
| textAlign:"left", | |
| font: {fontFamily: "Arial", fontSize: 14}, | |
| } | |
| }, | |
| ], | |
| }, | |
| { | |
| type: 'Ti.UI.View', | |
| id: 'detailView' , | |
| properties: { | |
| backgroundColor: "#fff", | |
| left:0, | |
| width: 220 | |
| }, | |
| events: { | |
| }, | |
| childTemplates: [ | |
| { | |
| type: 'Ti.UI.Label', | |
| bindId: 'title', | |
| id: 'title', | |
| properties: { | |
| color: 'black', | |
| font: { fontFamily:'Arial', fontSize: 14, fontWeight:'bold' }, | |
| left: 10, | |
| top: 10, | |
| width: 200 | |
| } | |
| }, | |
| { | |
| type: 'Ti.UI.Label', | |
| bindId: 'subtitle', | |
| id: 'subtitle', | |
| properties: { | |
| color: 'black', | |
| font: { fontFamily:'Arial', fontSize: 10 }, | |
| left: 10, | |
| top: 30, | |
| width: 200 | |
| } | |
| }, | |
| { | |
| type: 'Ti.UI.Label', | |
| bindId: 'meta', | |
| id: 'meta', | |
| properties: { | |
| color: 'gray', | |
| font: { fontFamily:'Arial', fontSize: 10 }, | |
| left: 10, | |
| top: 45, | |
| width: 200 | |
| } | |
| }, | |
| { | |
| type: 'Ti.UI.View', | |
| id: 'buttonWrapper' , | |
| properties: { | |
| width: 40, | |
| height: Ti.UI.FILL, | |
| right:0, | |
| backgroundColor:"#fbfbfb" | |
| }, | |
| events: { | |
| click: function (_evt){ | |
| if(_evt.source.parent){ | |
| var hiddenLbl = _evt.source.parent.parent.children[0].children[0]; | |
| Ti.API.info('click hiddenLbl '+(hiddenLbl)); | |
| hiddenLbl.applyProperties({ | |
| text: "You have added it!", | |
| textAlign: "center" | |
| }); | |
| _evt.source.parent.animate({ | |
| left: 200, | |
| duration: 250 | |
| }, function(){ | |
| _evt.source.parent.parent.parent.animate({ | |
| opacity: 0.0, | |
| duration: 500 | |
| },function(){ | |
| var section = listView.sections[_evt.sectionIndex]; | |
| section.deleteItemsAt(_evt.itemIndex, 1, false); | |
| }); | |
| }); | |
| } | |
| } | |
| }, | |
| childTemplates: [ | |
| { | |
| type: 'Ti.UI.Label', | |
| bindId: 'rightButton', | |
| id: 'rightButton', | |
| properties: { | |
| color: "#999", | |
| borderColor:"#999", | |
| borderWidth: 3, | |
| borderRadius:15, | |
| width:30, | |
| height: 30, | |
| font: {fontFamily: "Arial", fontSize: 25}, | |
| textAlign:"center", | |
| touchEnabled: false | |
| } | |
| }, | |
| ], | |
| }, | |
| ], | |
| }, | |
| ], | |
| }, | |
| ], | |
| }, | |
| ] | |
| }; | |
| var listView = Ti.UI.createListView({ | |
| templates: { 'template': template }, | |
| defaultItemTemplate: 'template', | |
| }); | |
| var listSection = Ti.UI.createListSection(); | |
| var ListItem = [ | |
| {title:{text:'Appcelerator'}, subtitle:{text:'Mobile Software'}, meta:{text:'25077 followers'}, hiddenLbl:{text:'Slide >'}, pic:{image:'/images/corejs.png'}, rightButton:{text:'+' },properties: { top:5, | |
| height: 70, | |
| backgroundColor: "#EEE"}}, | |
| {title:{text:'Appcelerator'}, subtitle:{text:'Mobile Software'}, meta:{text:'25077 followers'}, hiddenLbl:{text:'Slide >'}, pic:{image:'/images/corejs.png'}, rightButton:{text:'+' },properties: { top:5, | |
| height: 70, | |
| backgroundColor: "#EEE"}}, | |
| {title:{text:'Appcelerator'}, subtitle:{text:'Mobile Software'}, meta:{text:'25077 followers'}, hiddenLbl:{text:'Slide >'}, pic:{image:'/images/corejs.png'}, rightButton:{text:'+' },properties: { top:5, | |
| height: 70, | |
| backgroundColor: "#EEE"}}, | |
| {title:{text:'Appcelerator'}, subtitle:{text:'Mobile Software'}, meta:{text:'25077 followers'}, hiddenLbl:{text:'Slide >'}, pic:{image:'/images/corejs.png'}, rightButton:{text:'+' },properties: { top:5, | |
| height: 70, | |
| backgroundColor: "#EEE"}}, | |
| {title:{text:'Appcelerator'}, subtitle:{text:'Mobile Software'}, meta:{text:'25077 followers'}, hiddenLbl:{text:'Slide >'}, pic:{image:'/images/corejs.png'}, rightButton:{text:'+' },properties: { top:5, | |
| height: 70, | |
| backgroundColor: "#EEE"}}, | |
| {title:{text:'Appcelerator'}, subtitle:{text:'Mobile Software'}, meta:{text:'25077 followers'}, hiddenLbl:{text:'Slide >'}, pic:{image:'/images/corejs.png'}, rightButton:{text:'+' },properties: { top:5, | |
| height: 70, | |
| backgroundColor: "#EEE"}}, | |
| {title:{text:'Appcelerator'}, subtitle:{text:'Mobile Software'}, meta:{text:'25077 followers'}, hiddenLbl:{text:'Slide >'}, pic:{image:'/images/corejs.png'}, rightButton:{text:'+' },properties: { top:5, | |
| height: 70, | |
| backgroundColor: "#EEE"}}, | |
| ]; | |
| listSection.setItems(ListItem); | |
| sections.push(listSection); | |
| listView.setSections(sections); | |
| win.add(listView); | |
| win.open(); | |
| STEP TO REPRODUCE | |
| Create a new Classic Project. | |
| Copy the Code above to the Project "app.js" file | |
| Create a folder named "images" in the Resource directory | |
| Put the "corejs.png" image to the folder | |
| Run the app in iOS Device | |
| OBSERVED PROBLEM | |
| Click on the "+" sing of any row ( on the right side ) to delete that row. Doing so the row below that, will move upward. | |
| The lower row should come straight to the top, not suppose to flick and then appear. | |
| Thanks. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment