sencha / ext-angular Goto Github PK

I noticed that the current app init method hard codes the tag in the bootstrap module. This reminds me of the classical viewport method, which I think we should stay away from. If I want to embed a grid in my angular app it's going to be hard with this technique.

Instead we can use an app initializer, which would allow us to quickly wait for Ext to be loaded, which by the way, web pack is loading so it may not even be needed. But nevertheless guarantees Ext js to be loaded/imported by before moving on to the app component.

I mocked up an example using the APP_INITIALIZER to load. I haven't spent much time absorbing the spec, so there may be an even better way to write this so it abstracts away the provider implementation.

Overall:

• It uses the standard system
• It doesn't hard code where the app is inserted in the DOM
• It doesn't rely on the viewport, which should be a component in which could be used or not used.
• It does provide Ext before render

This example stands on it's own, just insert into an app an run.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Component } from '@angular/core';
import { Injectable } from '@angular/core';
import { APP_INITIALIZER } from '@angular/core';

//declare Ext
declare var Ext: any

//Import Ext Angular module and dependency files
import { ExtAngularModule } from '@sencha/ext-angular'
//import { ExtAngularBootstrapService } from '@sencha/ext-angular/esm5/lib/ext-angular-bootstrap.service'
//import { ExtAngularBootstrapComponent } from '@sencha/ext-angular/esm5/lib/ext-angular-bootstrap.component'


declare var Ext: any;

@Component({
    selector: 'app-root',
    styles: [`
            `],
    template: `
        <container #item padding="10">
            <button #item
                text="Say Hello"
                [handler]="this.sayHello"
                ui="action raised"
            ></button>
            <button  #item
                text="Say Goodbye"
                [handler]="this.sayGoodbye"
            ></button>
            <div #item>
            {{ this.message }}
            </div>
        </container>
            `
})
export class AppComponent {
    constructor() {
        console.log("AppComponent initialized...");
    }

    message: string;

    sayHello = () => {
        this.message = 'Hello world!';
    }

    sayGoodbye = () => {
        this.message = 'Goodbye cruel world.';
    }
}


// Import Ext JS  
@Injectable()
export class ExtInit {
    constructor() { }

    // TODO maybe
    // providers: [
    //     ExtInit, ExtInit.provider(),
    // ],
    // static provider() {
    //     return { provide: APP_INITIALIZER, useFactory: ExtInit.init, deps: [ExtInit], multi: true };
    // }

    static init(exitInit: ExtInit) {
        return () => exitInit.initializeExt();
    }

