2013-07-29 28 views
0

有沒有其他人遇到過問題,ext js複選框沒有顯示出來?我們已經嘗試了一切,甚至下載架構師軟件,它仍然不會顯示...任何想法?Ext JS 4 checkboxfield沒有顯示

我有一種感覺,就像我們錯過了一個css/include文件,但我已經看遍了整個互聯網,我仍然找不到解決方案。

{ 
      xtype: 'checkboxfield', 
      anchor: '100%', 
      fieldLabel: 'Label2', 
      boxLabel: 'Box Label2' 
     } 

這裏的面板:

var manForm = Ext.create('Ext.form.Panel', { 
       width: 800, 
       style: 'position: relative; left: 20px;', 
       renderTo: Ext.getBody(), 
       id: 'man_form', 
       title: 'Mobile Information', 
       waitMsgTarget: true, 
       fieldDefaults: { 
        labelAlign: 'right', 
        labelWidth: 85, 
        msgTarget: 'side' 
       }, 
       items: [ 
         {      
          xtype: 'container', 
          padding: '10px', 
         defaults: { height: 28 }, 
          items: [{ 
              xtype: 'hiddenfield', 
              name: 'id', 
              id: 'id', 
            }, 
            { 
              xtype:'hiddenfield', 
              name: 'item_id', 
               id: 'item_id' 
            }, 
            { xtype: 'container', 
             layout: 'hbox', 
             defaults: { height: 28 }, 
             margin: ' 0 10 0 0', 
             items: [{ 
                 xtype:'textfield', 
                fieldLabel: 'Number', 
                 name: 'ItemNumber', 
                  id: 'ItemNumber', 
                labelWidth: 45, 
                 width: 345, 
                }, 
                { 
                 xtype:'textfield', 
                fieldLabel: 'Name', 
                 name: 'ItemName', 
                  id: 'ItemName', 
                labelWidth: 70, 
                 width: 425,             
               }] 
            }, 
            { 
              xtype: 'textfield', 
             fieldLabel: 'Category List', 
             labelWidth: 140, 
              width: 700, 
              name: 'CategoryList', 
               id: 'CategoryList' 
            }, 
            { 
              xtype: 'textfield', 
             fieldLabel: 'Short Desc For Cat List', 
              name: 'ShortDescriptionForCategoryList', 
               id: 'ShortDescriptionForCategoryList', 
             labelWidth: 140, 
              width: 600 
            }, 
            { xtype: 'container', 
             layout: 'hbox', 
             margin: ' 0 10 0 0', 
             items: [{ 
                 xtype: 'textfield',           
                 name: 'BasePrice', 
                fieldLabel: 'Base Price', 
                  id: 'BasePrice', 
                labelWidth: 140, 
                 width: 270, 
                 height: 28 
               }, 
               { 
                 xtype: 'textfield',           
                 name: 'RetailPrice', 
                fieldLabel: 'Retail Price', 
                  id: 'RetailPrice', 
                labelWidth: 140, 
                 width: 270, 
                 height: 28 
               },{ 
       xtype: 'checkboxfield', 
       anchor: '100%', 
       fieldLabel: 'Label2', 
       boxLabel: 'Box Label2' 
      } 


               ] 
            }, 
            { 
              xtype: 'textfield',           
              name: 'ItemImages', 
             fieldLabel: 'Item Images', 
               id: 'ItemImages', 
             labelWidth: 140, 
              width: 700             
            }, 
            { 
              xtype: 'textfield',           
              name: 'ItemPrimaryImageUrl', 
             fieldLabel: 'Primary Image URL', 
               id: 'ItemPrimaryImageUrl', 
             labelWidth: 140, 
              width: 700             
            },          
            { 
              xtype: 'textfield',           
              name: 'ItemPrimaryImageAltText', 
             fieldLabel: 'Primary Image Alt Text', 
               id: 'ItemPrimaryImageAltText', 
             labelWidth: 140, 
              width: 700             
            }, 
            { 
              xtype: 'textfield',           
              name: 'ItemThumbnailUrl', 
             fieldLabel: 'Thumbnail URL', 
               id: 'ItemThumbnailUrl', 
             labelWidth: 140, 
              width: 700             
            }, 
            { 
              xtype: 'textfield',           
              name: 'ItemThumbnailAltText', 
             fieldLabel: 'Thumbnail Alt Text', 
               id: 'ItemThumbnailAltText', 
             labelWidth: 140, 
              width: 700             
            },           
            { 
              xtype: 'button', 
              text: 'Update', 
              name: 'new_button', 
               id: 'new_button', 
              style: 'margin-left:720px; margin-bottom:5px', 
             handler: function(event, toolEl, panel){ 

               Ext.Msg.show({ 
                title:'Update Data', 
                msg: 'Are you sure you want to update these settings?', 
                buttons: Ext.Msg.YESNO, 
                icon: Ext.Msg.QUESTION, 
                fn: function(btn){ 
                if (btn === 'yes'){ 

                 var obj = manForm.getForm().getValues(); 
                 for (var prop in obj) { 
                 store.getAt(0).set(prop,obj[prop]);     
                 //alert(prop + " : " + obj[prop]); 
                 } 

                 store.update(); 
                 store.load(); 
                } 
                } 
               }); 
             } 
            }, 
         ] 

        }], 
     }); 
+2

我插入你的代碼,並能看到複選框就好了。它可能是一些自定義的CSS獲取方式。你是否檢查過包含複選框的'hbox'以查看計算出的CSS的樣子? – kevhender

+0

嗨,kev,謝謝你的幫助。我評論了hbox佈局參考,它仍然沒有出現......任何其他想法? – user1801932

+0

kevhender,就是這樣......我評論了css文件,並顯示了複選框。非常感謝你的幫助! – user1801932

回答

0

我沒有真正考驗你的代碼像kevhender一樣。但事實上,它適用於他,但不適合你,這讓我覺得你沒有extjs用於複選框的圖像文件。通常它被放置在images/form/checkbox.gif中。 請檢查您的圖像文件夾一次。另外開發工具(Firebug或Chrome開發工具)控制檯應該拋出一個錯誤,如果是這種情況 - 說「文件不能在路徑blahblah」或什麼的。

+0

有趣。我將檢查圖像文件和css ...我以前從未使用過hbox,所以我可能會對此有疑問。謝謝。 – user1801932

+0

好的,我檢查了checkbox.gif,它在那裏... Firebug或Chrome開發工具沒有錯誤 – user1801932