There are two ways - via client or server method:

===========================================================================================

Class ZENTest.ComboTest2 Extends %ZEN.Component.page
{

/// Load it in Samples Namespace
/// 
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" xmlns:demo="http://www.intersystems.com/zendemo" title="Combobox Test Page">
<hgroup>
<group id="group">
</group>
<spacer width="200"/>
<dataCombo id="dataCombo1"
label="dataCombo1" name="dataCombo1"
editable="true"
  unrestricted="true"
searchKeyLen="0"
choiceColumn="1"
valueColumn="2"
maxRows="10000"
displayColumns="1,4,3"
dropdownWidth="50.0em"
sql="SELECT Name,ID,Title,SSN FROM ZENDemo_Data.Employee ORDER BY Name "
columnHeaders="Name,SSN,Title">
</dataCombo>
</hgroup>
</page>
}

ClientMethod onloadHandler() [ Language = javascript ]
{
   zenSetProp('dataCombo1','value', 'Adam,Lisa H.' );
   ///zenSetProp('dataCombo','value', "Please make a choice." );
}

Method %OnAfterCreatePage() As %Status [ GenerateAfter = %OnAfterCreatePage ]
{
   Set tHolder = %page.%GetComponentById("group")
    set tComp = ##class(%ZEN.Component.dataCombo).%New()
    set tComp.id = "dataCombo"
set tComp.label = "dataCombo"
set tComp.value = "Alton,George D."
/// set tComp.value = "Please make a choice"
set tComp.maxRows="10000"
set tComp.dropdownWidth="50.0em"
set tComp.valueColumn="2"
set tComp.choiceColumn="1"
set tComp.sql = "SELECT Name,ID,Title,SSN FROM ZENDemo_Data.Employee ORDER BY Name"
If $IsObject(tComp) {
Do tHolder.%AddChild(tComp)
}
&js<zen('dataCombo1').executeQuery();>
    Quit $$$OK
}

}
=========================================================================================

To execute load it in Samples namespace:

===========================================================================================

Class ZENTest.ComboTest1 Extends %ZEN.Component.page
{

XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" xmlns:demo="http://www.intersystems.com/zendemo" title="Combobox Test Page">
<hgroup align="center" labelPosition="left">
<dataCombo id="dataCombo"
label="dataCombo" name="dataCombo"
editable="true"
unrestricted="true"
searchKeyLen="3"
dropdownWidth="20.0em">
</dataCombo>
<spacer width="10"/>
<button caption="Refresh" onclick="zenPage.Refresh();" />
<spacer width="10"/>
<button caption="Execute" onclick="zenPage.Execute();" />
</hgroup>
</page>
}

Method Execute() [ ZenMethod ]
{
    Set ctrl= ..%GetComponentById("dataCombo")
    Set ctrl.queryClass="ZENDemo.Data.Employee"
    Set ctrl.queryName="ListEmployees"
    &js<zen('dataCombo').executeQuery('ListEmployees')>
}

Method Refresh() [ ZenMethod ]
{
    Set ctrl= ..%GetComponentById("dataCombo")
    Set ctrl.queryClass=""
    Set ctrl.queryName=""
    &js<zen('dataCombo').executeQuery('')>
}

}
============================================================================================

Filters work exactly this way (take a look at ZENTest.TableTest.cls in Samples namespace), but:

"Filtering works only if the <tablePane> is using an automatically generated SQL statement or an OnCreateResultSet callback"

Here is a similar example:

===============================================================================================

/// Created using the page template: Default
Class VICS.Reports.MZenR2 Extends %ZEN.Component.page
{

/// Class name of application this page belongs to.
Parameter APPLICATION;

/// Displayed name of this page.
Parameter PAGENAME = "MZenR2";

/// Domain used for localization.
Parameter DOMAIN;

/// This Style block contains page-specific CSS style definitions.
XData Style
{
<style type="text/css">
</style>
}

/// This XML block defines the contents of this page.
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="">
<button caption="Run Report" onclick="zenPage.runReport();" />
</page>
}

/// This class method callback is called just before the server-side page
/// object is created.
ClassMethod %OnBeforeCreatePage() As %Status
{
For i = 1:1:9 {
Set list1 = $LB("John","Jack","Jim","Joanne","Jen","Jill","Paul","Will","Roger")
Set list2 = $LB("Adams","Anderson","Allen","Nelson","Jenkins","Rotterman","Emerson","Wilson","Jackson")
s FirstName=$LG(list1,+i)
s LastName=$LG(list2,+i)
s Name=FirstName_" "_LastName
s Company="Alpha "_i
s Email=FirstName_"123@gmail.com"
s PhoneWork="(111) 222 333"_i
s Note="aaaaaaaa"_i
Set ^testMprint1(i) = Name_"|"_Company_"|"_Email_"|"_PhoneWork_"|"_Note_"|"
}
Quit $$$OK
}

ClientMethod runReport() [ Language = javascript ]
{
  var x = zenPage.launchPopupWindow(zenLink('VICS.Reports.MReportPDF2.cls'));
}

}
--------------------------------------------------------------------------------------------------------------------------------------------

