LANBilling - «Сетевые решения»

В качестве примера написания собственного приложения для АСР LANBilling мы рассмотрим включение в интерфейс LANBilling отчета, показывающего списания АП, который вызывается из формы свойств соответствующей учетной записи. Необходимые изменения мы будем производить в файлах:

localizes/ru/tpls/vg_edit.tpl
create_vg.php
resources/myreport.js

vg_edit.tpl — является не исполняемым файлом и содержит HTML разметку будущей страницы. Код этого файла с точки зрения шаблона содержит как статичные части так и динамические блоки обрабатываемые парсером несколько раз, в результате чего формируются повторяющиеся элементы дизайна.
К примеру это может быть шаблон строки таблицы обработанной несколько раз и содержащей список разных данных. Как правило блоки в шаблоне имеют метки начала и конца. Если во время выполнения скрипта блок не был объявлен для обработки, то он пропускается и не попадает в результат страницы.
Шаблон может содержать переменные, которые исполняемый скрипт заполнит в ходе обработки, они обрамляются фигурными скобками. Поскольку создаваемый нами отчет основывается на клиентском скриптовом языке, то большую часть изменений мы сделаем в vg_edit.tpl.
Для корректной работы отчета нужно подключить составляющие основу файлы ExtJS со скриптами и стилями. В большинстве страниц интерфейса это уже сделано и подобные действия не потребуются. Одной из ссылок будет указатель на наш файл с функцией, который создадим в папке resources с именем myreport.js


<link rel="stylesheet" type="text/css" href="resources/extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="resources/extjs/resources/css/xtheme-gray-extend.css">
<script type="text/javascript" src="resources/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="resources/extjs/ext-all.js"></script>
<script type="text/javascript" src="resources/myreport.js"></script>

Чтобы в отчете все надписи в заголовках отображались на понятном пользователю языке добавим в блок объявляющий JavaScript следующий код. Обратите внимание на переменные в фигурных скобках, поскольку эти же названия нужно будет определить и в исполняемом файле php.


<script language='javascript'>

	var Localize = {
		Date: '{N_DATE}',
		Discarding: '{DISCARDING}',
		TarName: '{TARPLAN}',
		RentMode: '{SCENERYCODE}',
		Head: '{CHARGEHISTORY0}'
	}
	
</script>

Вызов самой функции разместим в заголовке основной таблицы. Отыщем строку 216 и вставим элемент «button» с указанием вызова функции showVgIDRent по событию OnClick в ячейку таблицы. В результате код кнопки вставленной в заголовок будет выглядеть следующим образом:


<tr>
	<th colspan=3 height=30 bgcolor="#e0e0e0" style="border: solid 1px #c0c0c0;" class=z11>
	<table width='100%'><tr><td align='center' class=z11>
	<!-- BEGIN vg_title -->
	<b>{VG_ACTION_TITLE}<b>
	<!-- END vg_title --></td>
	<!-- BEGIN rentChargeHist -->
	<td width='30'><button type='button' class='img_button' title='{CHARGEHISTORY} {USERSPAYMENTSHORT}' onClick="showVgIDRent('{VGIDRENT}')">
	<img title='{CHARGEHISTORY} {USERSPAYMENTSHORT}' border=0 src="images/chartUp.gif"></button></td>
	<!-- END rentChargeHist --></tr>
	</table>
	</th>
</tr>

Теперь перейдем к редактированию исполняемого файла create_vg.php. В строке 943 создан класс для работы с шаблонами, переменная $tpl. С помощью вызова функций этого класса зададим логику обработки шаблона для нашего кода. Функция setCurrentBlock устанавливает указатель на тот блок, который должен быть обработан, parseCurrentBlock закрывает указатель.
Установить значение переменной в шаблоне нужно функцией setVariable, где первый параметр — переменная в шаблоне, вторая — присваиваемое значение. В примере ниже все передаваемые значения берутся из определений описанных в локализации (localize.php), вы можете указать свои.


