JavaScript日記

ExtJS Viewportを使用しないLayout方法

1 Mins read

ExtJSでViewportを使用しないでLayoutする方法です。

前にも記載したのですが、Viewportはお手軽に使える一方、画面を乗っ取ってしまうので
画面の一部のコンポーネントとして組み込むことが出来ません。

Panelのみでサンプルを作成してみました。

Ext.onReady(function() {

Ext.get(document.body).update('<div id="test1"></div>');
new Ext.Panel({
	id: 'hoge',
	//styleを'viewport'に
    defaultType: 'viewport',
	//render先は
    renderTo: 'test1',
	//frameで枠を表示
	frame: true,
	//タイトル設定
	title: 'test1 title',
	//widthの設定
	//width: 400,
	width: '100%',
	height: 600,
	//autoHeight: true,
	//ウィンドウリサイズイベントを監視し内容を再描画する
	//「width: '100%'」対応
	monitorResize: true,
	//layout方法は「border」
	layout: 'border',
	//子要素に対し標準設定
	defaults: {
				xtype: 'panel',
				autoScroll: true, 
				minSize: 30,
				maxSize: 100,
				//パネルの開閉
				collapsible: true,
				frame: true
				},
	items: [{
		//regionでこのパネルは「north」=上へ
		region: 'north',
		//ヘッダー表示
		header: true,
		height: 50,
		//split表示On
		split: true,
	    html: 'hoge HTML north'
	},{
		//regionでこのパネルは「west」=左へ
		region: 'west',
		width: 50,
		//split表示On
		split: true,
	    html: 'hoge HTML west'
	},{
		//regionでこのパネルは「east」=右へ
		region: 'east',
		//タイトルを設定すると自動的にヘッダー表示がOnになる
		title: 'east title',
		width: 50,
		//split表示On
		split: true,
	    html: 'hoge HTML east'
	},{
		//regionでこのパネルは「south」=下へ
		region: 'south',
		width: 50,
		//split表示On
		split: false,
	    html: '<p>hoge HTML south 「split: false」</p>'
	},{
		//regionでこのパネルは上「center」メイン画面
		region: 'center',
	    html: 'hoge HTML center'
	}]			
});

});

また、親、子ともframeをfalseにすると丸みが無くなり、標準?表示になります。
「frame: false」

Related posts
Windows11パソコンのこと日記

リモートデスクトップ 音が出ない Windows11

1 Mins read
  • 状況
    • リモートデスクトップ接続でリモート側のアプリからホストへ音が出ない場合
    • リモート側のSleep後に音が出なくなった場合
  • 環境
    • host側:Windows11 22H2
    • remote側:Windows11 22H2
  • 対応方法
    • remote側のWindowsの検索で「service」と入力
    • サービスアプリをダブルクリックで起動する
    • 「Windows Audio」というサービスを選択し、右クリックから「サービスの再起動」
日記

Swagger EditerをDockerでローカル起動

1 Mins read

swagger

API開発で設計したDocment管理として使用できサンプルコードとしてJSONにしてくれて、よしなにPostmanみたいな動きしてくれるやつ

最近現場で使っているところが増えてる

ローカルでサーバー起動(例は3つ、外部APIサーバーが3つある場合などなど)

docker pull swaggerapi/swagger-editor
docker run -d -p 8090:8080 swaggerapi/swagger-editor
docker run -d -p 8091:8080 swaggerapi/swagger-editor
docker run -d -p 8092:8080 swaggerapi/swagger-editor

http://localhost:8090 などをブラウザで開き

ソース管理と一緒にリポジトリ内などにあるyamlファイル内容をコピペでブラウザ左Windowへ貼り付け

get、postなどテストをおこなう

※APIなので多少仕様の理解が必要となる

よく一緒に使われるのが OpenAPI

こちらはAPI設計ファイルとなったyamlファイルを読み込ませることにより指定した言語としてI/O部分のソースコードを自動でジェネレートしてくれるツール、ただし良いところばかりではなく、間違ったソースもジェネレートしてくるから地雷除去が必要な場面に出くわすこと多い

 

 

日記

AlmaLinux 8 GPG キー変更の準備をする

1 Mins read

dnfコマンドでエラー

dnf update

AlmaLinux 8 - BaseOS 485 kB/s | 3.4 kB 00:00 
GPG 鍵 0xC21AD6EA をインポート中: 
Userid : "AlmaLinux <packager@almalinux.org>" 
Fingerprint: E53C F5EF 91CE B0AD 1812 ECB8 51D6 647E C21A D6EA 
From : /etc/pki/rpm-gpg/RPM-GPG-KEY-AlmaLinux 
これでよろしいですか? [y/N]: y 
鍵のインポートに成功しました 
鍵をインポートしても役に立ちませんでした。鍵が間違っていませんか?

キーが新しくなった

AlmaLinux 8 GPG キーの変更

2024 年 1 月 12 日に、更新された GPG キーを使用して AlmaLinux 8 の RPM パッケージとリポデータへの署名を開始します。以下の手順を実行すると、切り替え後も引き続き問題なくアップデートを受信できるようになります。

システムに新しい AlmaLinux 8 GPG キーが既に含まれており、それを信頼していることを確認したい場合は、それをインポートするだけです。

sudo rpm --import https://repo.almalinux.org/almalinux/RPM-GPG-KEY-AlmaLinux
チームを強化する

サービスの
サブスクリプションの利点を説明するテキストを追加します。