我忽然發現,菜鳥更願意與人分享他的學習成果.
在開發過程中,當許多小組件拼合成乙個大元件之後,最先遇到的問題就是元件與元件之間的通訊和資料互動.
如果你的元件封裝的比較死(即在建立的時候不需要配置屬性).則可以通過組建的自定義事件來完成元件與元件之間的專案呼叫.下面的介面其實沒有必要這麼做,這麼做的目的只是為了解釋一下元件與元件之間相互互動資料:
//panel1和panel2為檢視元件,main為容器元件
ext.namespace("lesson2.panel1");
/*** @author andy_ghg
* @version 2023年10月17日1:36:26
* @description 元件之間的資料互動(grid)
* @class lesson2.panel1
* @extends ext.panel
*/lesson2.panel1 = ext.extend(ext.panel,);
this.gridsm = new ext.grid.checkboxselectionmodel();
this.gridcm = new ext.grid.columnmodel([this.gridsm,,]);
this.gridpanel = new ext.grid.gridpanel(
});this.gridpanel.on("rowclick",this.rowselect,this);
this.add(this.gridpanel);
},//提供給外部呼叫的函式,返回其內部的store
getstore:function(),
rowselect:function(grid,index,e)
});ext.namespace("lesson2.panel2");
/*** @description 元件之間的相互互動(formpanel)
* @class lesson2.panel2
* @extends ext.panel
*/lesson2.panel2 = ext.extend(ext.panel,,
defaulttype:"textfield",
labelwidth:55,
items:[,]
});this.add(this.formpanel);
this.addbutton("加入",this.addrecord,this);
},//觸發自定義事件,並向事件中傳遞乙個引數values
addrecord:function()
});ext.namespace("lesson2.main");
/*** @description 用於將兩個子元件拼合在一起的容器
* @class lesson2.main
* @extends ext.panel
*/lesson2.main = ext.extend(ext.panel,,
//todo panel2的事件處理函式,在這裡的this代表lesson2.main
//這裡通過this獲取panel1的例項,再通過panel1的例項呼叫panel1的方法getstore()
//panel1的getstore()函式會返回其內部的gridpanel的store
//引數的values就是panel2觸發了自定義事件後傳遞進來的
addrecordtogrid:function(values),
//todo 第二種方法,直接獲取panel1裡的store,效果是一樣的
addrecordtogrid_2:function(values),
//todo panel1的事件處理函式,在這裡會獲取到panel2的例項,並通過該例項獲取其內部的formpanel並呼叫
//formpanel的相應方法來達到讀取資料的目的
addrecordtoform:function(record)
});ext.onready(function());
});
如果你的元件封裝的比較靈活,則可以在容器內就直接呼叫容器中的方法進行操作,比如上面的**稍微修改一下(注意panel2的button):
ext.namespace("lesson2.panel1");
/*** @author andy_ghg
* @version 2023年10月17日1:36:26
* @description 元件之間的資料互動(grid)
* @class lesson2.panel1
* @extends ext.panel
*/lesson2.panel1 = ext.extend(ext.panel,);
this.gridsm = new ext.grid.checkboxselectionmodel();
this.gridcm = new ext.grid.columnmodel([this.gridsm,,]);
this.gridpanel = new ext.grid.gridpanel(
});this.gridpanel.on("rowclick",this.rowselect,this);
this.add(this.gridpanel);
},//提供給外部呼叫的函式,返回其內部的store
getstore:function(),
rowselect:function(grid,index,e)
});ext.namespace("lesson2.panel2");
/*** @description 元件之間的相互互動(formpanel)
* @class lesson2.panel2
* @extends ext.panel
*/lesson2.panel2 = ext.extend(ext.panel,,
defaulttype:"textfield",
labelwidth:55,
items:[,]
});this.add(this.formpanel);
}});
ext.namespace("lesson2.main");
/*** @description 用於將兩個子元件拼合在一起的容器
* @class lesson2.main
* @extends ext.panel
*/lesson2.main = ext.extend(ext.panel,]
});//在這裡捕獲panel2的自定義事件
this.panel1.on("gridrowselected",this.addrecordtoform,this);
//將兩個元件加入到檢視中去
this.add(this.panel1);
this.add(this.panel2);
},//這裡直接就獲取當前容器的子元件panel2並獲取panel2中的formpanel進行操作
addrecordtogrid_2:function(),
//todo panel1的事件處理函式,在這裡會獲取到panel2的例項,並通過該例項獲取其內部的formpanel並呼叫
//formpanel的相應方法來達到讀取資料的目的
addrecordtoform:function(record)
});ext.onready(function());
});
兩種寫法有各自的好處.看大家怎麼取捨了,當然,元件和元件之間的互動遠不只這些簡單的操作,還包括當乙個元件還未被建立,而另外乙個元件已經向這個元件傳送資料等等,這些就要考慮使用乙個第三方的資料元件來做中轉.extjs的storemgr可以做到,你也可以自己寫乙個符合你自己要求的資料元件,可以模仿storemgr寫乙個.
05元件化思想
如何建立元件 定義乙個類，然它繼承react.component屬性。class header extends react.component 元件如何使用 const jsx div reactdom.render jsx,document.getelementbyid 這樣既可 元件可以繼續復用...
ExtJS 4 2 元件的查詢方式
元件建立了，就有方法找到這些元件。在dom jquery都有各自的方法查詢元素 元件，extjs也有自己獨特的方式查詢元件 元素。本次從全域性查詢 容器內查詢 form表單查詢 通用元件等4個方面介紹元件的查詢方式。1.全域性查詢方式 2.容器內查詢 3.form查詢子元件 4.通用元件查詢方式 全...
React學習筆記（三）元件
元件 props 元件可以在它的輸出中引用其它元件，這就可以讓我們用同一元件來抽象出任意層次的細節。在react應用中，按鈕 表單 對話方塊 整個螢幕的內容等，這些通常都被表示為元件。react將作為props傳入並呼叫welcome元件。welcome元件將元素作為結果返回。functionwel...