Ext中组件加载问题

在使用Ext的时候,我在一个js文件定义了一个form表单组件,在另一个js文件中通过组件的id来获得组件(Ext.Cmp())在ie7下能够获得组件,但是在ie6和ff3下都不能找到这个组件,错误提示这个组件未定义.
通过我自己的测试:
Ext.ComponentMgr.all.each(function(r){alert(r.id)}) 发现定义的form表单在ie6和ff下都没有被加载.
在定义form表单的js文件里面我做的测试

alert("aa");
var form = new Ext.FormPanel({
...
});
alert("bb");

alert("aa")执行了的,但是alert("bb");未执行
请问这个是怎么回事?

[b]问题补充:[/b]
是我写错了,是用的Ext.getCmp();
[b]问题补充:[/b]
js代码:

第一次用Ext ,不足之处请指教

//用户痕迹统计树形菜单
var statisticsTree = new Ext.tree.TreePanel({
id:'statisticsTree',
frame:false,
border:false,
autoScroll:true,
enableDD:false,//是否支持拖拽效果
containerScroll: true,//是否支持滚动条
split:true,
rootVisible:false,//是否显示跟节点
//collapseMode:'mini',//在分割线处出现按钮
collapsible: true,
margins:'0 0 5 5',
loader:new Ext.tree.TreeLoader({

dataUrl:'js/extjs/statisticsTree.json'

})
});
var statisticsRoot = new Ext.tree.AsyncTreeNode({
text:'统计',
draggable:false,
id:'statisticsRoot'
});
statisticsTree.setRootNode(statisticsRoot);

//ippv统计
var ippv_ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({

//url:'/platform/management/statistics/statisticsIpPv.htm',

method:'post'

}),
autoLoad:false,
remoteSort:false, //服务器端排序
reader: new Ext.data.JsonReader({root:'list',totalProperty:'pagination.count'}, [
{name: '_date'},
{name: 'visitorquantity',type:'int'},
{name: 'ipquantity',type:'int'},
{name: 'pvquantity',type:'float'}
])
});
ippv_ds.load({params:{'pagination.begin':0,'pagination.pageSize':20}});
var sm=new Ext.grid.CheckboxSelectionModel();//表格复选列
var ippv_cm = new Ext.grid.ColumnModel([
{header:'日期',dataIndex:'_date',renderer: function(value){
if(value!=null&&value.length>0){
var d = value.split('T');
return d[0];

}
return value;
}},
{header:'访客数',dataIndex:'visitorquantity'},
{header:'独立IP数',dataIndex:'ipquantity'},
{header:'PV',dataIndex:'pvquantity'}
]);
ippv_cm.defaultSortable = true;

var ippv_form = new Ext.FormPanel({
    id:'ippv_form',
    border: false,
    labelAlign:'right',
    region:'north',
    height:80,
    frame:true,
    items:[new Ext.form.FieldSet({
        title:'查询',
        columnWidth: 1,
        layout: 'column',
        border: true,
        anchor:'50%',
        labelWidth: 50,
        items:[{
            columnWidth:.4,
            layout: 'form',
            border:false,
            items: [{
                xtype:'datefield',
                fieldLabel: '日期:从',
                name: 'beginDate1',
                format:'Y-m-d',
                id:'beginDate1',
                anchor: '90%'
            }]
        },{
            columnWidth:.4,
            layout: 'form',
            border:false,
            items: [{
                xtype:'datefield',
                fieldLabel: '到',
                name: 'endDate1',
                format:'Y-m-d',
                id:'endDate1',
                anchor:'90%'
            }]
        },{
            columnWidth:.2,
            layout: 'form',
            border:false,
            items: [{
                xtype:'button',
                text:'查询',
                handler: function(){
                    var beginDate = document.getElementById('beginDate1').value;
                    var endDate = document.getElementById('endDate1').value;
                    var url = "/platform/management/statistics/statisticsIpPv.htm?beginDate="+beginDate+"&endDate="+endDate;
                    ippv_ds.proxy = new Ext.data.HttpProxy({
                        url:url,   
                        method:'post'  
                    });
                    ippv_ds.reload();
                    ippv_grid.reconfigure(ippv_ds,ippv_cm);
                }
            }]
        }]
    })]
});
var ippv_grid = new Ext.grid.GridPanel({
    id: 'ippv_grid',
    region:'center',
    loadMask:true,
    ds: ippv_ds,
    cm: ippv_cm,
    height:500,
    layout:'fit',
    frame:true, 
    bbar: new Ext.PagingToolbar({
        pageSize: 20,
        store: ippv_ds,
        paramNames:{start: 'pagination.begin', limit: 'pagination.pageSize'},
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
        emptyMsg: "没有记录"
    })       
});

