ExtJs4_ComboWithTemplatesAndAjax示例;

/**
* 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"
   }]
}
*/

ExtJs4_ComboWithTemplatesAndAjax示例;相关推荐

.net连接mysql数据_.net连接MYSQL数据库的方法及示例！
连接MYSQL数据库的方法及示例方法一: 使用MYSQL推出的MySQL Connector/Net is an ADO.NET driver for MySQL 该组件为MYSQL为ADO.NET ...
CPU Cache原理与示例
CPU Cache原理与示例基础知识现在的 CPU 多核技术,都会有几级缓存,老的 CPU 会有两级内存(L1 和 L2),新的CPU会有三级内存(L1,L2,L3 ),如下图所示: 其中:  ...
编译器 llvm clang 源码转换示例
编译器 llvm clang 源码转换示例从git获取llvm项目的源码方式: git clone https://github.com/llvm/llvm-project.git 下载源码后,进入 ...
Cache Memory技术示例
Cache Memory技术示例为什么需要cache?如何判断一个数据在cache中是否命中?cache的种类有哪些,区别是什么? 为什么需要cache memory 先思考第一个问题:程序是如何运 ...
Swift与LLVM-Clang原理与示例
Swift与LLVM-Clang原理与示例 LLVM 学习从简单汇编基础到 Swift 不简单的 a + 1 作为iOS开发,程序崩溃犹如家常便饭,秉着没有崩溃也要制造崩溃的原则每天都吃的很饱 ...
C语言与OpenCL的编程示例比较
C语言与OpenCL的编程示例比较 OpenCL支持数据并行,任务并行编程,同时支持两种模式的混合.对于同步 OpenCL支持同一工作组内工作项的同步和命令队列中处于同一个上下文中的命令的同步. 在 ...
OpenCL框架与示例
OpenCL框架与示例下面的图简单说明了OpenCL的编程框架,图是用的GPU,其他类似: 名词的概念: Platform (平台):主机加上OpenCL框架管理下的若干设备构成了这个平台,通过这个 ...
ONNX MLIR应用示例（含源码链接）
ONNX MLIR应用示例(含源码链接) 开放式神经网络交换在MLIR中的实现 (http://onnx.ai/onnx-mlir/). Prebuilt Containers 开始使用ONNX-ML ...
TVM apps extension示例扩展库
TVM apps extension示例扩展库此文件夹包含TVM的示例扩展库.演示了其它库如何在C++和Python API中扩展TVM. 该库扩展了TVM的功能. python模块加载新的共享库, ...
TVM示例展示 README.md，Makefile，CMakeLists.txt
TVM示例展示 README.md,Makefile,CMakeLists.txt TVM/README.md Open Deep Learning Compiler Stack Documentat ...

ExtJs4_ComboWithTemplatesAndAjax示例;

ExtJs4_ComboWithTemplatesAndAjax示例;相关推荐

最新文章

热门文章