ExtJS(MVC)+PHP(ThinkPHP)+MySql5.0 开发框架前台阶段--ExtJS篇

 最近一直沉浸在ExtJS的苦海中，因自身技术能力所限，有些东西实现起来有点捉襟见肘。还好昨天终于看到了曙光，现在我大家分享一下。

1. 功能介绍

   点击左侧导航树，右侧选项卡添加对应的选项卡。在选项卡中引入Combo with Templates and Ajax这个控件，在官方API可以查询得到它的好处类似于联想搜索，我在这里又做了一点小修改，在查询结果中，通过点击超链接在添加选项卡。

   

2. 开发中遇到的问题：

   a. Combo 返回数据列表样式的定义；

   b. 点击返回数据内容，在选项卡内添加新的选项卡；

3. 解决方案：

   a) 这个问题困扰了我有一段时间，其实很简单。还是要提醒各位盆友予以自勉多看API，这里API的demo写的很清楚，如果还在受这个问题困扰的盆友，多研究研究Demo吧！

   view关键代码：

   define('MVC.view.selectPanel', {

      extend: 'Ext.panel.Panel',

      alias:'widget.selectPanel',

      height: 479,

      width: 600,

      bodyPadding:10,

      layout: {

          type: 'absolute'

      },

      id:'selectPanel',

      title:'selectPanel title',

      initComponent: function() {

          var me = this;

          var SolutionSelectStore=Ext.create('MVC.store.SolutionSelectStore');

          Ext.applyIf(me, {

              items: [

   {

   xtype: 'combo',

                      store: SolutionSelectStore,

                      displayField: 'title',

                      typeAhead: false,

                      hideLabel: true,

                      hideTrigger:true,

                      anchor: '100%',

                      id:'ComboSelect',

                      listConfig: {

                          loadingText: 'Searching...',

                          emptyText: 'No matching posts found.',

                          // Custom rendering template for each item

                          getInnerTpl: function() {

   
   

   return   '<a id="ComSelect" class="search-item" href ="javascript:showDemo(Ext.getCmp(\'ComboSelect\').ownerCt,\'{author}\')" >' +

                  '<h3><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' +

                  '{excerpt}' +

              '</a>';

                          }

                      },

   
   

                      pageSize: 10

   },

   {

                      xtype: 'component',

                      style: 'margin-top:25px',

                      html: 'Live search requires a minimum of 4 characters.'

                  }

   
   

              ]

          });

   b)实现通过点击链接后增加选项卡页,这里关于触发链接引发的function写在哪里，很是头疼。尝试过在对应的controller里，由于该超链接后期手动生成，所以在controller里无法注册。后来多次尝试后，在对应的html页中，写了对应function，问题解决了。哈哈！

   

   
   

   到此完事大吉。如有介绍不清楚的地方，欢迎给我留言。