//联盟-搜索引擎统计
var union_search_ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({

//url:'/platform/management/statistics/statisticsFrom.htm',

method:'post'

}),
remoteSort:true, //服务器端排序
reader: new Ext.data.JsonReader({root:'list',totalProperty:'pagination.count'}, [
{name: '_from'},
{name: 'request_quantity',type:'int'},
{name: 'average_request_page_quantity',type:'float'},
{name: 'bounce_rate',type:'float'},
{name: 'register_visitor',type:'int'},
{name: 'registration_rate',type:'float'},
{name: 'order_generation_quantity',type:'int'},
{name: 'listprice',type:'float'},
{name: 'visitor_back_quantity',type:'int'},
{name: 'visitor_quantity',type:'int'},
{name: 'average_back_quantity',type:'float'}
])
});
union_search_ds.load({params:{'pagination.begin':0,'pagination.pageSize':20}});
var union_search_cm = new Ext.grid.ColumnModel([
{header:'来源地',dataIndex:'_from'},
{header:'访问量',dataIndex:'request_quantity'},
{header:'平均访问页面',dataIndex:'average_request_page_quantity'},
{header:'跳出率',dataIndex:'bounce_rate'},
{header:'注册率',dataIndex:'registration_rate'},
{header:'注册人数',dataIndex:'register_visitor'},
{header:'下单人数',dataIndex:'order_generation_quantity'},
{header:'销售码洋',dataIndex:'listprice'},
{header:'回访客数量',dataIndex:'visitor_back_quantity'},
{header:'访客数量',dataIndex:'visitor_quantity'},
{header:'平均回访次数',dataIndex:'average_back_quantity'}
]);
union_search_cm.defaultSortable = true;

var union_search_form = new Ext.FormPanel({
    id:'union_search_form',
    border: false,
    labelAlign:'right',
    region:'north',
    height:80,
    frame:true,
    items:[new Ext.form.FieldSet({
    title:'查询',
    columnWidth: 1,
    layout: 'column',
    border: true,
    anchor:'50%',
    labelWidth: 50,
    items:[{
        columnWidth:.4,
        layout: 'form',
        border:false,
        items: [{
            xtype:'datefield',
            fieldLabel: '日期:从',
            name: 'beginDate2',
            format:'Y-m-d',
            id:'beginDate2',
            anchor: '90%'
        }]
    },{
        columnWidth:.4,
        layout: 'form',
        border:false,
        items: [{
            xtype:'datefield',
            fieldLabel: '到',
            name: 'endDate2',
            format:'Y-m-d',
            id:'endDate2',
            anchor:'90%'
        }]
    },{
        columnWidth:.2,
        layout: 'form',
        border:false,
        items: [{
            xtype:'button',
            text:'查询',
            handler: function(){
                var beginDate = document.getElementById('beginDate2').value;
                var endDate = document.getElementById('endDate2').value;
                var url = "/platform/management/statistics/statisticsFrom.htm?beginDate="+beginDate+"&endDate="+endDate;
                union_search_ds.proxy = new Ext.data.HttpProxy({
                    url:url,   
                    method:'post'  
                });
                union_search_ds.reload();
                union_search_grid.reconfigure(union_search_ds,union_search_cm);
            }
        }]
    }]
})]
});
var union_search_grid = new Ext.grid.GridPanel({
    id: 'union_search_grid',
    region:'center',
    loadMask:true,
    ds: union_search_ds,
    cm: union_search_cm,
    height:500,
    layout:'fit',
    frame:true, 
    bbar: new Ext.PagingToolbar({
        pageSize: 20,
        store: union_search_ds,
        paramNames:{start: 'pagination.begin', limit: 'pagination.pageSize'},
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
        emptyMsg: "没有记录"
    })       
});

//搜索引擎关键字统计

var keyword_ds = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({   
        //url:'/platform/management/statistics/statisticsKeyword.htm',   
        method:'post'  
    }), 
    autoLoad:false,
    remoteSort:true,  //服务器端排序
    reader: new Ext.data.JsonReader({root:'list',totalProperty:'pagination.count'}, [
        {name: '_from'},
        {name: 'keyword',type:'string'},
        {name: 'search_quantity',type:'int'}
        ])
});
keyword_ds.load({params:{'pagination.begin':0,'pagination.pageSize':20}}); 
var keyword_cm = new Ext.grid.ColumnModel([
    {header:'来源地',dataIndex:'_from'},
    {header:'关键字',dataIndex:'keyword'},
    {header:'搜索次数',dataIndex:'search_quantity'}
]);
keyword_cm.defaultSortable = true;
var keyword_form = new Ext.FormPanel({
    id:'keyword_form',
    border: false,
    labelAlign:'right',
    region:'north',
    height:80,
    frame:true,
    items:[new Ext.form.FieldSet({
    title:'查询',
    columnWidth: 1,
    layout: 'column',
    border: true,
    anchor:'50%',
    labelWidth: 50,
    items:[{
        columnWidth:.4,
        layout: 'form',
        border:false,
        items: [{
            xtype:'datefield',
            fieldLabel: '日期:从',
            name: 'beginDate3',
            format:'Y-m-d',
            id:'beginDate3',
            anchor: '90%'
        }]
    },{
        columnWidth:.4,
        layout: 'form',
        border:false,
        items: [{
            xtype:'datefield',
            fieldLabel: '到',
            name: 'endDate3',
            format:'Y-m-d',
            id:'endDate3',
            anchor:'90%'
        }]
    },{
        columnWidth:.2,
        layout: 'form',
        border:false,
        items: [{
            xtype:'button',
            text:'查询',
            handler: function(){
                var beginDate = document.getElementById('beginDate3').value;
                var endDate = document.getElementById('endDate3').value;
                var url = "/platform/management/statistics/statisticsKeyword.htm?beginDate="+beginDate+"&endDate="+endDate;
                keyword_ds.proxy = new Ext.data.HttpProxy({
                    url:url,   
                    method:'post'  
                });
                keyword_ds.reload();
                keyword_grid.reconfigure(keyword_ds,keyword_cm);
            }
        }]
    }]
})]
});
var keyword_grid = new Ext.grid.GridPanel({
    id: 'keyword_grid',
    ds: keyword_ds,
    cm: keyword_cm,
    region:'center',
    loadMask:true,
    height:500,
    layout:'fit',
    frame:true,
    bbar: new Ext.PagingToolbar({
        pageSize: 20,
        store: keyword_ds,
        paramNames:{start: 'pagination.begin', limit: 'pagination.pageSize'},
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
        emptyMsg: "没有记录"
    })       
});

// 页面访问数量统计

var access_quantity_ds = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({   
        //url:'/platform/management/statistics/statisticsPage.htm',   
        method:'post'  
    }), 
    autoLoad:false,
    remoteSort:true,  //服务器端排序
    reader: new Ext.data.JsonReader({root:'list',totalProperty:'pagination.count'}, [
        {name: 'page'},
        {name: 'quantity',type:'int'}
        ])
});
access_quantity_ds.load({params:{'pagination.begin':0,'pagination.pageSize':20}}); 
var access_quantity_cm = new Ext.grid.ColumnModel([
    {header:'页面',dataIndex:'page'},
    {header:'访问数量',dataIndex:'quantity'}
]);
access_quantity_cm.defaultSortable = true;
var access_quantity_form = new Ext.FormPanel({
    id:'access_quantity_form',
    border: false,
    labelAlign:'right',
    region:'north',
    height:80,
    frame:true,
    items:[new Ext.form.FieldSet({
    title:'查询',
    columnWidth: 1,
    layout: 'column',
    border: true,
    anchor:'50%',
    labelWidth: 50,
    items:[{
        columnWidth:.4,
        layout: 'form',
        border:false,
        items: [{
            xtype:'datefield',
            fieldLabel: '日期:从',
            name: 'beginDate4',
            format:'Y-m-d',
            id:'beginDate4',
            anchor: '90%'
        }]
    },{
        columnWidth:.4,
        layout: 'form',
        border:false,
        items: [{
            xtype:'datefield',
            fieldLabel: '到',
            name: 'endDate4',
            format:'Y-m-d',
            id:'endDate4',
            anchor:'90%'
        }]
    },{
        columnWidth:.2,
        layout: 'form',
        border:false,
        items: [{
            xtype:'button',
            text:'查询',
            handler: function(){
                var beginDate = document.getElementById('beginDate4').value;
                var endDate = document.getElementById('endDate4').value;
                var url = "/platform/management/statistics/statisticsPage.htm?beginDate="+beginDate+"&endDate="+endDate;
                access_quantity_ds.proxy = new Ext.data.HttpProxy({
                    url:url,   
                    method:'post'  
                });
                access_quantity_ds.reload();
                access_quantity_grid.reconfigure(access_quantity_ds,access_quantity_cm);
            }
        }]
    }]
})]
});
var access_quantity_grid = new Ext.grid.GridPanel({
    id: 'access_quantity_grid',
    ds: access_quantity_ds,
    cm: access_quantity_cm,
    region:'center',
    loadMask:true,
    height:500,
    layout:'fit',
    frame:true,
    bbar: new Ext.PagingToolbar({
        pageSize: 20,
        store: access_quantity_ds,
        paramNames:{start: 'pagination.begin', limit: 'pagination.pageSize'},
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
        emptyMsg: "没有记录"
    })     
});

//各来源地销售统计

var from_ds = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({   
        //url:'/platform/management/statistics/statisticsCommodity.htm',   
        method:'post'  
    }), 
    autoLoad:false,
    remoteSort:true,  //服务器端排序
    reader: new Ext.data.JsonReader({root:'list',totalProperty:'pagination.count'}, [
        {name: '_from'},
        {name: 'commodity.name',type:'string'},
        {name: 's',type:'int'}
        ])
});
from_ds.load({params:{'pagination.begin':0,'pagination.pageSize':20}}); 
var from_cm = new Ext.grid.ColumnModel([
    {header:'来源地',dataIndex:'_from'},
    {header:'商品名',dataIndex:'commodity.name',sortable:false},
    {header:'销售数量',dataIndex:'s'}
]);
from_cm.defaultSortable = true;

var from_form = new Ext.FormPanel({
    id:'from_form',
    border: false,
    labelAlign:'right',
    region:'north',
    height:140,
    frame:true,
    items:[new Ext.form.FieldSet({
    title:'查询',
    columnWidth: 1,
    layout: 'column',
    border: true,
    anchor:'50%',
    labelWidth: 60,
    items:[{
        columnWidth:.4,
        layout: 'form',
        border:false,
            items: [{
                width:130,
                xtype:'datefield',
                fieldLabel: '日期,从',
                name: 'beginDate5',
                format:'Y-m-d',
                id:'beginDate5'
            }, {
                width:130,
                xtype:'textfield',
                fieldLabel: '来源地',
                allowBlank: false,
                blankText:'来源地不能为空',                    
                name: 'from',
                id:'from'
            }]
        },{
            columnWidth:.4,
            layout: 'form',
            items: [{
                width:130,
                xtype:'datefield',
                fieldLabel: '到',
                format:'Y-m-d',
                name: 'endDate5',
                id:'endDate5'
            },{
                width:130,
                xtype:'numberfield',
                fieldLabel: '商品编号',
                name: 'commodityId',
                id:'commodityId'
            }]
    },{
        columnWidth:.4,
        layout: 'form', bodyStyle:'padding:20px 5px 0',
        border:false,
        items: [{
            xtype:'button',
            text:'查询',
            handler: function(){
                if (!from_form.getForm().isValid()) {
                    return;
                }
            var beginDate = document.getElementById('beginDate5').value;
            var endDate = document.getElementById('endDate5').value;
            var from = from_form.getForm().findField("from").getValue();
            var commodityId = from_form.getForm().findField("commodityId").getValue();
            var url = "/platform/management/statistics/statisticsCommodity.htm?beginDate="+beginDate+"&endDate="+endDate+"&from="+from+"&commodityId="+commodityId;
                from_ds.proxy = new Ext.data.HttpProxy({
                    url:url,   
                    method:'post'  
                });
                from_ds.reload();
                from_grid.reconfigure(from_ds,from_cm);
            }
        }]
    }]
})]
});
var from_grid = new Ext.grid.GridPanel({
    id: 'from_grid',
    ds: from_ds,
    cm: from_cm,
    region:'center',
    loadMask:true,
    layout:'fit',
    height:500,
    frame:true,
    bbar: new Ext.PagingToolbar({
        pageSize: 20,
        store: from_ds,
        paramNames:{start: 'pagination.begin', limit: 'pagination.pageSize'},
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
        emptyMsg: "没有记录"
    })       
});

[b]问题补充:[/b]
2个alert()之间的代码,是user_trace.statistics.js 里面ippv_form
[b]问题补充:[/b]
页面太简单了嘛,直接引用2个js文件就可以了
[b]问题补充:[/b]
请问怎么才是js封装到位了,给个例子嘛

9个回答

id这个东西是要尽量避免的.并不是你的就一定要getCmp ,你也同样可以用组件的items来访问的,具体去翻api吧.我也不想多说了.累呀,感觉回答问题的比提问的还要热情!

首先获得组件是通过 Ext.getCmp(id) ,并不是Ext.Cmp()

你说alert('bb');没有执行是因为在这行代码前面有错误!,
具体错误就要看你的代码了

把代码给全吧

哥们,负责人一点.你给这个代码,我能运行吗?

你这都是组件的定义,我怎么知道你是怎么来搭建他们,怎么来组合他们.怎么个显示他们?

代码还是不全哇!

alert("aa");
var form = new Ext.FormPanel({
...
});
alert("bb");

我要的是你那两个alert()之间的代码,你把中间的代码给我看看 先.如果问题不在这里,你在把代码给我.最好打包成一个压缩包.已附件的形式

我会被你气得吐血的

你给我3个文件,页面呢?他们三个之间的关系是什么样的.我不看你页面我怎么知道你是怎么引用他们呢?

算了.你拿这些文件区组建一个工程看能运行起来么?在你代码里面还要求其他的页面的引用.没有那些页面我这里就已经是一大堆错误了, 如果单从你指定的ippv_form 这个代码看不出来有什么问题.如果你不方便把示例代码给全的话,可以的话你加我Q3990995,我远程帮你看看

EXTjs 根本就很少能用得到 getCmp()

你的js没封装到位

全部封装到位后

几乎所用的 被new过的组件 都可以通过 items准确定位
而且组件 无需铺天盖地的到处定ID 还生怕定重复了

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问