JavaScript

Extjs　ComboBoxにてリストをはじめからロードする方法

By
1 Mins read
341
0
Share

Extjs2.2.1においてComboBoxを使用時にサーバーからリストを取得して使用するときに初回のフォーカス移動＆クリック時にリストを取得しに行くが、これだと更新処理の時にはじめから値をセットできない。（正しくはセットできるがsetValueを使用すると後述するvalue値にセットされてしまう）

ComboBoxではdisplayValueとvalue値の2つを使い分けている。

名前のとおり「displayValue」は表示用「value」は本来の値として使用する。
（selectタグのvalueとoptionみたいな関係だろう。）

そこで、画面表示時にリストを設定するにはプロパティ設定＆メソッド呼び出しが必要になるので覚書！

config設定にて以下を含める
「lazyInit: false」

さらにrenderイベントなどに以下を含める（注意：cboは実体化されたComboBox）
cbo.doQuery(cbo.allQuery, true);

その後にsetValueすればOK！

341
0
Share
Related posts
JavaScript

javascript UI 開発時の心得 'Sencha Ext JS' 'Webix' 'OpenUI5' 'AngularJS'

By
1 Mins read

お久しぶりです。

ブログ更新が2014年から止まっていますが、筆者は変わらずに開発者もやっています。

ここ数年javascript(以下、js)のライブラリーを使用しAjaxとjsonを合わせたシステム開発で楽しんでおります。サーバーサイドはjson出力できれば何でもよいかなぁ（笑）

Sencha Ext JS Webix OpenUI5 AngularJSなど使用し、一番使い込んでいるのはExt Jsです。

20年近くこの業界におり、要件定義など紙を書く仕事より手を動かすほうが相変らず好きなので、オープン系を中心に色々な言語を経験習得してきています。

どの言語でも初めに勉強する際には日英(英の方が圧倒的に多い)関わらずサンプルを見ながら皆さん勉強し、コピペしながら使い方を覚えていくと思います。他の言語ならサンプルソースを元にしサクサクと勉強、習得、本番システム作成と思い通りの速度で構築していくことが出来るのですが、jsと言う言語については同じような要領で進めてみても開発時に四苦八苦している方やお手上げ状態で涙目になっている方を多く見受けています。

そこで要点について解説したいと思います。

まずキーとなる部分はhtmlで使用され各タグに設定もできる「id」となります。これはcssをリンクする際にも使用できますが、表示されているhtml上で必ずユニークにする必要があり、その特性を生かしjsではもっぱらdomオブジェクトの指定やdomと紐づくjsコンポーネント名として使用され外部クラスからサーチする時など、操作する際に使用されております。

タイトルで上げたjsを含め各種サンプル等では、このidが固定(リテラル)なことが多くサンプルソースを参考にし、サクッと組み合わせても、思うように動かないことが多々あるのですが、その理由の大半がid名を固定のまま使用した結果、重複してしまい動かないというパターンが圧倒的に多い気がします。

ここが心得部分となりますが、jsコンポーネントクラスのインスタンスを作成する際、親クラスで動的にユニークなidを生成しそのidを埋め込む形で子クラスを生成する。(子クラスで生成し親クラスへ送るという逆パターンも状況によりあり)また、そのidを親クラスや上位コンポーネントで記憶しておき子クラスを操作する。それにより名前の衝突を回避でき正常に操作することが可能となります。サンプルのクラスは子クラスを複数持っていることが多く、その全部のidを動的生成へ変更することと、親側で操作する部分も動的生成されたidを使用するように修正する必要があります。よってサンプルのクラスはid＝固定(リテラル)で作成されていることが多いので簡単に移植できない状況となっています。

各ライブラリには動的にidを生成するお手軽メソッドが存在することが多いので、そのメソッドを使用することをお勧めします。(例:Ext.id())

当たり前ですが世の中、何かを識別するには必ずユニーク名が最後に必要となります。マイナンバーが何処まで使用できているのかわかりませんが日本では人の区別を姓名や生年月日、市区町村などで見分けているようですが、その曖昧さのせいで間違って他人の年金を管理するなどエンジニアとしては考えられない状況が昔からあるようです。コンピュータの世界では近年macadressを使用して生成するキー、uuidを使うことが多いですかね。しかし、uuidですら天文学的にはユニークを保証できないのですが（笑）

話をjsに戻して、最近の言語、C#、VB.Net、Java、PHP、Rubyなどではあまり使用しないスレッド処理（非同期）の概念がAjaxとjsonでは求められ考えながら作りこむのが大変面白いです。昔、C言語でWindows API Messageを使用しフックされてから動作させるアプリを思い出します。

あと、jsは動的にクラス継承、メソッド、プロパティ、メンバ変数を増やしていけるスクリプト言語なので、他の言語のようにコンパイルエラーで問題点を簡単に炙り出せない。エンジニアがjsの特性を理解し、より明確なドキュメント化やカプセル化をしないとチーム単位で開発スピードを上げるのが大変そうです。

この動的に色々やれる部分は、昔、C#、Javaではシリアライズとデシリアライズとしていくつか作ったことあります。動的にクラスをテキスト化しサーバー間を通して送り先サーバーでテキストからメモリ上のインスタンスとしてクラス化し送り先のJavaでそのまま動作させるということももちろんできますし、データベースからモデルを読み込み動的にJavaクラスをインスタンス化することもできます。これはSOAPという技術でも使用されたり、同じ原理でJavaのStrutsも動いており、Strutsに関しては、この部分の脆弱性を危惧する声が大きいのも話題となっていますね。

少し話が脱線しました（笑）

js楽しいのでイチ押し言語です。

心得「id」は動的に生成する！でした。

JavaScript日記

ExtJsにて自動ID生成

By
1 Mins read

ExtJs2.2.1にて独自クラスを作成した時に、数が多くなってくると固定idでは使うのが大変になってくる。？？？何が大変かはわかるでしょう！?、部品が一杯になってくるとidが重なる可能性が出てくるってことです。

独自クラス内では自分のidを使いたい、でも固定ではid管理がメンドクサイ、って時に私が使用している方法。（ってExt内では当たり前の使い方だったりする）

id: Ext.id()
上記をコンストラクタ内に設定

ちなみにコンストラクタにて上位からconfig指定されてくる可能性がある時は
id: config.id || Ext.id()

Ext自体、上位のクラスでidを指定しなければ下位のスーパークラスにて同じようにidを振ってくれるので、あくまで独自にidを知る且つそれを使いまわす時に使用する方法です。

以上

ASP.NETJavaScriptPHP

eval使用時にJsonでの改行について

By
1 Mins read

Jsonの項目内の改行コードの記述方法について

サーバーサイドでは\マークはエスケープ文字としてよく利用されている為に
ついつい”\n”の状態にてJsonに含めるとクライアントサイドのeval時にエラーとなる。

なのでエスケープされる場合は”\\n”と2回つけることを忘れべからず！
もちろん多数ある場合も改行コードを上記のように置換処理をすること！

PHPの場合はダブルクォート「”」とシングルクォート「’」でエスケープされる、
されないが変わるので、どちらかに統一するのが望ましい。

これはJsonだけの話ではないが、重要なので記述！
javascript側では受け取ったJsonを展開するときにカッコで囲ってあげること！
例：var a = eval(‘(‘+json+’)’); //このカッコ追加は結構注意！

覚書（＾ ＾）

チームを強化する

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