Class VICS.Reports.MReportPDF2 Extends %ZEN.Report.reportPage
{

Parameter DEFAULTMODE = "pdf";

/// XML that defines the contents of this report.
XData ReportDefinition [ XMLNamespace = "http://www.intersystems.com/zen/report/definition" ]
{
<report xmlns="http://www.intersystems.com/zen/report/definition"
name='myReport' call="CreateXML">

</report>
}

XData ReportDisplay [ XMLNamespace = "http://www.intersystems.com/zen/report/display" ]
{
<report xmlns="http://www.intersystems.com/zen/report/display" 
  name='myReport' title='HelpDesk Sales Report' style='standard'>
  <pagemaster>
    <masterreference masterReference="first" pagePosition="first">
      <document width="8.5in" height="11in" marginLeft="1.25in" 
        marginRight="1.25in" marginTop="1.0in" 
        marginBottom="1.0in" headerHeight="2.0in"></document>
      <pageheader>
        <p class="banner1">Mumps Zen Report</p>
      </pageheader>
    </masterreference>
    <masterreference masterReference="rest" pagePosition="rest">
      <document width="8.5in" height="11in" marginLeft="1.25in" 
        marginRight="1.25in" marginTop="1.0in" 
        marginBottom="1.0in" headerHeight=".75in"></document>
      <pageheader>
        <table orient="col" layout="fixed" width="6in">
          <item style="text-align:left" value="Mumps Zen Report" />
          <item style="text-align:right" special="page-number-of" />
        </table>
      </pageheader>
    </masterreference>
  </pagemaster>
 <body >
<!-- MAIN REPORT GROUP -->
<group name="PersonGroup">
<table orient="row" width="3in" class="table4" altcolor="#DFDFFF">
        <item field="Name" width="2in">
          <caption value="Name:" width="2in"/>
        </item>
        <item field="Company" width="2in">
          <caption value="Company:" width="2in"/>
        </item>
         <item field="Email" width="2in">
          <caption value="Email:" width="2in"/>
        </item>
        <item field="PhoneWork" width="2in">
          <caption value="Work Phone:" width="2in"/>
        </item>
        <item field="Note">
          <caption value="Note:"/>
        </item>
      </table>
      </group>
 </body>
</report>
}

ClassMethod CreateXML()
{
    s n=""
1 s n=$o(^testMprint1(n)) q:n=""
s Name=$p(^testMprint1(n),"|",1)
s Company=$p(^testMprint1(n),"|",2)
s Email=$p(^testMprint1(n),"|",3)
s PhoneWork=$p(^testMprint1(n),"|",4)
s Note=$p(^testMprint1(n),"|",5)
    w !,"<PersonGroup>"
w !,"<Name>",Name,"</Name>"
w !,"<Company>",Company,"</Company>"
w !,"<Email>",Email,"</Email>"
w !,"<PhoneWork>",PhoneWork,"</PhoneWork>"
w !,"<Note>",Note,"</Note>"
    w !,"</PersonGroup>"
    g 1
}

}
=======================================================================================

I guess this is related to the difference in your Cache installations. Check your locale definitions! It can happen, if you export

unicode data and import them in 8-bit Cache instalation.

<listBox id="listBox1" label="listBox1" listWidth="150px" 
 onchange="zenPage.notifyOnChange1(zenThis);">
  <option value="1" text="Apple" />
  <option value="2" text="Banana"/>
  <option value="3" text="Cherry" />
</listBox>
<listBox id="listBox2" label="listBox2" listWidth="150px" 
 onchange="zenPage.notifyOnChange2(zenThis);">
  <option value="1" text="Apple" />
  <option value="2" text="Banana"/>
  <option value="3" text="Cherry" />
</listBox>
<text id="currValue" label="Value:"/>
<text id="currText" label="Text:"/>
</page>
}

ClientMethod notifyOnChange1(comp) [ Language = javascript ]
{
  zen('currValue').setValue(comp.getValue());
  zen('currText').setValue(comp.getProperty('text'));
}

Method notifyOnChange2(comp As %ZEN.Component.object) [ ZenMethod ]
{
  Do ..%SetValueById("currValue",comp.value)
  Do ..%SetValueById("currText",comp.text)
}

Replace 

onclick="zenPage.Testing()" 

with: /you were missing the semicolons/

onclick="zenPage.showFileSelectionWindow();"

and add this two methods:

/// Demonstration of launching a file selector window.
ClientMethod showFileSelectionWindow() [ Language = javascript ]
{
zenLaunchPopupWindow('%ZEN.Dialog.fileSelect.cls','FileSelection','status,scrollbars,resizable,width=500,height=700');
}

/// This client event, if present, is fired when the a popup page
/// launched from this page fires an action.
ClientMethod onPopupAction(popupName, action, value) [ Language = javascript ]
{
switch(popupName) {
case 'FileSelection':
if (action=='ok');{
alert('My File is:'+ value);
///Do something...
}
break;
}
}