Tina G
2 Sep 2007, 11:50 PM
Animal:
The complete .js file is as follows:
var source_parent;
var source_depth;
var isItLeaf;
var isItDraggable;
var tree;
var pagesize=10;
var ds;
var record;
Ext.onReady(function(){
//alert('in');
var Tree = Ext.tree;
Ext.QuickTips.init();
var layout = new Ext.BorderLayout('layout', {
west: {
initialSize:350,
split:true,
titlebar:true
},
center: {
alwaysShowTabs:true,
tabPosition:'top'
}
});
var menu = layout.getEl().createChild({tag:'div', id:'menu'});
var viewEl = menu.createChild({tag:'div', id:'folders'});
var tb = new Ext.Toolbar(menu.createChild({tag:'div'}));
tb.add(
{
pressed: true,
enableToggle:true,
text: 'Save Changes',
cls: 'x-btn-text-icon save',
handler: function(e) {
//alert('Changes saved');
Ext.MessageBox.show({
title: 'Caller Menu Action',
msg: 'Changes saved...',
width:300,
buttons: Ext.MessageBox.OK
});
}
},'-', {
pressed: true,
enableToggle:true,
text: 'Disable Feature',
cls: 'x-btn-text-icon disab',
handler: disableFeature
},'-', {
pressed: true,
enableToggle:true,
text: 'Customize',
cls: 'x-btn-text-icon save',
handler: customize
}
);
var folders = layout.add('center', new Ext.ContentPanel(menu, {
title:'Caller Menu',
fitToFrame:true,
autoScroll:true,
autoCreate:true,
toolbar: tb,
resizeEl:viewEl
}));
var prompts = layout.getEl().createChild({tag:'div', id:'prompts'});
var gviewEl = prompts.createChild({tag:'div', id:'gprompts'});
var gprompts = layout.add('west', new Ext.ContentPanel(prompts, {
title:'VM promopts',
fitToFrame:true,
autoScroll:true,
autoCreate:true
}));
//===================================== Tree ======================================= START
// building up the treePanel
tree = new Tree.TreePanel(viewEl, {
animate:true,
containerScroll: true,
rootVisible: true,
//enableDD:true,
ddGroup : 'GridDD',
enableDrop:true,
dropConfig : {
ddAppendOnly: true
}
});
// declaring a node that is going to be the tree's root
var root = new Tree.TreeNode({
id: "root",
text: "Caller Menu",
draggable:false,
leaf: false
});
// setting the node as the root
tree.setRootNode(root);
tree.on('nodedrop', function(e) {
alert(e.target.id);
});
//--------------------- Global Command -----------------------------
var global = new Tree.TreeNode({
id: "global",
text: "Global Commands",
allowDrag:false,
leaf: false,
allowDrop: false
});
// -- Cancel --
var global_cancel = new Tree.TreeNode({
id: "globalcancel",
text: "Cancel",
allowDrag:false,
leaf: false,
allowDrop: false
});
var gCancel_keypressoption = new Tree.TreeNode({
id: "rewind_keypressoption",
text: "Key Press",
draggable:false,
leaf: false,
allowDrop: false
});
var gCancel_keypress = new Tree.TreeNode({
id: "rewind_keypress",
text: "1",
allowDrag:false,
draggable:false,
leaf: true,
allowEdit: true,
allowDrop: false
});
gCancel_keypressoption.appendChild(gCancel_keypress);
global_cancel.appendChild(gCancel_keypressoption);
global.appendChild(global_cancel);
// -- Get Help --
var global_gethelp = new Tree.TreeNode({
id: "globalgethelp",
text: "Get Help",
allowDrag:false,
leaf: false,
allowDrop: false
});
var gGetHelp_keypressoption = new Tree.TreeNode({
id: "rewind_keypressoption",
text: "Key Press",
draggable:false,
leaf: false,
allowDrop: false
});
var gGetHelp_keypress = new Tree.TreeNode({
id: "rewind_keypress",
text: "*",
allowDrag:false,
draggable:false,
leaf: true,
allowEdit: true,
allowDrop: false
});
gGetHelp_keypressoption.appendChild(gGetHelp_keypress);
global_gethelp.appendChild(gGetHelp_keypressoption);
global.appendChild(global_gethelp);
// -- Exit Mailbox --
var global_exitmailbox = new Tree.TreeNode({
id: "globalexitmailbox",
text: "Exit Mailbox",
allowDrag:false,
leaf: false,
allowDrop: false
});
var gExitMailbox_keypressoption = new Tree.TreeNode({
id: "rewind_keypressoption",
text: "Key Press",
draggable:false,
leaf: false,
allowDrop: false
});
var gExitMailbox_keypress = new Tree.TreeNode({
id: "rewind_keypress",
text: "2",
allowDrag:false,
draggable:false,
leaf: true,
allowEdit: true,
allowDrop: false
});
gExitMailbox_keypressoption.appendChild(gExitMailbox_keypress);
global_exitmailbox.appendChild(gExitMailbox_keypressoption);
global.appendChild(global_exitmailbox);
// -- Access another Mailbox --
var global_anothermailbox = new Tree.TreeNode({
id: "globalanothermailbox",
text: "Access Another Mailbox",
allowDrag:false,
leaf: false,
allowDrop: false
});
var gAnotherMailbox_keypressoption = new Tree.TreeNode({
id: "rewind_keypressoption",
text: "Key Press",
draggable:false,
leaf: false,
allowDrop: false
});
var gAnotherMailbox_keypress = new Tree.TreeNode({
id: "rewind_keypress",
text: "*2",
allowDrag:false,
draggable:false,
leaf: true,
allowEdit: true,
allowDrop: false
});
gAnotherMailbox_keypressoption.appendChild(gAnotherMailbox_keypress);
global_anothermailbox.appendChild(gAnotherMailbox_keypressoption);
global.appendChild(global_anothermailbox);
root.appendChild(global);
//--------- save message ------------------------------
var save = new Tree.TreeNode({
id: "save",
text: "Save Message",
allowDrag:true,
leaf: false,
allowDrop: false
});
var save_keypressoption = new Tree.TreeNode({
id: "replay_keypressoption",
text: "Key Press",
draggable:false,
leaf: false,
allowDrop: false
});
var save_keypress = new Tree.TreeNode({
id: "replay_keypress",
text: "11",
allowDrag:false,
draggable:false,
leaf: true,
allowDrop: false,
allowEdit: true
});
var save_promptoption = new Tree.TreeNode({
id: "replay_promptoption",
text: "Prompts",
draggable:false,
leaf: false,
allowDrop: true
});
save_keypressoption.appendChild(save_keypress);
save.appendChild(save_keypressoption, save_promptoption);
root.appendChild(save);
//--------- deposite message ------------------------------
var deposite = new Tree.TreeNode({
id: "deposite",
text: "Deposite",
allowDrag:true,
leaf: false//,
//allowDrop: false
});
var dSendMsg = new Tree.TreeNode({
id: "dSendMsg",
text: "Send Message",
allowDrag:true,
leaf: false,
allowDrop: false
});
var dSendMsg_keypressoption = new Tree.TreeNode({
id: "pause_keypressoption",
text: "Key Press",
draggable:false,
leaf: false,
allowDrop: false
});
var dSendMsg_keypress = new Tree.TreeNode({
id: "pause_keypress",
text: "2",
allowDrag:false,
draggable:false,
leaf: true,
allowEdit: true,
allowDrop: false
});
var dSendMsg_promptoption = new Tree.TreeNode({
id: "pause_promptoption",
text: "Prompts",
allowDrag:false,
draggable:false,
leaf: false,
allowDrop: true
});
dSendMsg_keypressoption.appendChild(dSendMsg_keypress);
dSendMsg.appendChild(dSendMsg_keypressoption, dSendMsg_promptoption);
deposite.appendChild(dSendMsg);
// --- Enter a callback number
var dEnterCallback = new Tree.TreeNode({
id: "dEnterCallback ",
text: "Enter a Callback Number",
allowDrag:true,
leaf: false,
allowDrop: false
});
var dEnterCallback_keypressoption = new Tree.TreeNode({
id: "dEnterCallback_keypressoption",
text: "Key Press",
draggable:false,
leaf: false,
allowDrop: false
});
var dEnterCallback_keypress = new Tree.TreeNode({
id: "dEnterCallback_keypress",
text: "2",
allowDrag:false,
draggable:false,
leaf: true,
allowEdit: true,
allowDrop: false
});
var dEnterCallback_promptoption = new Tree.TreeNode({
id: "dEnterCallback_promptoption",
text: "Prompts",
allowDrag:false,
draggable:false,
leaf: false,
allowDrop: true
});
dEnterCallback_keypressoption.appendChild(dEnterCallback_keypress);
dEnterCallback.appendChild(dEnterCallback_keypressoption, dEnterCallback_promptoption);
deposite.appendChild(dEnterCallback);
root.appendChild(deposite);
//--------- record message ------------------------------
var record = new Tree.TreeNode({
id: "record",
text: "Record Message",
allowDrag:true,
leaf: false,
allowDrop: false
});
var record_keypressoption = new Tree.TreeNode({
id: "record_keypressoption",
text: "Key Press",
draggable:false,
leaf: false,
allowDrop: false
});
var record_keypress = new Tree.TreeNode({
id: "record_keypress",
text: "11",
allowDrag:false,
draggable:false,
leaf: true,
allowDrop: false,
allowEdit: true
});
var record_promptoption = new Tree.TreeNode({
id: "record_promptoption",
text: "Prompts",
draggable:false,
leaf: false,
allowDrop: true
});
record_keypressoption.appendChild(record_keypress);
record.appendChild(record_keypressoption, record_promptoption);
root.appendChild(record);
// displaying the whole thing.
tree.render();
root.expand();
global.expand();
var sm = tree.getSelectionModel();
//===================================== grid ======================================= START
/*
RecordDef=Ext.data.Record.create([
{name: 'prompt', mapping: 'prompt_id'},
{name: 'description', mapping: 'prompt_desc'},
{name: 'type', mapping: 'prompt_type'}
]);
*/
// create the Data Store
ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/extjswebapp/servlet/PromptServlet?'
}),
/*
var myReader = new Ext.data.JsonReader({
root: 'prompts',
totalProperty: 'totalCount',
id: 'prompt_id'
}, RecordDef)
*/
// create reader that reads the Topic records
reader: new Ext.data.JsonReader({
root: 'prompts',
totalProperty: 'totalCount',
id: 'prompt_id'
}, [
{name: 'prompt', mapping: 'prompt_id'},
{name: 'description', mapping: 'prompt_desc'},
{name: 'type', mapping: 'prompt_type'}
])
});
// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store
var cm = new Ext.grid.ColumnModel([{
id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Prompt",
dataIndex: 'prompt',
width: 100
},{
header: "Description",
dataIndex: 'description',
width: 250
},{
header: "Type",
dataIndex: 'type',
width: 10,
hidden: true
}]);
// create the editor grid
var grid = new Ext.grid.Grid(gviewEl, {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false,
loadMask: true,
ddGroup : 'GridDD',
enableDragDrop: true
});
// render it
grid.render();
var gridFoot = grid.getView().getFooterPanel(true);
// add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: pagesize,
//displayInfo: true,
//displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
});
// trigger the data store load
ds.load({params:{start:0, limit:pagesize}});
//alert('ds.getCount()=' + ds.getCount());
//set variable on rowclick, this var is used later to play a prompt
grid.on('rowclick', function(grid, rowIndex, e) {
play_selectedId = ds.data.items[rowIndex].id;
});
// this could be inline, but we want to define the NewPrompt record
// type so we can add records dynamically
var NewPrompt = Ext.data.Record.create([
{name: 'prompt_id', type: 'string'},
{name: 'prompt_desc', type: 'string'},
{name: 'prompt_type', type: 'string'}
]);
//==================== enable/disable option handling =================================== START
function disableFeature(e) {
if(isProperNodeSelected()) {
var n = tree.getSelectionModel().getSelectedNode();
n.disable();
n.eachChild(function(c_node){
c_node.disable();
c_node.eachChild(function(cc_node){
cc_node.disable();
});
});
}
};//'btn2' click
function isProperNodeSelected() {
//alert(tree.getSelectionModel().getSelectedNode().id);
if(tree.getSelectionModel().getSelectedNode()) {
var node=tree.getSelectionModel().getSelectedNode();
if(node.isLeaf() || node.text=='Key Press' || node.text=='Prompts') {
return false;
} else {
//do not allow to disable global commands
if((node.parentNode && node.parentNode.id=='global') || node.id=='global') {
return false;
}
return true;
}
} else {
return false;
}
}
tree.on('beforeclick', function(node, e) {
if(node.disabled) {
if(node.isLeaf() || node.text=='Key Press' || node.text=='Prompts')
return;
Ext.MessageBox.confirm('Enable Feature', 'Do you want to enable this feature?',
function(btn){
if(btn && btn=='yes') {
node.enable();
node.eachChild(function(c_node){
c_node.enable();
c_node.eachChild(function(cc_node){
cc_node.enable();
});
});
}
});
}
});
//==================== enable/disable option handling =================================== END
//=================================== customize ==============================================
function customize(e) {
//alert('in');
window.navigate('callermenu.html');
};
//============================ tree edit =============================================== START
// create the editor for the component tree
var ge = new Tree.TreeEditor(tree, {
allowBlank:false,
blankText:'A name is required',
selectOnFocus:true,
maxWidth: 2
});
ge.on('beforestartedit', function(){
var n = sm.getSelectedNode();
if(n && !n.attributes.allowEdit){
return false;
}
});
ge.on('beforecomplete', function(editor, value, startvalue){
if((tree.getSelectionModel().getSelectedNode().parentNode.id) == 'Key Presses') {
//TBD: allow digit and special charecters (*, #) ONLY
//TBD: length 2 is also if global commands allow it?
if(value.length > 2) {
alert("Maximum two digit key press is allowed.");
return false;
}
}
});
//=============================================================
// * create header panel
// * add button and delete button for custom prompt
//=============================================================
var gridHead = grid.getView().getHeaderPanel(true);
var tb = new Ext.Toolbar(gridHead);
// add the detailed add button
tb.add({
pressed: true,
enableToggle:true,
text: 'Add Prompt',
cls: '',
toggleHandler: doAdd
});
// add the detailed delete buttonadd the detailed delete button
tb.add('-', {
pressed: true,
enableToggle:true,
text: 'Delete Prompt',
cls: '',
toggleHandler: doDel
});
// add the play prompt button
tb.add('-', {
pressed: true,
enableToggle:true,
text: 'Play Prompt',
toggleHandler: doPlay
});
tb.add('-');
// add Search button
var filterButton = new Ext.Toolbar.MenuButton({
text: 'Search',
tooltip: 'Quickly search through the current page.',
minWidth: 3
});
tb.add(filterButton);
//Create the filter field
var filter = Ext.get(tb.addDom({ // add a DomHelper config to the toolbar and return a reference to it
tag: 'input',
type: 'text',
size: '3',
value: '',
style: 'background: #F0F0F9;'
}).el);
// press enter keyboard
filter.on('keypress', function(e) { // setup an onkeypress event handler
var searchText=this.getValue();
searchText=Ext.util.Format.lowercase(searchText);
if(e.getKey() == e.ENTER && this.getValue().length > 0) {// listen for the ENTER key
var searchText = Ext.util.Format.lowercase(Ext.util.Format.trim(this.getValue()));
//alert(searchText);
var my_url = '/extjswebapp/servlet/PromptServlet?action=searchData&txt=' + searchText;
//alert(my_url);
var search_data = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: my_url,
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'searchedPrompts',
totalProperty: 'searchTotalCount',
id: 'prompt_id'
}, ['prompt_id', 'prompt_desc', 'prompt_type']
),
remoteSort: false
});
search_data.on("load", function() {
var titleMsg = 'Please wait...';
var message='Loading Prompts from Server';
Ext.MessageBox.show({
title: titleMsg,
msg: message,
width:240,
progress:true,
closable:false
});
// this hideous block creates the bogus progress
var f = function(v){
return function(){
if(v == 11){
Ext.MessageBox.hide();
}else{
//Ext.MessageBox.updateProgress(v/10, 'Loading item ' + v + ' of 10...');
if(v == 1)
Ext.MessageBox.updateText('Please wait...');
else if (v == 5)
Ext.MessageBox.updateText('Loading Prompts from Server');
else if (v == 9)
Ext.MessageBox.updateText('Please wait...');
else if (v == 10)
Ext.MessageBox.updateText('Prompts loaded successfully');
}
};
};
for(var i = 1; i < 12; i++){
setTimeout(f(i), i*1000);
}
});
search_data.load();
//alert('search_data.getCount() = '+ search_data.getTotalCount());
}
if (e.getKey() == e.ENTER && this.getValue().length == 0)
ds.load();
});
//=============================================================
// * Create a new dialog - reuse by create and edit part
//=============================================================
function createNewDialog(dialogName) {
var thisDialog = new Ext.LayoutDialog(dialogName, {
modal:true,
autoTabs:true,
proxyDrag:true,
resizable:false,
width: 480,
height: 302,
shadow:true,
center: {
autoScroll: true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false
}
});
thisDialog.addKeyListener(27, thisDialog.hide, thisDialog);
thisDialog.addButton('Cancel', function() {thisDialog.hide();});
return thisDialog;
};
//=============================================================
// * Action - update
// * handle double click
// * user select one of the item and want to update it
//=============================================================
grid.on('rowdblclick', function(grid, rowIndex, e) {
var m = grid.getSelections();
if(m[0].get("type")=="0"){
alert('Only custom prompts added by you can be deleted.');
return;
}
var selectedId = ds.data.items[rowIndex].id;
var my_url = '/extjswebapp/servlet/PromptServlet?action=loadData&id=' + selectedId;
// get information from DB and set form now...
//proxy: new Ext.data.ScriptTagProxy({url:'/extjswebapp/servlet/PromptServlet?action=loadData&id=' + selectedId}),
//HttpProxy
var account_data = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: my_url,
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'prompts',
totalProperty: 'totalCount',
id: 'prompt_id'
}, ['prompt_id', 'prompt_desc', 'prompt_type']
),
remoteSort: false
});
// account_data.load();
account_data.on('load', function() {
//alert(account_data.getCount());
// set value now
var updateId = account_data.getAt(0).data['prompt_id'];
promptname_show.setValue(account_data.getAt(0).data['prompt_id']);
desc_show.setValue(account_data.getAt(0).data['prompt_desc']);
engPrompt_show.setValue(account_data.getAt(0).data['prompt_type']); //TBD: get and load prompt file path from server
var updateInstanceDlg;
if (!updateInstanceDlg) {
updateInstanceDlg = createNewDialog("a-updateInstance-dlg");
updateInstanceDlg.addButton('Save', function() {
// submit now... all the form information are submit to the server
// handle response after that...
if (form_instance_update.isValid()) {
form_instance_update.submit({
params:{id : updateId},
waitMsg:'Updating this custom prompt now...',
reset: false,
failure: function(form_instance_update, action) {
//Ext.MessageBox.alert('Error Message', action.result.errorInfo);
//remove following 3 lines
//Ext.MessageBox.alert('Confirm', action.result.info);
updateInstanceDlg.hide();
ds.load({params:{start:0, limit:pagesize}});
},
success: function(form_instance_update, action) {
Ext.MessageBox.alert('Confirm', action.result.info);
updateInstanceDlg.hide();
ds.load({params:{start:0, limit:pagesize}});
}
});
}else{
Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
}
});
var layout = updateInstanceDlg.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('a-updateInstance-inner', {title: 'Update Account'}));
layout.endUpdate();
updateInstanceDlg.show();
}
});
account_data.load();
});
//=============================================================
// * Action - play
// * start to handle play function
//=============================================================
function doPlay(){
//alert(play_selectedId);
window.open('91.wav')
}
//=============================================================
// * Action - delete
// * start to handle delete function
// * need confirm to delete
//=============================================================
function doDel(){
var m = grid.getSelections();
if(m.length > 0)
{
Ext.MessageBox.confirm('Message', 'Do you really want to delete them?' , doDel2);
}
else
{
Ext.MessageBox.alert('Error', 'Please select at least one prompt to delete');
}
}
function doDel2(btn)
{
if(btn == 'yes')
{
//alert('pressed yes button to delete');
var m = grid.getSelections();
var jsonData = "";
for(var i = 0, len = m.length; i < len; i++){
var ss = "{\"id\":\"" + m[i].get("prompt") + "\"}";
//do not allow to delete standard prompt
if(m[i].get("type")=="0"){
alert('Only custom prompts added by you can be deleted.');
return;
}
if(i==0)
jsonData = jsonData + ss ;
else
jsonData = jsonData + "," + ss;
ds.remove(m[i]);
}
//jsonData = jsonData + "]";
//alert(jsonData);
ds.load({params:{start:0, limit:pagesize, delData:jsonData}});
}
}
//=============================================================
// * Action - add
// * start to handle add function
// * new page appear and allow to submit
//=============================================================
//=============================================================
// * To create add new account dialog now....
//=============================================================
function doAdd(){
//alert('in doAdd');
var aAddInstanceDlg;
if (!aAddInstanceDlg) {
aAddInstanceDlg = createNewDialog("a-addInstance-dlg");
aAddInstanceDlg.addButton('Reset', resetForm, aAddInstanceDlg);
aAddInstanceDlg.addButton('Save', function() {
// submit now... all the form information are submit to the server
// handle response after that...
if (form_instance_create.isValid()) {
form_instance_create.submit({
waitMsg:'Adding new prompt now...',
reset: false,
failure: function(form_instance_create, action) {
//TBD: Ext.MessageBox.alert('Error Message', action.result.errorInfo);
//remove following 3 lines
//Ext.MessageBox.alert('Confirm', action.result.info);
aAddInstanceDlg.hide();
ds.load({params:{start:0, limit:pagesize}});
},
success: function(form_instance_create, action) {
Ext.MessageBox.alert('Confirm', action.result.info);
aAddInstanceDlg.hide();
ds.load({params:{start:0, limit:pagesize}});
}
});
}else{
Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
}
});
var layout = aAddInstanceDlg.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('a-addInstance-inner', {title: 'Add Prompt'}));
layout.endUpdate();
aAddInstanceDlg.show();
};
}
//=============================================================
// * Form information - pop-up dialog
// * turn on validation errors beside the field globally
//=============================================================
Ext.form.Field.prototype.msgTarget = 'side';
Ext.form.Field.prototype.height = 20;
Ext.form.Field.prototype.fieldClass = 'text-field-default';
Ext.form.Field.prototype.focusClass = 'text-field-focus';
Ext.form.Field.prototype.invalidClass = 'text-field-invalid';
//=============================================================
// * Create new form to hold user enter information
// * This form is used to create new instance
//=============================================================
var promptname_tf = new Ext.form.TextField({
fieldLabel: 'Prompt Name',
name: 'promptname',
allowBlank:false
});
var desc_tf = new Ext.form.TextField({
fieldLabel: 'Description',
name: 'desc',
allowBlank:false
});
var engPrompt_tf = new Ext.form.TextField({
fieldLabel: 'Prompt File(English)',
name: 'engPrompt',
allowBlank:false
});
var form_instance_create = new Ext.form.Form({
labelAlign: 'right',
url:'/extjswebapp/servlet/PromptServlet?action=createPrompt'
});
form_instance_create.column({width: 430, labelWidth:120, style:'margin-left:8px;margin-top:8px'});
form_instance_create.fieldset(
{id:'desc', legend:'Please fill the field'},
promptname_tf,
desc_tf,
engPrompt_tf
);
form_instance_create.applyIfToFields({width:255});
form_instance_create.render('a-addInstance-form');
form_instance_create.end();
resetForm = function() {
promptname_tf.setValue('');
desc_tf.setValue('');
engPrompt_tf.setValue('');
};
//=============================================================
// * Create form to hold user enter information
// * This form is used to update current instance
//=============================================================
var promptname_show = new Ext.form.TextField({
fieldLabel: 'Prompt Name',
name: 'promptname',
readOnly: true
});
var desc_show = new Ext.form.TextField({
fieldLabel: 'Description',
name: 'desc',
allowBlank:false
});
var engPrompt_show = new Ext.form.TextField({
fieldLabel: 'Prompt File(English)',
name: 'engPrompt',
allowBlank:false
});
var form_instance_update = new Ext.form.Form({
labelAlign: 'right',
url:'/extjswebapp/servlet/PromptServlet?action=updatePrompt'
});
form_instance_update.column({width: 430, labelWidth:120, style:'margin-left:8px;margin-top:8px'});
form_instance_update.fieldset(
{id:'', legend:'Please update the field'},
promptname_show,
desc_show,
engPrompt_show
);
form_instance_update.applyIfToFields({width:255});
form_instance_update.render('a-updateInstance-form');
form_instance_update.end();
// ============================ drag-drop =================================
var drop = new Ext.dd.DropTarget(tree.getEl(), {
ddGroup : 'GridDD',
notifyOver: function(dd, e, data) {
//return (e.target && e.target.tagName == 'SPAN') ? 'x-dd-drop-proddrop' : false;
if (e.target && e.target.tagName == 'SPAN') {
//alert(e.target.id);
//alert(e.dd);
return true;
} else {
return false;
}
},
notifyDrop : function(dd, e, data){
var myDragSource = data.rowIndex;
//alert(data.selections.length + ', ' + data.rowIndex);
//alert(tree.getSelectionModel().getSelectedNode().id);
var div = Ext.get(e.target);
//var node = Ext.get(div.dom.parentNode);
alert(div.id);
if(myDragSource) {
if(!tree.getSelectionModel().getSelectedNode()) {
alert("Please select a node in tree first!");
return false;
}
var parent = tree.getSelectionModel().getSelectedNode();
//find out if drop is allowed on this newly created node or not
if(!parent.attributes.allowDrop) {
alert("Prompt files can only be added to Prompt node in tree!");
return false;
}
var row_id = ds.getAt(data.rowIndex).get("prompt");
//alert(row_id);
var p = new Tree.TreeNode({
id: row_id,
text: row_id,
leaf: false,
allowDelete: true,
allowDrop: false
});
parent.appendChild(p);
parent.expand();
} else {
return true;
}
return true;
}
});
//==================== drag drop restrictions =================================== START
/* //set source id before drag
tree.dragZone.onBeforeDrag = function(data, e){
isItLeaf = data.node.isLeaf();
isItDraggable = data.node.draggable;
//alert(isItLeaf);
source_parent = data.node.parentNode.id;
}
//check if parent is same or changed. Do not allow to change parent
tree.on("beforenodedrop", function(de) {
alert('beforenodedrop');
//alert("isItLeaf=" + isItLeaf + ", isItDraggable=" + isItDraggable);
if (source_parent != de.target.parentNode.id || !isItDraggable) {
alert('This move is not allowed!');
return false;
}
return true;
});
tree.on('nodedragover', function(e){
alert('nodedragover');
if(e.target.attributes.allowDrop)
return true;
else
return false;
});
*/
});
I have two data stores; ds conatining original data and search_data containing partial data. Based on user's search text, the grid needs to load only the partial data returned by server.
Powered by vBulletin® Version 4.1.5 Copyright © 2012 vBulletin Solutions, Inc. All rights reserved.