Question

我是一名新的ExtJS4用户。刚开始编写一些样本。我正在做一个AJAX示例，在客户端：

我创建了4个面板/将它们附加到“卡片”布局中的窗口
单击布局中bbar上的按钮时，会设置“selPanelId”变量以反映所选的面板ID
然后通过AJAX rquest将此“selPanelId”发送到服务器
服务器使用包含TABLE结构的HTML字符串中的适当数据进行响应
在收到响应时，客户端使用extjs组件的“html”属性（内部选定面板）将此返回的字符串设置为html（以便可以在其中呈现表格）

这是分机代码：

<script type="text/javascript">
            var selPanelId='';

            function OnReady()
            {
                var str="<table border>";
                    str+="<tr> <td rowspan='4'> <img src='images/nad.jpg'/> </td> <td> <b>Name:</b> </td> <td> Rafael Nadal </td>  </tr>";

                    str+="<tr> <td> <b>Ranking:</b> </td> <td> 4 </td> </tr> ";
                    str+="<tr> <td> <b>Country:</b> </td> <td> Spain </td> </tr> ";
                    str+="<tr> <td> <b>Age:</b> </td> <td> 27 </td> </tr> ";        
                    str+="</table>";

                var panel1 = Ext.create('Ext.panel.Panel',{


                title: "Novak Djokovic",
                id:'djo',
  margins:'5 5 5 5',  
               height:250,
                width:250
            });

            var panel3 = Ext.create('Ext.panel.Panel',{


                 title: "Roger Federer",
                id:'fed',
                  margins:'5 5 5 5',
               height:250,
                width:250

            });

            var panel2 = Ext.create('Ext.panel.Panel',{


                 title: "Andy Murray",
                id:'mur',
                  margins:'5 5 5 5',
               height:250,
                width:250
            });



            var panel4 = Ext.create('Ext.panel.Panel',{


                 title: "Rafael Nadal",
                id:'nad',
                  margins:'5 5 5 5',
               height:250,
                width:250
            });

                var card = Ext.create('Ext.window.Window',{
                    title:"Tennis Photo Filmstrip",
                    height:350,
                    width:350,

                    layout:'card',
                    items:[panel1,panel2, panel3,panel4],


                    activeItem: 0,

                    bbar:
                        [
                        {
                            id:'1',
                            text:'Novak Djokovic',

                            handler: function(button) {doAjax(button); card.layout.setActiveItem('djo');}
                        },

                        {
                            id:'2',
                            text:'Andy Murray',

                           handler: function(button) {doAjax(button);card.layout.setActiveItem('mur');}
                        },

                        {
                            id:'3',
                            text:'Roger Federer',

                             handler: function(button) {doAjax(button);card.layout.setActiveItem('fed');}
                        },

                        {
                            id:'4',
                            text:'Rafael Nadal',

                             handler: function(button) {doAjax(button);card.layout.setActiveItem('nad');}
                        }
                        ]    
                });

                card.show();



            }
            Ext.onReady(OnReady);

            function doAjax(button)
            {
//                alert(button.id);

                if (button.id=='1')
                    selPanelId = 'djo';
                else if (button.id=='2')
                    selPanelId = 'mur';
                else if (button.id=='3')
                    selPanelId = 'fed';
                else if (button.id=='4')
                    selPanelId = 'nad';
                else 
                    selPanelId = 'djo';

//                alert(selPanelId)

                Ext.Ajax.request({ url: 'AJAX.jsp', 
        success: success, failure: failure, 
        params: {id: selPanelId}

                });
            }

            function success (xhr)
            {
Ext.get(selPanelId).update(xhr.responseText);


            }

            function failure (xhr)
            {
                alert(xhr.statusText);
                Ext.get(selPanelId).html = xhr.statusText;
            }

这是服务器jsp代码：

String playerID = request.getParameter("id");
                System.out.print("player id : " + playerID);
                String str = "";

                if (playerID != null)
                {
                        if (playerID.equals("djo"))
                {
                    str+="<table>";
                    str+="<tr> <td rowspan='4'> <img src='images/djo.jpg'/> </td> <td> <b>Name:</b> </td> <td> Novak Djokovic </td></tr>";

                    str+="<tr> <td> <b>Ranking:</b> </td> <td> 1 </td> </tr> ";
                    str+="<tr> <td> <b>Country:</b> </td> <td> Serbia </td> </tr> ";
                    str+="<tr> <td> <b>Age:</b> </td> <td> 26 </td> </tr> ";        
                    str+="</table>";

                }

                else if (playerID.equals("nad"))
                {
                    str+="<table>";
                    str+="<tr> <td rowspan='4'> <img src='images/nad.jpg'/> </td> <td> <b>Name:</b> </td> <td> Rafael Nadal </td></tr>";

                    str+="<tr> <td> <b>Ranking:</b> </td> <td> 4 </td> </tr> ";
                    str+="<tr> <td> <b>Country:</b> </td> <td> Spain </td> </tr> ";
                    str+="<tr> <td> <b>Age:</b> </td> <td> 27 </td> </tr> ";        
                    str+="</table>";

                }

                else if (playerID.equals("fed"))
                {
                    str+="<table>";
                    str+="<tr> <td rowspan='4'> <img src='images/fed.jpg'/> </td> <td> <b>Name:</b> </td> <td> Roger Federer </td></tr>";

                    str+="<tr> <td> <b>Ranking:</b> </td> <td> 3 </td> </tr> ";
                    str+="<tr> <td> <b>Country:</b> </td> <td> Switzerland </td> </tr> ";
                    str+="<tr> <td> <b>Age:</b> </td> <td> 31 </td> </tr> ";        
                    str+="</table>";

                }
                else
                {
                    str+="<table>";
                    str+="<tr> <td rowspan='4'> <img src='images/mur.jpg'/> </td> ";
                    str+="<td> <b>Name:</b> </td> <td> Andy Murray </td> </tr> ";
                    str+="<tr> <td> <b>Ranking:</b> </td> <td> 2 </td> </tr> ";
                    str+="<tr> <td> <b>Country:</b> </td> <td> Great Britain </td> </tr> ";
                    str+="<tr> <td> <b>Age:</b> </td> <td> 26 </td> </tr> ";        
                    str+="</table>";
                } 

                out.println(str);
                System.out.println(str);
                }

当我提醒xhr.responseText时，它显示正确的输出。当我使用任何其他静态表结构在组件的'html'属性中呈现时，它仍然正确显示表（呈现html）。但是当我使用.html = xhr.responseText时，它不会呈现html内容。

我在这里环顾四周，在组件上找到了一个替代的“更新”方法，这个方法很有用，顺便说一下。

所以，一切都很好，但我想知道，为什么'html'属性不起作用，'update'方法有效？

如果您能澄清一下，请提前感谢：）

纳文

Answer 1

.html是一个 config 属性，它不是你可以在创建组件时设置（并看到有效）的东西。

Answer 2

html是一个配置选项。这意味着您只能在创建时设置它，方法是将选项传递给构造函数，或者重写组件。 Ext不会在以后随时更改其值，因此不会产生任何影响。这就是update方法的原因：更改html属性的值和应用更改。

作为一般规则，只更改属性的值永远不会在Ext或其他lib的代码中产生任何副作用。这只适用于浏览器本机的属性（DOM，事件等）。

extjs 4中的html属性和更新方法之间的区别？

2 个答案: