/**
* ComboWithTemplatesAndAjax示例
* 示例亮点:下拉框的配置;
*/
Ext.require([
"Ext.data.*",
"Ext.form.*"
]);
Ext.onReady(function() {
// 定义Post模型;
Ext.define("Post", {
extend: "Ext.data.Model",
proxy: {
// jsonp=>uses JSON-P to send requests to a server on a different domain;
type: "ajax", // sends requests to a server on the same domain;
url: "resources/js/ComboWithTemplatesAndAjax.json",
reader: {
type: 'json',
root: "persons",
totalProperty: 'totalCount'
}
},
fields: [{
name: "id", mapping: "person_id"
}, {
name: "name"
}, {
name: "sex"
}, {
name: "age"
}, {
name: "birthday"
}]
});
// data store
var ds = Ext.create('Ext.data.Store', {
pageSize: 5,
model: 'Post'
});
// panel
var panel = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: "人物搜索",
width: 560,
bodyPadding: 10,
layout: "anchor",
items: [{
xtype: "combo",
store: ds,
displayField: "name",
typeAhead: false, // 不自动匹配;
hideLabel: true,
hideTrigger: true,
anchor: '100%',
listConfig: {
loadingText: "Searching...",
emptyText: "No matching persons found.",
getInnerTpl: function() {
return '<a href="http://cenyebao.com/it.html?id={id}&name={name}">' +
'<h3><span>{name}_{sex}</span></h3>' +
'</a>';
}
},
pageSize: 10
}, {
xtype: "component",
style: "margin-top: 10px;",
html: "请输入最少为4个字节的字符串进行搜索!"
}]
});
});
// ComboWithTemplatesAndAjax.json
/*
{
totalCount: "7890",
persons: [{
"person_id" : "1",
"name" : "汪涵狂人",
"sex" : "女",
"age" : "1",
"birthday" : "1987-04-01"
}, {
"person_id" : "2",
"name" : "欧弟狂人",
"sex" : "男",
"age" : "2",
"birthday" : "1987-04-02"
}, {
"person_id" : "3",
"name" : "钱枫狂人",
"sex" : "女",
"age" : "3",
"birthday" : "1987-04-03"
}, {
"person_id" : "4",
"name" : "浩二狂人",
"sex" : "男",
"age" : "4",
"birthday" : "1987-04-04"
}, {
"person_id" : "5",
"name" : "小五狂人",
"sex" : "女",
"age" : "5",
"birthday" : "1987-04-05"
}, {
"person_id" : "6",
"name" : "田源狂人",
"sex" : "男",
"age" : "6",
"birthday" : "1987-04-06"
}, {
"person_id" : "7",
"name" : "黄锋狂人",
"sex" : "女",
"age" : "7",
"birthday" : "1987-04-07"
}, {
"person_id" : "8",
"name" : "楚原狂人",
"sex" : "男",
"age" : "8",
"birthday" : "1987-04-08"
}, {
"person_id" : "9",
"name" : "冷夜狂人",
"sex" : "女",
"age" : "9",
"birthday" : "1987-04-09"
}, {
"person_id" : "10",
"name" : "狂潮狂人",
"sex" : "男",
"age" : "10",
"birthday" : "1987-04-010"
}]
}
*/
* ComboWithTemplatesAndAjax示例
* 示例亮点:下拉框的配置;
*/
Ext.require([
"Ext.data.*",
"Ext.form.*"
]);
Ext.onReady(function() {
// 定义Post模型;
Ext.define("Post", {
extend: "Ext.data.Model",
proxy: {
// jsonp=>uses JSON-P to send requests to a server on a different domain;
type: "ajax", // sends requests to a server on the same domain;
url: "resources/js/ComboWithTemplatesAndAjax.json",
reader: {
type: 'json',
root: "persons",
totalProperty: 'totalCount'
}
},
fields: [{
name: "id", mapping: "person_id"
}, {
name: "name"
}, {
name: "sex"
}, {
name: "age"
}, {
name: "birthday"
}]
});
// data store
var ds = Ext.create('Ext.data.Store', {
pageSize: 5,
model: 'Post'
});
// panel
var panel = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: "人物搜索",
width: 560,
bodyPadding: 10,
layout: "anchor",
items: [{
xtype: "combo",
store: ds,
displayField: "name",
typeAhead: false, // 不自动匹配;
hideLabel: true,
hideTrigger: true,
anchor: '100%',
listConfig: {
loadingText: "Searching...",
emptyText: "No matching persons found.",
getInnerTpl: function() {
return '<a href="http://cenyebao.com/it.html?id={id}&name={name}">' +
'<h3><span>{name}_{sex}</span></h3>' +
'</a>';
}
},
pageSize: 10
}, {
xtype: "component",
style: "margin-top: 10px;",
html: "请输入最少为4个字节的字符串进行搜索!"
}]
});
});
// ComboWithTemplatesAndAjax.json
/*
{
totalCount: "7890",
persons: [{
"person_id" : "1",
"name" : "汪涵狂人",
"sex" : "女",
"age" : "1",
"birthday" : "1987-04-01"
}, {
"person_id" : "2",
"name" : "欧弟狂人",
"sex" : "男",
"age" : "2",
"birthday" : "1987-04-02"
}, {
"person_id" : "3",
"name" : "钱枫狂人",
"sex" : "女",
"age" : "3",
"birthday" : "1987-04-03"
}, {
"person_id" : "4",
"name" : "浩二狂人",
"sex" : "男",
"age" : "4",
"birthday" : "1987-04-04"
}, {
"person_id" : "5",
"name" : "小五狂人",
"sex" : "女",
"age" : "5",
"birthday" : "1987-04-05"
}, {
"person_id" : "6",
"name" : "田源狂人",
"sex" : "男",
"age" : "6",
"birthday" : "1987-04-06"
}, {
"person_id" : "7",
"name" : "黄锋狂人",
"sex" : "女",
"age" : "7",
"birthday" : "1987-04-07"
}, {
"person_id" : "8",
"name" : "楚原狂人",
"sex" : "男",
"age" : "8",
"birthday" : "1987-04-08"
}, {
"person_id" : "9",
"name" : "冷夜狂人",
"sex" : "女",
"age" : "9",
"birthday" : "1987-04-09"
}, {
"person_id" : "10",
"name" : "狂潮狂人",
"sex" : "男",
"age" : "10",
"birthday" : "1987-04-010"
}]
}
*/