Wątek przeniesiony 2016-12-25 13:24 z Webmastering przez Ktos.

ExtJs - nowy projekt

0

Chciałbym założyć czysty projekt w Intelij z ExtJs MVC czyli foldery: model,store,view i controller. Wszystko co ściągam z gita i chce dostosować pod siebie wywala mi błędami przy uruchomieniu. Jakich plików potrzebuję,żeby założyć czysty projekt ? Może posiadacie jakieś linki gdzie te foldery sa puste i mozna od poczatku działać i wrzucać pliki ?

1

Tak właściwie to potrzebujesz wygenerować projekt i zbudować go za pomocą Sencha CMD, bez tego raczej nie ruszy. Sencha CMD generuje ci bootstrap.js, który z kolei ładuje aplikacje. Poza tym musi być poprawnie skonfigurowana w pliku app.json. Ten musi wskazywać na poprawny plik, który wywołuje Ext.application({config}); Generalnie dużo zabawy, które zrobi za ciebie sencha generate app i sencha app build.

0

Ok wcześniej generowałem projekt z ExtJs 6 i Sencha Cmd 6 więc zamiast MVC dostawałem MVVM. Ściągnąłem ExtJs4 z jakiegoś starego gita i odpaliłem generowanie app w Sencha Cmd 6 - projekt zbudował się tak jak należy czyli jest model,store,view i controller.

0

Dokleję się do tego tematu i wrzucę tu swój kod, który nie wiem dlaczego nie działa. Wam pewnie szybko rzuci się w oczy to czego tu brakuje.
Chodzi o to,że nic nie pokazuje się na stronie. Myślę że problem jest z którymś widokiem.

To jest Grid

 Ext.define('ExtJsMvc.view.PeopleGrid', {
        extend: 'Ext.grid.Panel',


        xtype: 'peopleGrid',
        title: 'Dane osób',
        store: 'People',

        initComponent: function () {
            var me = this;
            this.column =
            [
                {text: 'Id', dataIndex: 'id'},
                {text: 'Imię', dataIndex: 'firstName'},
                {text: 'Nazwisko', dataIndex: 'lastName'}
            ]

            this.callParent(arguments);

        }
    }
)

który wrzucam do widoku głównego:

Ext.define('ExtJsMvc.view.Viewport', {

    extend: 'Ext.container.Viewport',
    requires: [
        'Ext.tab.Panel',
        'Ext.layout.container.Border',
        'ExtJsMvc.view.PeopleGrid'
    ],


    layout: {
        type: 'border'
    },
    items: [{
        region: 'west',
        xtype: 'panel',
        title: 'Formularz',
        width: 150
    }, {
        region: 'center',
        xtype: 'peopleGrid'

    }]


}); 

a następnie uruchamiam w app.js :

 Ext.application({
    name: 'ExtJsMvc',


    views: [
        'Viewport'
    ],

    controllers: [
        'PeopleGrid'
    ],

    stores: [
        'People'
    ]


});

No i niestety nic się nie pojawia. 100% zgubiłem jakąś linijkę kodu ale jaką :) ?

0

Nie robiłem nic w ExtJS 4 (tylko od 6.0.0 w gore), ale rzuca mi się w oczy

this.columns

poza tym, nie wiem jak w starszych wersjach ale w nowej trzeba zadeklarować w Ext.application() nazwe glownego widoku (config mainView) ale widzę, że w starszej jakoś inaczej to działa.

A, i w requiresach do Viewportu masz tab.Panel a uzywasz xtype panel, czyli panel.Panel. Najlepiej otworz konsole podczas ladowania, zobacz i przeanalizuj co wypluwa.

0

ok ogarnąłem to co wyżej tylko zastanawiam się w jaki sposób powinienem połączyć view z controllerem a dokładniej w jaki sposób spowodować żeby po wybraniu wiersza z tabeli wywołała się metoda controllera. Poniżej kod.

 Ext.define('ExtJsMvc.view.PeopleGrid', {
        extend: 'Ext.grid.Panel',

        xtype: 'peopleGrid',
        title: 'Dane osób',
        store: 'People',
        
        initComponent: function () {
            this.setupColumns();
            this.callParent();

        },
        
        setupColumns:function(){
            this.columns =
                [
                    {text: 'Id', dataIndex: 'id'},
                    {text: 'Imię', dataIndex: 'firstName'},
                    {text: 'Nazwisko', dataIndex: 'lastName'}
                ]

        }
    }
)
 Ext.define('ExtJsMvc.controller.PeopleGrid', {
    extend: 'Ext.app.Controller',
    views: ['PeopleGrid'],
    stores: ['People'],
    
    init: function () {
        var me = this;
        this.control({
           'mainView > peopleGrid':{
               oneRowSelectionChange : me.onGridSelect(rowIndex, colIndex)
           }
        });
    },
    
    onGridSelect: function (rowIndex, colIndex) {
        console.log("Wybrano :kliknięto wiersz" + rowIndex + ", kolumnę " + colIndex);
    }

})

Z tego co widziałem można w jakiś sposób przekazywać zdarzenia przez :

 thiz.fireEvent('itemSelect', item.get('id'), item);

a w innym miejscu nasłuchiwać wywołań tych metod ? Ale nie mogę ogarnąć jak działa to połączenie.

1 użytkowników online, w tym zalogowanych: 0, gości: 1