我正在开发一个显示每个客户的列表项的移动应用程序。这个列表可以被 dojox.mobile.searchbox 组件过滤。在此链接上,我找到了此行为的示例( http://download.dojotoolkit.org/release-1.8.3/dojo-release-1.8.3/dojox/mobile/tests/test_SearchBox-demo.html ),但是错过了知道点击了什么元素的可能性。我需要这个功能来创建一个包含一些客户详细信息的新视图。
我的项目在dojoInit函数中设置了两个主要函数:
require([
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat",
"dojox/mobile/SearchBox",
"dojo/ready",
"dijit/registry",
"dojo/data/ItemFileReadStore",
"dojo/store/DataStore",
"dojox/mobile/ScrollableView",
"dojox/mobile/EdgeToEdgeDataList",
"dojox/mobile/SimpleDialog",
"dojox/mobile/RoundRect",
"dojox/mobile/Button",
"dojox/mobile/RadioButton",
"dojox/mobile/Switch"
], function(parser, mobile, compat, SearchBox, ready, registry,
ItemFileReadStore, DataStore, ScrollableView,
EdgeToEdgeDataList, RoundRect, Button, RadioButton, Switch){
onSearch = function(results, query, options){
// Callback when a search completes.
WL.Logger.debug("results: " + results);
WL.Logger.debug("query: " + query);
list.setQuery(query);
};
ready(function(){
searchBox = registry.byId("searchBox");
searchBox.queryExpr = "*${0}*";
list = registry.byId("list");
});
});
但是只有在从菜单请求功能时,才通过调用函数来设置 dataStore:
function listCustomers(){
WL.Logger.debug("entrata in listCustomers()");
require([
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat",
"dojox/mobile/SearchBox",
"dojo/ready",
"dijit/registry",
"dojo/data/ItemFileReadStore",
"dojo/store/DataStore",
"dojox/mobile/ScrollableView",
"dojox/mobile/EdgeToEdgeDataList",
"dojox/mobile/SimpleDialog",
"dojox/mobile/RoundRect",
"dojox/mobile/Button",
"dojox/mobile/RadioButton",
"dojox/mobile/Switch"
], function(parser, mobile, compat, SearchBox, ready, registry,
ItemFileReadStore, DataStore, ScrollableView,
EdgeToEdgeDataList, RoundRect, Button, RadioButton, Switch){
var static_data = {
items: [
{label: "Alabama", moveTo: "testView", id: "Alabama"},
{label: "Alaska"},
{label: "American Samoa"},
{label: "Arizona"},
{label: "Arkansas"},
{label: "Armed Forces Europe"},
{label: "Armed Forces Pacific"},
{label: "Armed Forces the Americas"},
{label: "California"},
{label: "Colorado"},
{label: "Connecticut"},
{label: "Delaware"},
{label: "District of Columbia"},
{label: "Federated States of Micronesia"},
{label: "Florida"},
{label: "Georgia"},
{label: "Guam"},
{label: "Hawaii"},
{label: "Idaho"},
{label: "Illinois"},
{label: "Indiana"},
{label: "Iowa"},
{label: "Kansas"},
{label: "Kentucky"},
{label: "Louisiana"},
{label: "Maine"},
{label: "Marshall Islands"},
{label: "Maryland"},
{label: "Massachusetts"},
{label: "Michigan"},
{label: "Minnesota"},
{label: "Mississippi"},
{label: "Missouri"},
{label: "Montana"},
{label: "Nebraska"},
{label: "Nevada"},
{label: "New Hampshire"},
{label: "New Jersey"},
{label: "New Mexico"},
{label: "New York"},
{label: "North Carolina"},
{label: "North Dakota"},
{label: "Northern Mariana Islands"},
{label: "Ohio"},
{label: "Oklahoma"},
{label: "Oregon"},
{label: "Pennsylvania"},
{label: "Puerto Rico"},
{label: "Rhode Island"},
{label: "South Carolina"},
{label: "South Dakota"},
{label: "Tennessee"},
{label: "Texas"},
{label: "Utah"},
{label: "Vermont"},
{label: "Virgin Islands, U.S."},
{label: "Virginia"},
{label: "Washington"},
{label: "West Virginia"},
{label: "Wisconsin"},
{label: "Wyoming"},
]
};
// dojo.data store for dojox.mobile.EdgeToEdgeDataList
dataStore = new ItemFileReadStore({data: static_data});
// dojo.store for dojox.mobile.SearchBox
store = new DataStore({store: dataStore});
searchBox = null;
list = null;
list = dijit.registry.byId("list");
searchBox = dijit.registry.byId("searchBox");
searchBox.set("store", store);
list.setStore(dataStore, {label: "*"});
});
}
我使用静态数据进行初始测试。HTML 脚本如下:
<input data-dojo-type="dojox.mobile.SearchBox" type="search" id="searchBox"
style="width:100%" placeHolder="Search"
data-dojo-props='store:store, searchAttr: "label", ignoreCase: true, incremental: true, pageSize:1, onSearch:onSearch, queryExpr: "*${0}*"'>
<div data-dojo-type="dojox.mobile.ScrollableView">
<ul data-dojo-type="dojox.mobile.EdgeToEdgeDataList"
id="list"></ul>
</div>
有什么方法可以让你选择什么项目来构建下一个视图?像“onclick”事件......
谢谢
恩里科