$tpl->setVariable("N_DATE", N_DATE);
$tpl->setVariable("DISCARDING", DISCARDING);
$tpl->setVariable("TARPLAN", TARPLAN);
$tpl->setVariable("SCENERYCODE", SCENERY);
$tpl->setVariable("CHARGEHISTORY0", CHARGEHISTORY .  ' ' . sprintf("%04d-%02d", date('Y'), date('m')));

if(!IS_NEW)
{	
	$tpl->setCurrentBlock("rentChargeHist");
	$tpl->syncBlockLocalize("rentChargeHist");
	$tpl->setVariable("VGIDRENT", $_POST['vg_id']);
	$tpl->setVariable("USERSPAYMENTSHORT", USERSPAYMENTSHORT . ". " . sprintf("%04d-%02d", date('Y'), date('m')));
	$tpl->parseCurrentBlock();
}

Убедившись, что страница, сформированная сервером, отображает нужный элемент управления приступим к написанию самой функции JavaScript, для этого в созданный файл myreport.js в папке resources добавим структуру описывающую способ получения данных со стороны сервера. Объект Ext.data.Store , в нем определим:

id - идентификатор
proxy - объект описывающий метод и ссылку подключения.
baseParams - параметры которые необходимо передать серверу
reader - объект, который должен обработать ответ сервера
sortInfo - поле, сортируемое по умолчанию
описание переменных и их привязка к колонкам таблицы


var vgIdDataStore = new Ext.data.Store({
	id: 'vgIdDataStore',
	proxy: new Ext.data.HttpProxy({
		url: 'config.php',
		method: 'POST'
	}),
	baseParams:{async_call: 4, vgid: vgId},
	reader: new Ext.data.JsonReader({
		root: 'results',
		totalProperty: 'total',
		id: 'id'
	},[ 
		{name: 'date', type: 'date', mapping: 'date'},
		{name: 'amount', type: 'float', mapping: 'amount'},
		{name: 'tarif', type: 'string', mapping: 'tarif'}, 
		{name: 'rentcode', type: 'int', mapping: 'rentcode'} 
	]),
	sortInfo:{field: 'date', direction: "ASC"}
});

В следующем шаге опишем структуру таблицы, которую наша программа должна отобразить. Объект Ext.grid.ColumnModel. Описание колонок таблицы передается в виде массива, по этому важно соблюдать очередность:

header — заголовок колонки
readOnly — недоступна для модификации
dataIndex — значение берется из данных в соответствии со значением mapping
width — ширина колонки
hidden — не отображается
renderer — не обязательный параметр, но удобный, если необходимо форматировать вывод

var vgIdColumnModel = new Ext.grid.ColumnModel(
	[{
		header: Localize.Date,
		readOnly: true,
		dataIndex: 'date',
		width: 160,
		hidden: false,
		renderer: Ext.util.Format.dateRenderer('Y-m-d')
	},{
		header: Localize.Discarding,
		dataIndex: 'amount',
		width: 180,
		readOnly: true
	},{
		header: Localize.TarName,
		dataIndex: 'tarif',
		width: 220,
		readOnly: true
	},{
		header: Localize.RentMode,
		dataIndex: 'rentcode',
		width: 100,
		readOnly: true
	}]
);

Сводим воедино два объекта в Ext.grid.EditorGridPanel. В store определяем данные от сервера, а в cm: структуру таблицы. В терминах ExtJS созданный нами объект является своего рода панель на которой можно разместить не только табличную сетку, а так же дополнительные элементы управления.
К примеру, чтобы организовать постраничный просмотр данных, нужно для нижнего колонтитула bbar создать объект Ext.PagingToolbar.

var vgIdListingEditorGrid = new Ext.grid.EditorGridPanel({
	id: 'vgIdListingEditorGrid',
	store: vgIdDataStore,
	cm: vgIdColumnModel,
	enableColLock: false,
	clicksToEdit:1,
	selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
	bbar: new Ext.PagingToolbar({
		pageSize: 50,
		store: vgIdDataStore,
		displayInfo: true
	})
});

Результатом отображения будет «окно» созданное с помощью объекта Ext.Window

