Hi there,
I have developed a combox as specified on the tutorial video, I have added some feature to it in order to apply search inside the combox and to make it open at full width regardless of what parent element the combox is in. I have made some progress but I’m stuck now I can’t full width opening and I have a problem when searching, the page go down a little. How can I make this to work?
Here is my code for now:
<Panel ux:Class="BigCombox">
<object ux:Property="Options" />
<object ux:Property="Selected" />
<Panel ux:Name="Combox" Clicked="{toggleOpen}" Color="#ddd" Margin="10,30,10,10" Alignment="Top">
<Panel ux:Name="header">
<Text Margin="10" Alignment="CenterLeft" Value="{selected.name}"/>
</Panel>
</Panel>
<JavaScript>
var Observable=require("FuseJS/Observable");
var self=this;
var searchString=Observable("");
var isOpen=Observable(false);
var data=self.Options.inner();
var selected=self.Selected.inner();
function toggleOpen(){
isOpen.value=!isOpen.value;
}
function stringContainsString(main,filter){
return main.toLowerCase().indexOf(filter.toLowerCase()) != -1;
}
var filteredItems = data.where(function(e){
return Observable(function() {
return stringContainsString(e.name, searchString.value);
});
});
module.exports={
isOpen,
toggleOpen,
filteredItems:filteredItems.map(function(option){
return {
title:option,
isSelected:Observable(function(){
return selected.value===option;
}),
clicked: function(){
selected.value=option;
if(self.Selected.value instanceof Observable){
self.Selected.value.value=option;
}
isOpen.value=false;
}
}
}),
selected,
searchString
}
</JavaScript>
<WhileTrue Value="{isOpen}">
<Change DataScroll.Visibility="Visible"/>
<Change DataScroll.Y="0" Duration="0.3"/>
<Change Combox.Visibility="Collapsed" Duration="0.5"/>
</WhileTrue>
<Panel Alignment="Top" Y="800" Visibility="Collapsed" Margin="0,10,0,0" ux:Name="DataScroll">
<DockPanel>
<Panel Dock="Top" Margin="0,0,0,0">
<Panel HitTestMode="LocalBounds" Clicked="{toggleOpen}" Height="40">
<DockPanel>
<Text Font="FontAwesome" Margin="10,0,5,0" Color="#4485f4" Dock="Left" FontSize="18" Value="" Alignment="CenterLeft"/>
<Text Dock="Left" Color="#4485f4" FontSize="16" Value="Back" Alignment="CenterLeft"/>
<!--<Panel Dock="Right" Margin="0,0,10,0">
<Text Color="#4485f4" FontSize="16" Value="Done" Alignment="Right"/>
<Rectangle Color="#4485f4" Height="1" Margin="0,-5,0,0" />
</Panel>-->
</DockPanel>
<Clicked>
<Callback Handler="{ShowDDL}"/>
</Clicked>
</Panel>
</Panel>
<Panel Color="#015055" Height="55" Dock="Top" Alignment="Top" Margin="0,0,0,0" Padding="8">
<DockPanel>
<Rectangle Dock="Left" ZOffset="1.0" ux:Name="Container" Width="100%" CornerRadius="8" Height="35" Color="#fff" >
<TextInput Padding="30,0,0,0" ux:Name="SearchTxt" Value="{searchString}" Focus.Gained="{EnterEditMode}" Focus.Lost="{ExitEditMode}">
<WhileFocused>
<Change Container.Width="80%"/>
</WhileFocused>
</TextInput>
<DockPanel>
<Text Value="" Dock="Left" Margin="10,0,0,0" Font="FontAwesome" FontSize="18" Alignment="CenterLeft" Color="#015055"/>
<Text Dock="Left" ux:Name="PlacedTxt" Value="Search" Color="#ccc" FontSize="16" Margin="6,0,0,0" Alignment="CenterLeft"/>
</DockPanel>
</Rectangle>
<Panel Dock="Right" HitTestMode="LocalBounds" Width="70">
<Text Value="Cancel" Alignment="Center" Color="#fff" />
<Rectangle Height="1" Margin="10,0,10,10" Color="#fff" Alignment="Bottom"/>
<Clicked>
<Callback Handler="{Clear}"/>
</Clicked>
</Panel>
</DockPanel>
<WhileTrue Value="{EditMode}">
<Change PlacedTxt.FontSize="11" Duration="0.3"/>
<Change PlacedTxt.Y="-28" Duration="0.3"/>
</WhileTrue>
</Panel>
<ScrollView Dock="Top" Height="600">
<StackPanel ux:Name="dropdown" Margin="15,0,0,120">
<Each Items="{filteredItems}">
<Panel ux:Name="item" HitTestMode="LocalBounds" Clicked="{clicked}">
<Text Margin="20" Value="{title.name}"/>
<Text Value="" Visibility="Hidden" ux:Name="select" Font="FontAwesome" FontSize="16" Margin="0,0,20,0" Alignment="CenterRight" Color="#4485f4"/>
<Rectangle Height="1" Alignment="Bottom" Color="#ccc" />
<WhileTrue Value="{isSelected}">
<Change select.Visibility="Visible"/>
</WhileTrue>
</Panel>
</Each>
</StackPanel>
</ScrollView>
<BottomBarBackground Dock="Bottom"/>
</DockPanel>
</Panel>
</Panel>
Here is My MainView.ux
<App>
<Android.StatusBarConfig Color="#333" IsVisible="False" /><iOS.StatusBarConfig Style="Dark" Animation="Slide" IsVisible="False" />
<JavaScript>
var Observable=require("FuseJS/Observable");
allItems1 = Observable({name: "Apple",Id:1},{name: "Lemon",Id:2},{name: "Pear",Id:3},{name: "Banana",Id:4},
{name: "Conami",Id:5},{name: "Baamia",Id:6},{name: "Delly",Id:7},{name: "Vegit",Id:8},
{name: "Canar",Id:9},{name: "Jonmi",Id:10},{name: "Kontrest",Id:11},{name: "Forest",Id:12},
{name: "Chohco",Id:13},{name: "Seyani",Id:14},{name: "Domni",Id:15},{name: "Fomni",Id:16},
{name: "Quani",Id:15},{name: "Watermello",Id:18},{name: "Pineapple",Id:19},{name: "Banana",Id:20},
{name: "Apple",Id:21},{name: "Lemon",Id:22},{name: "Pear",Id:23},{name: "Banana",Id:24});
allItems2 = Observable({name: "Apple",Id:1},{name: "Lemon",Id:2},{name: "Pear",Id:3},{name: "Banana",Id:4},
{name: "Conami",Id:5},{name: "Baamia",Id:6},{name: "Delly",Id:7},{name: "Vegit",Id:8},
{name: "Canar",Id:9},{name: "Jonmi",Id:10},{name: "Kontrest",Id:11},{name: "Forest",Id:12},
{name: "Chohco",Id:13},{name: "Seyani",Id:14},{name: "Domni",Id:15},{name: "Fomni",Id:16},
{name: "Quani",Id:15},{name: "Watermello",Id:18},{name: "Pineapple",Id:19},{name: "Banana",Id:20},
{name: "Apple",Id:21},{name: "Lemon",Id:22},{name: "Pear",Id:23},{name: "Banana",Id:24});
var SelectNation=Observable({name:"Select Nationality"});
var SelectCity=Observable({name:"Select City"});
SelectNation.onValueChanged(function(newvalue){
console.log("Naiton Id: "+newvalue.Id );
});
SelectCity.onValueChanged(function(newvalue){
console.log("City Id: "+newvalue.Id );
});
module.exports={
allItems1,
allItems2,
SelectCity,
SelectNation
}
</JavaScript>
<StackPanel>
<BigCombox ux:Name="Nation" Options="{allItems1}" Selected="{SelectNation}">
<WhileTrue ux:Name="NationOpen">
<Change City.Visibility="Collapsed" DurationBack="0.8"/>
</WhileTrue>
<Tapped>
<Toggle Target="NationOpen"/>
</Tapped>
</BigCombox>
<BigCombox ux:Name="City" Options="{allItems2}" Selected="{SelectCity}">
<WhileTrue ux:Name="CityOpen">
<Change Nation.Visibility="Collapsed" DurationBack="0.8"/>
</WhileTrue>
<Tapped>
<Toggle Target="CityOpen"/>
</Tapped>
</BigCombox>
</StackPanel>
</App>