Question

我正在使用sencha touch ap工作，我需要使用动态表单生成视图。

配置来自后端（JSON），并根据此我绘制一个组件或其他..例如：

 "auxiliaryGroups": [
      {
        "id": "1000",
        "name": "Basic Data",
        "fields": [
          {
            "id": "1001",
            "name": "Company name",
            "editable": true,
            "mandatory": true,
            "calculation": true,
            "internalType": "T",
            "type": "textfield",
            "options": []
          }
        ]
      }
    ],

其中类型与Sencha中的xtype相关。

在视图中，我创建了所有字段选项：

      {
        xtype : 'fieldset',
        itemId: 'auxiliaryFieldsGroup3',
        title: 'Requirements',
        //cls   : 'headerField',
        items:[
          {
            xtype: 'togglefield',
            name: 'f6',
            label: 'Auxiliary field R1'
          },
          {
            xtype: 'selectfield',
            name: 'f10',
            label: 'Auxiliary field R5',
            placeHolder: 'Select one..',
            options: [
              {text: 'First Option',  value: 'first'},
              {text: 'Second Option', value: 'second'},
              {text: 'Third Option',  value: 'third'}
            ]
          },
          {
            xtype: 'textfield'
          }  
        ] 
      }

我从服务器接收配置，我理解视图就像一个不同字段的存储，并且从控制器，它应该只添加在json对象中指定的字段。

如何根据MVC概念动态创建它？

谢谢

Answer 1

我假设您拥有succses:function(response){ var response = Ext.decode(response.responseText); var fields = response.auxiliaryGroups.fields; var form = Ext.create("Ext.form.Panel",{ // here your form configuration. cls:"xyz" }); Ext.Array.forEach(fields,function(field){ var formField = { xtype: field.type, label: field.name, name: field.id }; form.add(formField); }); Ext.Viewport.add(form); form.show(); }数组中的所有字段。从AJAX加载表单数据后，您可以在成功调用中执行此操作。

close all; clc; clear;

% Define position of arm
theta=0:10:360; %theta is spaced around a circle (0 to 360).
r=0.04; %The radius of our circle.
%Define a circular magenta patch.
x=r*cosd(theta) + 0.075;
y=r*sind(theta) + 1;

% Size figure and draw arms
figure('position', [800, 300, 600, 550]);
hold on
myShape2=patch(x,y,'m');
set(myShape2,'Xdata',x,'Ydata',y);
point = plot(0.075,1, 'bo', 'markers', 1);
dim = [.2 .5 .3 .3];
axis([-1.5 3 -1 3]); grid on;
T=0.15;

% Create annotation object to display object center
ano = annotation('textbox',dim,'String',['center position: (','0.075, 1'],'FitBoxToText','on');

for theta = pi/2:-pi/90:0,
    if theta >= pi/4;
        theta = theta;
    else
        theta = pi/2 - theta;
    end
    Arot = [sin(theta) cos(theta); -cos(theta) sin(theta)];
    xyTrans = Arot * [x; y];

    % Remove plot and annotation object from previous frame
    delete(point)
    delete(ano)

    set(myShape2,'Xdata',(xyTrans(1, :)),'Ydata',(xyTrans(2, :)));

    % Calculate the center of the patch as mean x and y position
    x_pos = mean(xyTrans(1, :));
    y_pos = mean(xyTrans(2, :));
    point = plot(x_pos, y_pos, 'bo', 'markers', 1);        

    ano = annotation('textbox',dim,'String',['center position: (',sprintf('%0.3f', x_pos),', ',...
        sprintf('%0.3f', y_pos),')'],'FitBoxToText','on');

    axis([-1.5 3 -1 3]); grid on;
    pause(T);
end

Answer 2

基于我对你的问题的评论，我对动态表单生成的想法是使用ExtJS语法来加载表单定义，就像下面的代码一样;当然它会被扩展，数据可以从服务器加载。

Ext.require([
  'Ext.form.*'
]);

Ext.onReady(function() {
  var data = [{
    fieldLabel: 'First Name',
    name: 'first',
    allowBlank: false
  }, {
    fieldLabel: 'Last Name',
    name: 'last'
  }, {
    fieldLabel: 'Company',
    name: 'company'
  }, {
    fieldLabel: 'Email',
    name: 'email',
    vtype: 'email'
  }, {
    xtype: 'timefield',
    fieldLabel: 'Time',
    name: 'time',
    minValue: '8:00am',
    maxValue: '6:00pm'
  }];

  var form = Ext.create('Ext.form.Panel', {
    frame: true,
    title: 'Simple Form',
    bodyStyle: 'padding:5px 5px 0',
    width: 350,
    fieldDefaults: {
      msgTarget: 'side',
      labelWidth: 75
    },
    defaultType: 'textfield',
    defaults: {
      anchor: '100%'
    }
  });

  form.add(data);
  form.render(document.body);

});

<强>更新

在运行时创建视图时，视图和控制器之间的通信可能会有问题，因为控制器对视图一无所知。考虑到控制器负责用适当的数据初始化视图并处理视图事件，ExtJS中的数据绑定机制可以解决symbolic loops aren't currently available to TensorFlow.中描述的第一部分（初始化视图），第二部分（处理视图的事件）可以通过控制器中的常规方法来解决，视图中的每个元素都应该将其事件发送到某些特定的方法，基于这些参数的方法应该决定做什么。

这种方法使你在控制器中的方法有点胖和复杂，这是动态形式的代价。

值得一提的是，EXTJS在控制器和视图的生命周期中引发了不同的事件，您应该利用它们来管理动态表单。

Answer 3

我不了解Touch，但在ExtJS中，我通常使用add的{{1}}函数来完成。您只需遍历所有记录，即可随时创建字段。

fieldset

然后在var field = Ext.create('Ext.form.field.Text'); //or Ext.form.field.Date or a number field, whatever your back end returns.然后

上设置正确的配置选项

field

如何在Sencha Touch中创建动态（动态）表单

3 个答案: