Extjs查看渲染问题,Uncaught TypeError:无法读取属性' tooNarrow'未定义的

时间:2015-08-29 05:07:29

标签: javascript extjs extjs4 extjs5

你好我有以下视图,他们与Extjs 4.1库工作得很好,但知道我使用5.1版本,当我尝试使用它时,它不会在doLayout()上显示pproperly并显示Uncaught TypeError:无法读取属性&# 39; tooNarrow'未定义的。我是Extjs的新手也许在5.1库中有不同的选项,我不知道?请帮助
拳头我正在尝试加载PersonPanelView:

PersonPanelView:

    Button btn = (Button) findViewById(R.id.button2);
    btn.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View view) {
            Double s1 = 0.0;
            s1 = Double.parseDouble(height.getText().toString());
            Double s2 = 0.0;
            s2 = Double.parseDouble(weight.getText().toString());
            if (height.getText().length() == 0 || weight.getText().length() == 0 || (height.getText().length() == 0 && weight.getText().length() == 0)) {
                Context context = getApplicationContext();
                CharSequence text = "Enter the missing values";
                int duration = Toast.LENGTH_LONG;
                final Toast tost = Toast.makeText(context, text, duration);

                tost.show();
            } else {
                Double bmi;
                bmi = s2 / (s1 * s1);
                it.putExtra("bmi_val", bmi);
                startActivity(it);
            }


        }
    });

PersonList:

Ext.define('Pandora.view.Person.PersonPanelView', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.PersonPanel',
    layout: 'hbox',

    items:[
        {
            flex:1.8,
            xtype:'PersonList',
            height:'100%',
            title:'List of persons'
        },
        {
            flex:3,
            height:'100%',
            xtype:'panel',
            id:'personProfileId',
            autoScroll:true,
            title:'Person profile',
            //frame:true,
            bodyStyle:{background: '#99bce8'}
        }

    ]
});

PersonStore:

Ext.define('Pandora.view.Person.PersonListView', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.PersonList',
    layout: 'border',
    title: 'Person',
    store: 'Person.PersonStore',
    autoScroll:true,
    dockedItems:[
        {
            tbar:[
                { xtype:'button', text:'Add Person',name:'addPerson'        },'-',
                { xtype:'button', text:'Edit Person',name:'editPerson'      },'-',
                { xtype:'button', text:'Remove Person',name:'removePerson'  },'-',
                { xtype:'button', text:'Add Conference',name:'addConference'},'-',
                { xtype:'button', text:'Add Event',name:'addEvent'}
            ]
        }
    ],
    columns: [
        { text: 'Login',  dataIndex: 'login' , flex:1,align:'center'},//
        { text: 'Name', dataIndex: 'name', flex:1,align:'center'},
        { text: 'Surname', dataIndex: 'surname', flex:1,align:'center'},
    ]
});

PersonModel:

Ext.define('Pandora.store.Person.PersonStore', {
    extend: 'Ext.data.Store',
    model: 'Pandora.model.Person.PersonModel',
    autoLoad:true,
    proxy: {
        type: 'ajax',
        url: 'do/person/getAllPersons'
    }
});

1 个答案:

答案 0 :(得分:6)

你应该在这里做一些事情:

1 - 除非你真的知道自己在做什么,否则你不应该改变网格布局。删除您设置layout: 'border'的行,错误将消失。

2 - tbar不会进入dockedItems配置。

3 - autoScroll配置现在称为可滚动,默认情况下设置为true。

这就是你的网格应该是这样的:

Ext.define('Pandora.view.Person.PersonListView', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.PersonList',
    title: 'Person',
    store: Ext.create('Pandora.store.Person.PersonStore'),

    tbar:[
        { xtype:'button', text:'Add Person',name:'addPerson'        },'-',
        { xtype:'button', text:'Edit Person',name:'editPerson'      },'-',
        { xtype:'button', text:'Remove Person',name:'removePerson'  },'-',
        { xtype:'button', text:'Add Conference',name:'addConference'},'-',
        { xtype:'button', text:'Add Event',name:'addEvent'}
    ],
    columns: [{ 
        text: 'Login',  dataIndex: 'login' , flex:1,align:'center'
    },{ 
        text: 'Name', dataIndex: 'name', flex:1,align:'center'
    },{ 
        text: 'Surname', dataIndex: 'surname', flex:1,align:'center'
    }]
});