title — заголовок в шапке
closable — окно можно закрыть
width и height — ширина и высота
items — формировать на основании значений

var vgIdListingWindow = new Ext.Window({
	id: 'vgIdListingWindow',
	title: '{CHARGEHISTORY0} {USERSPAYMENTSHORT0}',
	closable:true,
	width:720,
	height:350,
	plain:true,
	layout: 'fit',
	items: vgIdListingEditorGrid
});

Таким образом, мы сформировали на основании полученных данных от сервера отчет о списаниях АП для выбранной учетной записи. Ниже представлен полный текст функции.

var Localize = {
	Date: 'Дата',
	Discarding: 'Списание средств',
	TarName; 'Тарифный план',
	RentMode: 'Сценарий',
	Head: 'Списания средств'
}

function showVgIDRent( vgId )
{
	if(typeof vgId == 'undefined') return false;
	
	var vgIdDataStore = new Ext.data.Store({
		id: 'vgIdDataStore',
		proxy: new Ext.data.HttpProxy({
			url: 'config.php',
			method: 'POST'
		}),
		baseParams:{async_call: 4, vgid: vgId},
		reader: new Ext.data.JsonReader({
			root: 'results',
			totalProperty: 'total',
			id: 'id'
		},[ 
			{name: 'date', type: 'date', mapping: 'date'},
			{name: 'amount', type: 'float', mapping: 'amount'},
			{name: 'tarif', type: 'string', mapping: 'tarif'}, 
			{name: 'rentcode', type: 'int', mapping: 'rentcode'} 
		]),
		sortInfo:{field: 'date', direction: "ASC"}
	});
	
	vgIdColumnModel = new Ext.grid.ColumnModel(
		[{
			header: Localize.Date,
			readOnly: true,
			dataIndex: 'date',
			width: 160,
			hidden: false,
			renderer: Ext.util.Format.dateRenderer('Y-m-d')
		},{
			header: Localize.Discarding,
			dataIndex: 'amount',
			width: 180,
			readOnly: true
		},{
			header: Localize.TarName,
			dataIndex: 'tarif',
			width: 220,
			readOnly: true
		},{
			header: Localize.RentMode,
			dataIndex: 'rentcode',
			width: 100,
			readOnly: true
		}]
	);
	
	vgIdColumnModel.defaultSortable= true;
	
	vgIdListingEditorGrid = new Ext.grid.EditorGridPanel({
		id: 'vgIdListingEditorGrid',
		store: vgIdDataStore,
		cm: vgIdColumnModel,
		enableColLock: false,
		clicksToEdit:1,
		selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
		bbar: new Ext.PagingToolbar({
			pageSize: 50,
			store: vgIdDataStore,
			displayInfo: true
		})
	});
	
	vgIdListingWindow = new Ext.Window({
		id: 'vgIdListingWindow',
		title: Localize.Head,
		closable:true,
		width:720,
		height:350,
		plain:true,
		layout: 'fit',
		items: vgIdListingEditorGrid
	});
	
	vgIdDataStore.reload({params: {start: 0, limit: 50}});
	vgIdListingWindow.show();
}

Не стоит забывать о том, что описанный пример является клиентской стороной приложения и для полноты работы потребуется серверная часть, которая сформирует данные, полученные на основании требований клиента и результата sql-запроса.
Предполагается, что отправляемые данные сервером будут в текстовом структурированном формате (JSON) и кодировке UTF-8, если же результатом от сервера должен быть XML документ, то в vgIdDataStore.reader нужно использовать другой объект ExtJS для чтения данных. Подробнее об этом можно узнать из документации на сайте разработчика библиотеки http://extjs.com/deploy/dev/docs/ Несомненно, встраивание своих функций в код интерфейса АСР с помощью линкования файлов является наиболее разумным и лаконичным решением с точки зрения трафика между сервером и клиентом, но возможным вариантом может быть и полное описание функции в самом файле шаблона, что позволяет усложнить и сделать более гибкой логику формирования кода страницы за счет динамических блоков.