ExtJS模版技术

学习ExtJS一段时间以后，大家基本都会对于一些显示数据的组件不太符合需求，可能自己需要的组件在ExtJS里面不存在，这是大家基本就会使用Html属性，直接使用Html进行绘制页面数据展现。

但是，使用ExtJS的templete技术，可以简化html里面的数据绑定。

之后发现，ExtJS 的组件都是html构成，但是它有一个模版tpl，这是html的本质，可以组建自己的tpl，进而重新绘制组件模版，这样就会符合我们的要求。

tpl：里面也有自己的语法-for,if等。

combox，Grid，Tree都是使用模版机制，如果我们觉得其显示效果不符合我们的要求，我们可以复写tpl来实现，再doRender渲染即可。

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

实现基于下拉框的表格就是基于模板的实现

实现下拉树就是模板

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

模糊查询：

目前对于extjs组件类似于googe的自动提示，的看是如何实的

模版：里面可以有执行函数。

var tpl = new Ext.XTemplate(

'<p>Name: {name}</p>',

'<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',

'<p>Kids: ',

'<tpl for="kids">',

'<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',

'{name}',

'</div>',

'</tpl></p>'

);

tpl.overwrite(panel.body, data);

var tpl = new Ext.XTemplate(

    '<p>Name: {name}</p>',

    '<p>Kids: ',

    '<tpl for="kids">',

        '<tpl if="this.isGirl(name)">',

            '<p>Girl: {name} - {age}</p>',

        '</tpl>',

        '<tpl if="this.isGirl(name) == false">',

            '<p>Boy: {name} - {age}</p>',

        '</tpl>',

        '<tpl if="this.isBaby(age)">',

            '<p>{name} is a baby!</p>',

         '</tpl>',

    '</tpl></p>', {

     isGirl: function(name){

         return name == 'Sara Grace';

     },

     isBaby: function(age){

        return age < 1;

     }

});

tpl.overwrite(panel.body, data);