PDA

View Full Version : DetailPanel for ExtJS v1.1.1



beginor
23 Oct 2007, 11:33 PM
ExtJS v1.1.1 has Ext.form.BasicForm & Ext.form.Form, these widget are excellent, but they can not be used in normal asp.net web forms, because asp.net web form has a html form defined for the body, if we remove the the form, we can't use lots of server controls.

At this point, I have write a detail panel widget for ExtJS v1.1.1 by referring the Ext.form.BasicForm and Ext.form.Form 's source. There are to versions of detail panel widget, One is Ext.ux.gdeic.BasicPanel, like Ext.form.BasicForm, initialize form exists html markup , the other is Ext.ux.gdeic.DetailPanel, like Ext.form.Form, adds the ability to dynamically render detail panel with JavaScript.

this is the Ext.ux.gdeic.BasicDetailPanel usage:


<!-- this is the html makrup -->
<div id="productDetail">
<div class="x-form-item">
<label for="ProductID_Label">ProductID:</label>
<div class="x-form-element">
<input id="ProductID_TextBox" name="ProductID" size="32" type="text" />
</div>
</div>
<div class="x-form-item">
<label for="ProductName_Label">ProductName:</label>
<div class="x-form-element">
<input id="ProductName_TextBox" name="ProductName" size="32" type="text" />
</div>
</div>
....
</div>

This is the script to init a BasicDetailPanel


<script type="text/javascript">
Ext.QuickTips.init(); // I like tooltips :)
Ext.form.Field.prototype.msgTarget = 'side';

var detailPanel = new Ext.ux.gdeic.BasicDetailPanel('productDetail', { disabled: true });
var el = new Ext.form.TextField({
id: 'ProductID_TextBox',
name: 'ProductID',
width: 175,
allowBlank: false,
vType: 'alpha'
});
Ext.QuickTips.register({ target: el, title: 'ProductID', text: 'Set the Product ID'});
detailPanel.add(el);

el = new Ext.form.TextField({
id: 'ProductName_TextBox',
name: 'ProductName',
width: 175
});
Ext.QuickTips.register({ target: el, title: 'ProductName', text: 'Set the Product Name'});
detailPanel.add(el);
.....
detailPanel.render();
</script>


This is Ext.ux.gdeic.DetailPanel usage:


<!-- this is the html makrup -->
<div id="productDetail"></div>
<script type="text/javascript">
// this is the script to init a BasicDetailPanel
var detailPanel = new Ext.ux.gdeic.DetailPanel(this.detailPanelId, { disabled: false, labelAlign: 'right'});
var prodId = new Ext.form.TextField({ fieldLabel: '产品ID', name: 'ProductID', width: 220 });
Ext.QuickTips.register({ target: prodId, title: '产品ID', text: '自动赋予新产品的编号。'});

var prodName = new Ext.form.TextField({ fieldLabel: '产品名称', name: 'ProductName', width: 220 });
Ext.QuickTips.register({ target: prodName, title: '产品名称', text: '设置产品的名称'});
......
detailPanel.add(prodId, prodName, prodSup, prodCat, prodPpu, prodUp, prodUis, prodUoo, prodRl, prodDis);

detailPanel.addButton({ text: '更新', tooltip : '更新当前产品信息'});
detailPanel.addButton({ text: '取消', tooltip : '撤销对当前产品信息的修改'});
detailPanel.render();
</script>


And you can download the DetailPanel's source from the attachments. Good luck!

beginor
23 Oct 2007, 11:40 PM
Screenshots of detail panel