Question

我是sencha touch的新手。我面临的问题，这是我的第一个测试应用程序。

Ext.Msg.confirm('', 'Are you sure you want to reset this form?', function (btn) {
                    if (btn === 'yes') {
                    } 
                });

问题在于确认框样式。它即将到来，但它不适合。这是附加屏幕截图 enter image description here

我使用的代码是

BillingForm.js

Ext.define("test.view.BillingForm", {
  extend: "Ext.Container",
  config: {
    items: [{
        title: "Basic",
        xtype: "formpanel",
        id: "billingForm",
        items: [
          {
            xtype: "fieldset",
            title: "Billing Information",
            defaults: {
              labelWidth: "32%",
              style: {
                "background-color": "#fff",
                "font-size": "12px",
                "color": "#333"

              }
            },
            items: [
              {
                xtype: 'textfield',
                name: 'firstname',
                label: 'First Name',
                palceholder: "Enter your first name",
                required: true,
                focus: true

              }
            ]
          },
          {
            xtype: 'button',
            text: 'Reset',
            ui: 'decline',
            handler: function(btn, evt) {
               Ext.Msg.confirm('', 'Are you sure you want to reset this form?', function (btn) {
                    if (btn === 'yes') {
                    } 
                }); 
            } 
          }
        ]
      }
    ]
  }
});

MainView.js

Ext.define('test.view.MainView', {
    extend : "Ext.Container",
    alias : ["widget.mainview"],
    config: {
        fullscreen: true,
        layout: {
            type: "vbox"
        },
        items: [{
            xtype: "toolbar",
            docked: "top",
            height: 45,
            title: "First App"
        },
         Ext.create("test.view.BillingForm",{
            height:300,
            padding:"10 0 0 0"
        })

        ],
    }
});

app.js

Ext.onReady(function(){
    Ext.application({
        name: 'test',
        appFolder : 'app',
        models : [],
        stores : [],
        requires: [],
        views: ["MainView","BillingForm"],
        controllers:    [],
        isIconPrecomposed : true,
        profiles : [],
        launch: function() {
            Ext.create("test.view.BillingForm", {});
        }
    });
});

的index.html

<!DOCTYPE>

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Hello World</title>
    <link href="http://localhost/projects/touch/resources/css/cupertino.css" type="text/css" rel="stylesheet"/>
    <script src="http://localhost/projects/touch/sencha-touch-all-debug.js"></script>
    <script src="app.js"></script>
</head>
<body>
</body>
</html>

Answer 1

您的代码存在很多问题。以下是我只能通过一瞥代码看到的问题列表：

使用Ext.application功能时，不需要Ext.onReady。只需删除它。
在启动功能中，创建MainView而不是BillingForm
在MainView中添加BillingForm是错误的。在BillingForm的定义中提供xtype：'billingform'，扩展名为：'Ext.Container'，然后在MainView的项目中，而不是创建新的BillingForm，只需添加如下：
```
items: [{
    xtype: "toolbar",
    docked: "top",
    height: 45,
    title: "First App"
},{
    xtype:'billingform'
}]
```

纠正这些，然后看看它是否有帮助。

确认框未正确呈现

1 个答案: