ExtJS文件上傳字段顯示不正確

-1

我正在使用ExtJS 3.4，我想在我的應用程序中使用fileupload。下面顯示了我的代碼和文件上傳字段屏幕截圖。顯示fileupload字段有一個問題，我無法解決這個錯誤。任何人都可以幫忙ExtJS文件上傳字段顯示不正確

enter image description here

var uploadFormPanel = new Ext.FormPanel({ 
    fileUpload : true, 
    autoHeight : true, 
    height  : 200, 
    bodyStyle : 'padding: 10px 10px 0 10px;', 
    labelWidth : 50, 
    defaults : { 
     anchor  : '95%', 
     allowBlank : false, 
     msgTarget : 'side' 
    }, 
    items: [ 
      { 
       xtype   : 'combo', 
       fields   : ['id','name'], 
       name   : 'fuelCompany', 
       store   : comboStore, 
       valueField  : 'id', 
       displayField : 'name', 
       submitValue  : true, 
       typeAhead  : true, 
       triggerAction : 'all', 
       selectOnFocus : true, 
       allowBlank  : false, 
       mode   : 'remote', 
       anchor   : '95%' 
      },{ 
       xtype  : 'fileuploadfield', 
       id   : 'form-file', 
       name  : 'file', 
       buttonText : 'select file', 
       buttonCfg : { 
        iconCls : 'upload-icon' 
       } 
      } 
    ] 
});

來源

2013-03-31 vtokmak

'fileuploadfield'似乎不是ExtJS 3的內置組件，至少我在文檔中找不到它。它是你寫的擴展名嗎？ –

我編輯了我使用的ExtJS版本。我使用這個：http://dev.sencha.com/deploy/ext-3.4.0/examples/form/file-upload.html – vtokmak

不能達到的css文件，我把css樣式在我的JavaScript代碼中定義我的問題解決了JSP文件。

來源

2013-04-15 20:30:48 vtokmak

我面臨同樣的問題，你能告訴我你使用了什麼css，我使用基於extjs的cq中的fileuploadfield組件。 – Sri

我添加了這個： '.x-form-file-wrap { position：relative; height：22px; } .x-form-file-wrap .x-form-file {position：absolute; right：0; -moz-opacity：0; filter：alpha（opacity：0）; 不透明度：0; z-index：2; height：22px; } .x-form-file-wrap .x-form-file-btn position：absolute; right：0; z-index：1; } .x-form-file-wrap .x-form-file-text { position：absolute; left：0; z-index：3; 顏色：＃777; } .upload-icon background：url（'image_add.png'）no-repeat 0 0！important; }' – vtokmak

這是一個有點棘手，但我想我想通了，如何讓按鈕顯示文本：

//... 
{ 
    xtype  : 'fileuploadfield', 
    id   : 'form-file', 
    name  : 'file', 
    buttonCfg : { 
     text : 'select file' 
    } 
} 
//...

您需要在buttonCfg按鈕文本放置該按鈕的大小正確。唯一的缺點是，如果您希望自動調整大小，則無法將iconCls添加到該按鈕。作爲替代方案，你可以使用一些變通方法：

//... 
{ 
    xtype  : 'fileuploadfield', 
    id   : 'form-file', 
    name  : 'file', 
    buttonCfg : { 
     // The text cfg takes html too 
     text : '<div class="upload-icon"' + 
        ' style="width: 15px; height: 15px; display: inline-block;' + 
        ' margin: 0 5px;"></div>' + 
        'select file' 
    } 
} 
//...

來源

2013-03-31 22:40:44

我試過你的解決方案，但我仍然有同樣的問題。 – vtokmak

ExtJS文件上傳字段顯示不正確

回答

相關問題