Extjs列表详细信息窗口新建后自动加载解决方法,通过json自动生成Dom的代码

在Extjs中,在当前页面的grid页新建了一行数据后,通过表单形式进入详细页面的编辑,此时,为了能让页面自动打开详细页面编辑,我花了三个小时,终于找到了在Extjs下最合适的方案,结果却只有三句话,我想,这可能也是很多Extjs爱好者们想要知道或者已经知道的,为此,将其与大家分享,只求为extjs群体贡献自己的一些想法。

今天在网上看到的一个根据ClassName获取Elements的脚本,在此记录一下,以便日后使用。

json转html 三重奏
原料:json

列表在创建后,一般会有一个提示,现在我把我最开始的几个思路与大家讲讲,想直接看结果的可以跳到最后一套方案~

复制代码 代码如下:

复制代码 代码如下:

方案1(放弃).
在新建数据后,向createform方法传送一个id值。这可能是普通搞web的大虾们最先想到的方法,通过传参给一个detail页,然后detail根据id再到库中查找相应的数据,显示在页面上。可是,经过调查,发现页面是通过当前页面的子窗口的方式来显示的,而子窗口的数据是通过grid中的每行数据来传入的,如果要想显示二级页,首先要在grid中读取出一条数据,将整体作为一条record传值才可。而添加数据后,本身就是要更新列表的,还不如直接读取列表中的最新一条数据,直接传入,恩,
这就想到了第二套方案~

var getElementsByClassName = function(searchClass, node, tag) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(searchClass)
} else {
node = node || document;
tag = tag || “*”;
var classes = searchClass.split(” “),
elements = (tag === “*” && node.all) ? node.all :
node.getElementsByTagName(tag),
patterns = [],
returnElements = [],
current,
match;
var i = classes.length;
while (–i >= 0) {
patterns.push(new RegExp(“(^|\\s)” + classes[i] + “(\\s|$)”));
}
var j = elements.length;
while (–j >= 0) {
current = elements[j];
match = false;
for (var k = 0, kl = patterns.length; k < kl; k++) {
match = patterns[k].test(current.className);
if (!match) break;
}
if (match) returnElements.push(current);
}
return returnElements;
}
}

var json={
‘div’:{id:’flower’,className:”a1″,sub:[
{
‘ul’:{id:’flower1′,className:[“a2″,”a3”],sub:[
{‘li’:{num:3,con:”内容内容内容”,fn:{‘click’:function(){alert(‘我是LiLi’)}}}}
]}
},
{
‘ul’:{id:’flower4′,className:[“a2″,”a3”],sub:[
{‘li’:{num:3,con:”第2轮了”,fn:{‘click’:function(){alert(‘我是LiLi’)}}}}
]}
},
{
‘span’:{id:’q’,con:”我是span”}
}
]}
}

方案2(成功).
在数据创建并更新列表后,设定列表中的第一项(因为根据创建时间排序了的)为选中状态,调用onEdit方法,相当于点击了grid中的第一行数据并点编辑按钮的效果(ps:我是不是很有才呀)。好了,在save数据的方法后面,调用grid.selModel.selectRow(0),然后grid.onEdit()(自己定义的编辑方法,通过grid.getSelectionModel().getSelected()取出已选的行,并将参数传递给form),要注意了,这里直接选中的话,是选的列表更新前的第一条(不是我们想要的更新后的第一条哦)~~因为store的load是异步加载的,哈哈,所以这里呢,要把这两个方法放到setTimeout函数里面,像这样:

下面是网上其它的一些相关介绍,大家可以一起参考下。

id=id
className=class
num=循环次数
fn=绑定函数
con=元素内容
sub =代表有子节点
主菜:method

复制代码 代码如下:

DOM中的getElementsByClassName解释如下:DOM API
中提供3种方法取元素(getElementById,getElementsByName,getElementsByTagName),经常编写CSS的人自然就会产生疑问,有没有根据样式类名取元素的方法,可惜,DOM1/2
里面都没有这样的方法,prototype 很早就扩展过DOM的方法,添加了
getElementsByClassName,从方法名上看,似乎非常正统,与前面3种方法名称也像,分析其代码,却发现还是通过
getElementsByTagName
来实现。这个方法称不上优雅,因为需要遍历所有的元素,探测元素是否包含目标样式类名,返回符合条件的元素数组。google了一下,却没有找到更优雅高效的替代方法。

复制代码 代码如下:

setTimeout(function(){
Ext.getCmp(“gridPanel”).sm.selectRow(0);
Ext.getCmp(“gridPanel”).onEdit();
},300);

复制代码 代码如下:

JsonToHtml={
init:function(data,parent){//jsonDB,父元素
for(var attr in data){
if(data[attr][“id”]){var num=1}else{var
num=data[attr][“num”]||1}//如果存在id,则循环默认为1,因为id不可重复
for(var j=0;j<num;j++){
var obj= document.createElement(attr);
parent ? parent.appendChild(obj) :
document.body.appendChild(obj);//递归时传入父元素,没有则默认从body输出
for(var attr2 in data[attr]){
var _tempAttr=data[attr][attr2];
switch(attr2){
case “id”:
obj.id=_tempAttr;
break;
case “className”: //支持多个class传入~简了点~
if(_tempAttr.length && _tempAttr.pop){
for(var k=0;k<_tempAttr.length;++k){
obj.className= obj.className+” “+_tempAttr[k] ;
}
}else{ obj.className =_tempAttr;}
break;
case “sub”: //如果有子节点则开始递归
for(var i=0;i<_tempAttr.length;i++){
_tempAttr[i].sub ? this.init(_tempAttr[i]) :
this.init(_tempAttr[i],obj)
}
break;
case “con”://设置内容,可以生成新的子元素
obj.innerHTML=_tempAttr;
break;
case “num”:
break;
case “fn”://绑定方法
for(var fns in _tempAttr){
if (window.addEventListener) {
obj.addEventListener(fns, _tempAttr[fns], false);
} else {
if (window.attachEvent) {
obj.attachEvent(“on” + fns, _tempAttr[fns]);
}
}
}
break;
default : //设置属性
obj.setAttribute(attr2,_tempAttr);break;
}
}
}
}
return this;
}
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图