使用 extjs 设计数独

Posted 2023-02-26

【中文标题】使用 extjs 设计数独

【英文标题】：Design sudoku using extjs

【发布时间】：2013-02-04 08:33:33

【问题描述】：

我对 extjs 很陌生。

我正在尝试游戏。到目前为止，我已经完成了以下操作：

Ext.onReady(function() 

    var i = 0,
        items = [],
        childItems = [];

    for (i = 0; i < 9; ++i) 
        childItems.push(
            xtype: 'container',
            height: 50,

            style: 
                borderColor: '#000000',
                borderStyle: 'solid',
                borderWidth: '1px',
                width: '40px'
            
        );
    
    for (i = 0; i < 9; ++i) 
        items.push(
            xtype: 'container',
            height: 150,
            layout: 
                type: 'column'
            ,
            style: 
                borderColor: '#000000',
                borderStyle: 'solid',
                borderWidth: '1px',
                width: '143px'
            ,
            items: childItems
        );
    
    Ext.create('Ext.container.Container', 
        layout: 
            type: 'column'
        ,
        width: 450,
        renderTo: Ext.getBody(),
        border: 1,
        height: 450,
        style: 
            borderColor: '#000000',
            borderStyle: 'solid',
            borderWidth: '1px',
            marginLeft: 'auto',
            marginRight: 'auto',
            marginTop: '30px'
        ,

        items: items
    );
);

我的问题是，由于边框，块有一些空间，甚至这看起来类似于简单 html 的设计（div，可能是因为使用 css）。请帮忙..

jsfiddle 的设计看起来不同。

编辑：我想尽可能避免使用 CSS（也包括 javascript 样式）。

【问题讨论】：

你为什么不发布 jsfiddle？

“jsfiddle 中的设计看起来不一样”（我不知道为什么）。无论如何，这是链接jsfiddle.net/X6kQK

【参考方案1】：

请阅读 border 的 API。不定义任何样式就不能使用简单的容器。

对于默认没有边框的组件，设置这个不会使 边框自行出现。您还需要指定边框颜色和 风格

但你应该使用表格布局，我认为这对你来说更容易。

这是您使用表格布局的示例（快速而肮脏的变体，但它应该显示技巧）

JSFiddle

for (i = 0; i < 9; ++i) 
    childItems.push(
        xtype: 'container',
        width: 50,
        height: 50,
        html: i + '',
        style: borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'
    );

for (i = 0; i < 9; ++i) 
    items.push(
        xtype: 'container',
        layout: 
            type: 'table',
            columns: 3
        ,
        style: borderColor:'#000000', borderStyle:'solid', borderWidth:'1px',
        items: childItems
    );

Ext.create('Ext.container.Container', 
    layout: 
        type: 'table',
        // The total column count must be specified here
        columns: 3
    ,
    renderTo: Ext.getBody(),    
    style: borderColor:'#000000', borderStyle:'solid', borderWidth:'1px', margin: '30px',
    items: items
);

【讨论】：

感谢您的帮助。我可以使用panel 代替container 吗？我正在尝试在这里创建一个类似于div 的元素。否则我应该选择 container 本身。

@Mr_Green 当然可以。但是您应该决定是否需要一个面板，这一切都取决于您计划的大小以及每个字段的行为方式。我建议您采用精益方式，即使用精益课程和精益布局。使用这条小的 css 行并没有什么不好的，所以这里不应该打扰你。如果一切都依赖于数据，您还可以使用模板直接呈现 html 并附加 dom 侦听器（这将是性能最佳但工作量最大的解决方案。您最终会在这里得到一个类，该类需要渲染一些数据）

感谢您的解释...我有一个小疑问。在我的项目（数独）中，每当用户按下特定面板时，我都会尝试更改所有面板的颜色。怎么做？我确实尝试过listeners: 'render': function(panel) panel.body.on('click', function() panel.body.setStyle('background','red') ); 但没用..

@Mr_Green 您的意思是只针对每个人还是全部？无论如何，这又取决于您的设计。我建议您在视图中设置特定于布局的逻辑，以及在控制器等集中实例中设置所有其他逻辑。现在解决你的问题：你可以使用这个listeners: afterrender: function(c) c.el.on('click', function(e,t)new Ext.Element(t).setStyle( 'background-color', 'red' )) 但你也应该阅读这个article