    initializeExt() {
        return new Promise<void>((resolve, reject) => {
            console.log("Loading Ext JS...");
            Ext.application({
                name: "$ExtAngularApp",
                quickTips: true,
                launch: () => {
                    console.log("Ext has loaded...");
                    // Ext JS has Loaded, ready to continue 
                    resolve();
                }
            })
        });
    }
}

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule, ExtAngularModule
    ],
    providers: [
        ExtInit, { provide: APP_INITIALIZER, useFactory: ExtInit.init, deps: [ExtInit], multi: true },
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

Hi everyone!

after following instructions in README.md I successfully created app Cool Ext Angular App, but it failed to start, because ext dependency might not have installed with npm install?

npm start

> @sencha/ext-angular-boilerplate@6.7.0 start C:\Users\jerne\Desktop\NEWEST\cool-ext-angular-app
> npm run dev

> @sencha/ext-angular-boilerplate@6.7.0 dev C:\Users\jerne\Desktop\NEWEST\cool-ext-angular-app
> webpack-dev-server --env.verbose=no --env.environment=development  --env.browser=true  --env.watch=yes

undefined
i [ext]: ext-webpack-plugin v6.7.0, Ext JS v6.7.0 Commercial Edition, Sencha Cmd v6.7.0.36, webpack v4.29.0, angular v7.2.2
i [ext]: Building for development
i [ext]: genProdData: false
i ｢wds｣: Project is running at http://0.0.0.0:1962/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from ./build
i ｢wds｣: 404s will fallback to /index.html
i [ext]: Adding ext-angular\ext.js and ext-angular\ext.css to index.html
i [ext]: Building Ext bundle at: \build\ext-angular
i [ext]: [ERR] Directory \build\ext-angular\node_modules\@sencha\ext not recognized as a framework
i [ext]: [ERR] Unable to load required framework: ext@null
here
false
i [ext]: Opening browser at http://localhost:1962
i [ext]: Completed ext-webpack-plugin processing
× ｢wdm｣: Built at: 01/25/2019 11:31:58 AM
Entrypoint polyfills = polyfills.js polyfills.js.map
Entrypoint main = main.js main.js.map

ERROR in i [ext]: Directory \build\ext-angular\node_modules\@sencha\ext not recognized as a framework

ERROR in i [ext]: Unable to load required framework: ext@null

ERROR in 321
i ｢wdm｣: Failed to compile.

I do what the guide says，everything is ok，when I run npm start，come out the error :Failed to compile.It seems at \node_modules@sencha\cmd\bin\sencha:12:42

I was integrating an ExtAngular component in an existing Angular project.
After following the instructions at:
https://github.com/sencha/ext-angular/blob/ext-angular-7.2.x/packages/ext-angular-classic/guides/Creating_Angular_CLI_ExtAngular.md
Getting this uncaught ReferenceError: Ext is not defined.

I installed [email protected]. I tried various things to change the theme. I wish I could get help.

1. Unlike [email protected], there is only material under / ext-runtime-modern folder. How do I install other themes?

2. For Sencha Themer, we did the following: "npm install @ sencha / cmd --save", "node_modules / .bin / ext-angular generate theme -b theme-material -n test-ext-angular", but not open in sencha theme.

https://github.com/sencha/ext-angula...ING_STARTED.md

Throws: 'ExtColumn' is not a known element

If I change those tags to 'ExtGridcolumn' doesn't throws error but still shows a blank grid without columns.

If I set columns using setColumns() method, it shows the columns but setData() method doesn't work at all.

Hello!

I tried to get started with the getting_started.md document to integrate ext-angular within angular-cli. But unfortunately it didn't work.

First problem was, that the import in app.module.ts
import { ExtAngularModernModule } from './ext-angular-modern/ext-angular-modern.module'
is not possible because the folder doesn' exist and no @sencha/ext-angular-modern module was present. I changed that to
import { ExtAngularModule } from '@sencha/ext-angular' in hope that this is the right one.
After that i got that build error:

Data path "" should NOT have additional properties(es5BrowserSupport).

Updating @angular-builders/custom-webpack and "@angular-builders/dev-server" to the latest version fixed that.

Now the build is successfull and a "dist" folder is created with ext-files in it, but the app doesnt work because the ext.js files are not hosted within the Angular dev server. Http-Error 404

I tried a few things but nothing worked....
Can you please try it yourself an update the readme and/or can you please help me?

THX in advance!

https://github.com/sencha/ext-angular/tree/master/packages/ext-angular-kitchensink - returns 404
https://examples.sencha.com/ExtAngular/6.7.0/kitchensink/ - returns 404

The selector is hard coded in the bootstrap module. It's also declared in the app module. I would expect the app.module to declare it, would that be possible?

https://github.com/sencha/ext-angular/blob/ext-angular-7.0.x/packages/ext-angular/src/lib/ext-angular-bootstrap.component.ts#L7 - app-root

Hi,
in a App with version 6.7 I added several custom components with the syntax:
<span #extitem>

Now with 7.2 release I can add a custom components without ExtJS elements, but I'm not able to add a custom component with a ExtContainer and a ExtTreelist (If I add Container and Treelist directly to the main layout I see them)
<ExtContainer [viewport]="true" layout="fit" fitToParent="true">
<ExtPanel [docked]="'top'" [border]="true">
<span #extitem>
(a component Angular, without ExtJS Elements, -> works)


<ExtPanel [docked]="'left'" [width]="325" [border]="true" layout="fit">
<span #extitem>
(a component Angular, with ExtJS Elements, -> not works)

in china,there are much people and company use vue framework, also have some vue ui framework like element-ui,iview and so on，but in my opinion, i prefer extjs powerful gridview and unified style，so do u have plans to build etx-vue?