Ext JS 4复选框字段未显示

Ext JS 4 checkboxfield not displayed

本文关键字:显示 字段 复选框 JS Ext      更新时间:2023-09-26

是否有其他人遇到ext-js复选框不显示的问题?我们已经尝试了一切,甚至下载了架构师软件,但它仍然无法显示。。。有什么想法吗?

我有一种感觉,这就像我们丢失了一个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();
                                                     }
                                                   }
                                              });
                                         }
                                  },
                         ]
                    }],
        });

我并没有像kevhender那样真正测试你的代码。但事实上,它对他有效,但对你无效,这让我认为你没有extjs用于复选框的图像文件。通常它被放置在images/form/checkbox.gif中。请检查一下你的图片文件夹。此外,开发工具(无论是Firebug还是chrome开发工具)控制台应该抛出一个错误,如果是这样的话——说"在路径上找不到文件"之类的。