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，問題解決了。哈哈！

   
   

   到此完事大吉。如有介紹不清楚的地方，歡迎給我留言。